Merge pull request #14258 from strapi/relation-input/move-to-cm

[RelationInput] move component to CM

packages/core/admin/admin/src/components/GuidedTour/Homepage/tests/index.test.js

@@ -161,7 +161,7 @@ describe('GuidedTour Homepage', () => {
         background: #ffffff;
       }
 
-      .c25 .sc-iCfMLu {
+      .c25 .sc-hKwDye {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -3,10 +3,12 @@ import styled from 'styled-components';
 import { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+
+import { pxToRem } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 
-import pxToRem from '../../../utils/pxToRem';
+import { getTrad } from '../../../utils';
 
 const StyledBullet = styled.div`
   flex-shrink: 0;
@@ -25,14 +27,12 @@ export const Option = (props) => {
 
   if (publicationState) {
     const isDraft = publicationState === 'draft';
-    // To fix: use getTrad utils from CM once component is migrated into CM components
     const draftMessage = {
-      id: 'content-manager.components.Select.draft-info-title',
+      id: getTrad('components.Select.draft-info-title'),
       defaultMessage: 'State: Draft',
     };
-    // To fix: use getTrad utils from CM once component is migrated into CM components
     const publishedMessage = {
-      id: 'content-manager.components.Select.publish-info-title',
+      id: getTrad('components.Select.publish-info-title'),
       defaultMessage: 'State: Published',
     };
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);

packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -6,7 +6,7 @@ import { Flex } from '@strapi/design-system/Flex';
 
 const ChildrenWrapper = styled(Flex)`
   width: 100%;
-  // Used to prevent endAction to be pushed out of container
+  /* Used to prevent endAction to be pushed out of container */
   min-width: 0;
 `;
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -18,7 +18,7 @@ const ShadowBox = styled(Box)`
   }
 
   &:before {
-    // TODO: as for DS Table component we would need this to be handled by the DS theme
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
     content: ${({ overflow }) =>
       overflow === 'top-bottom' || overflow === 'top' ? "''" : undefined};
     background: linear-gradient(rgba(33, 33, 52, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
@@ -26,7 +26,7 @@ const ShadowBox = styled(Box)`
   }
 
   &:after {
-    // TODO: as for DS Table component we would need this to be handled by the DS theme
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
     content: ${({ overflow }) =>
       overflow === 'top-bottom' || overflow === 'bottom' ? "''" : undefined};
     background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(33, 33, 52, 0.1) 100%);

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/Option.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent, act } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+
+import { ReactSelect } from '@strapi/helper-plugin';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 
-import ReactSelect from '../../../ReactSelect';
 import { Option } from '../Option';
 
 const setup = (props) =>
@@ -15,7 +16,7 @@ const setup = (props) =>
     </ThemeProvider>
   );
 
-describe('RelationInput || Option', () => {
+describe('Content-Manager || RelationInput || Option', () => {
   it('should render custom Option with published state title', () => {
     setup({ options: [{ mainField: 'relation 1', publicationState: 'published' }] });
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/RelationItem.test.js

@@ -11,7 +11,7 @@ const setup = ({ endAction }) =>
     </ThemeProvider>
   );
 
-describe('RelationItem', () => {
+describe('Content-Manager || RelationInput || RelationItem', () => {
   it('should render and match snapshot', () => {
     const { container } = setup({});
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/RelationList.test.js

@@ -14,7 +14,7 @@ const setup = ({ endAction }) =>
     </ThemeProvider>
   );
 
-describe('RelationList', () => {
+describe('Content-Manager || RelationInput || RelationList', () => {
   it('should render and match snapshot', () => {
     const { container } = setup({});
 

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationItem.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RelationItem should render and match snapshot 1`] = `
+exports[`Content-Manager || RelationInput || RelationItem should render and match snapshot 1`] = `
 .c3 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);

packages/core/admin/admin/src/content-manager/components/RelationInput/components/tests/__snapshots__/RelationList.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RelationList should render and match snapshot 1`] = `
+exports[`Content-Manager || RelationInput || RelationList should render and match snapshot 1`] = `
 .c6 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);

packages/core/admin/admin/src/content-manager/components/RelationInput/index.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 
+import { ReactSelect } from '@strapi/helper-plugin';
 import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box';
 import { BaseLink } from '@strapi/design-system/BaseLink';
@@ -19,15 +20,13 @@ import { RelationItem } from './components/RelationItem';
 import { RelationList } from './components/RelationList';
 import { Option } from './components/Option';
 
-import ReactSelect from '../ReactSelect';
-
 const RelationItemCenterChildren = styled(RelationItem)`
   div {
     justify-content: center;
   }
 `;
 
-export const RelationInput = ({
+const RelationInput = ({
   description,
   disabled,
   error,
@@ -212,3 +211,5 @@ RelationInput.propTypes = {
   searchResults: ReactQuerySearchResult,
   relations: ReactQueryRelationResult,
 };
+
+export default RelationInput;

packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js

@@ -209,7 +209,7 @@ describe('Wysiwyg render and actions buttons', () => {
         background: #ffffff;
       }
 
-      .c30 .sc-crHmcD {
+      .c30 .sc-pVTFL {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js

@@ -125,7 +125,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         border: 1px solid #4945ff;
       }
 
-      .c12 .sc-hlGDCY {
+      .c12 .sc-kBzgEd {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js

@@ -135,7 +135,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         width: 100%;
       }
 
-      .c33 .sc-furwcr {
+      .c33 .sc-eCImPb {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js

@@ -159,7 +159,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         width: 100%;
       }
 
-      .c48 .sc-furwcr {
+      .c48 .sc-eCImPb {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -141,7 +141,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         border: 1px solid #4945ff;
       }
 
-      .c35 .sc-furwcr {
+      .c35 .sc-eCImPb {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap

@@ -102,7 +102,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c13 .sc-hlGDCY {
+.c13 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -172,7 +172,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c25 .sc-hlGDCY {
+.c25 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap

@@ -466,7 +466,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-hrJsxi"
+        class="sc-icMgfS"
       >
         <ul
           class="c17 c18"

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js

@@ -1572,7 +1572,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
               </div>
               <nav
                 aria-label="pagination"
-                class="sc-eGPXGI"
+                class="sc-XxNYO"
               >
                 <ul
                   class="c63 c64"

packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js

@@ -171,7 +171,7 @@ describe('Admin | UseCasePage', () => {
         width: 100%;
       }
 
-      .c35 .sc-fGoOlv {
+      .c35 .sc-ezHhwS {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -460,6 +460,17 @@ describe('Admin | UseCasePage', () => {
         margin-top: 24px;
       }
 
+      .c17 {
+        color: #32324d;
+        font-weight: 600;
+        font-size: 2rem;
+        line-height: 1.25;
+      }
+
+      .c10:focus-visible {
+        outline: none;
+      }
+
       .c42 {
         color: #4945ff;
         font-size: 0.75rem;
@@ -537,17 +548,6 @@ describe('Admin | UseCasePage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c17 {
-        color: #32324d;
-        font-weight: 600;
-        font-size: 2rem;
-        line-height: 1.25;
-      }
-
-      .c10:focus-visible {
-        outline: none;
-      }
-
       .c15 {
         height: 4.5rem;
       }

packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap

@@ -97,7 +97,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c13 .sc-hlGDCY {
+.c13 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,7 +177,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c16 .sc-hlGDCY {
+.c16 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap

@@ -30,91 +30,6 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   padding-left: 32px;
 }
 
-.c33 {
-  margin-top: 8px;
-}
-
-.c36 {
-  padding-right: 8px;
-}
-
-.c37 {
-  color: #4945ff;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c34 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c35 {
-  background: transparent;
-  border: none;
-  position: relative;
-  outline: none;
-}
-
-.c35[aria-disabled='true'] {
-  pointer-events: none;
-}
-
-.c35[aria-disabled='true'] svg path {
-  fill: #666687;
-}
-
-.c35 svg {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.625rem;
-}
-
-.c35 svg path {
-  fill: #4945ff;
-}
-
-.c35:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c35:focus-visible {
-  outline: none;
-}
-
-.c35:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
 .c2 {
   padding-top: 24px;
   padding-right: 16px;
@@ -556,6 +471,91 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   fill: #8e8ea9;
 }
 
+.c33 {
+  margin-top: 8px;
+}
+
+.c36 {
+  padding-right: 8px;
+}
+
+.c37 {
+  color: #4945ff;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c34 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c35 {
+  background: transparent;
+  border: none;
+  position: relative;
+  outline: none;
+}
+
+.c35[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c35[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c35 svg {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 0.625rem;
+}
+
+.c35 svg path {
+  fill: #4945ff;
+}
+
+.c35:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c35:focus-visible {
+  outline: none;
+}
+
+.c35:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
 <div>
   <div
     class="c0"

packages/core/helper-plugin/lib/src/components/RelationInput/RelationInput.stories.mdx

@@ -1,105 +0,0 @@
-<!--- RelationInput.stories.mdx --->
-
-import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { BaseLink } from '@strapi/design-system/BaseLink';
-import { Badge } from '@strapi/design-system/Badge';
-import { Icon } from '@strapi/design-system/Icon';
-import { Box } from '@strapi/design-system/Box';
-import Cross from '@strapi/icons/Cross';
-import { RelationInput } from './RelationInput';
-import { relations } from './relationsDataMock';
-
-<Meta title="components/RelationInput" />
-
-# RelationInput
-
-WIP
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    <Box padding={8}>
-      <RelationInput
-        id="relations-1"
-        label="Relations"
-        labelLoadMore="Load More"
-        listHeight="200px"
-        loadingMessage='Relations are loading'
-        name="options"
-        publicationStateTranslations={{ draft: 'Draft', published: 'Published' }}
-        searchResults={{
-          data: {
-            pages: [
-              [
-                {
-                  id: 6,
-                  mainField: 'Relation 6',
-                  publicationState: 'draft',
-                },
-                {
-                  id: 7,
-                  mainField: 'Relation 7',
-                  publicationState: 'published',
-                },
-                {
-                  id: 8,
-                  mainField: 'Relation 8',
-                  publicationState: false,
-                },
-              ],
-            ],
-          },
-          isLoading: false,
-          isSuccess: true,
-        }}
-        relations={{
-          data: {
-            pages: [
-              [
-                {
-                  id: 1,
-                  href: '/',
-                  mainField:
-                    'Relation 1 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
-                  publicationState: 'draft',
-                },
-                {
-                  id: 2,
-                  href: '',
-                  mainField:
-                    'Relation 2 with a very very very very very very very very very very very very very very very very very very very super huge really really long title',
-                  publicationState: 'published',
-                },
-                {
-                  id: 3,
-                  href: '',
-                  mainField: 'Relation 3',
-                  publicationState: 'published',
-                },
-                {
-                  id: 4,
-                  href: '',
-                  mainField: 'Relation 4',
-                  publicationState: 'draft',
-                },
-                {
-                  id: 5,
-                  href: '',
-                  mainField: 'Relation 5',
-                  publicationState: false,
-                },
-              ],
-            ],
-          },
-          isLoading: false,
-          isSuccess: true,
-        }}
-      />
-    </Box>
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable of={RelationItem} />

packages/core/helper-plugin/lib/src/components/RelationInput/index.js

@@ -1,3 +0,0 @@
-import { RelationInput } from './RelationInput';
-
-export default RelationInput;

packages/core/helper-plugin/lib/src/components/RelationInput/relationsDataMock.js

@@ -1,42 +0,0 @@
-export const relations = [
-  {
-    title: 'This is my first article relation',
-    status: 'published',
-    id: 1,
-  },
-  {
-    title: 'This is my second article relation',
-    status: 'draft',
-    id: 2,
-  },
-  {
-    title: 'This is my third article relation',
-    status: 'published',
-    id: 3,
-  },
-  {
-    title: 'This is my fourth article relation',
-    status: 'published',
-    id: 4,
-  },
-  {
-    title: 'This is my fifth article relation',
-    status: 'published',
-    id: 5,
-  },
-  {
-    title: 'This is my sixth article relation',
-    status: 'draft',
-    id: 6,
-  },
-  {
-    title: 'This is my seventh article relation',
-    status: 'published',
-    id: 7,
-  },
-  {
-    title: 'This is my eighth article relation',
-    status: 'published',
-    id: 8,
-  },
-];

packages/core/helper-plugin/lib/src/index.js

@@ -68,7 +68,6 @@ export { default as ReactSelect } from './components/ReactSelect';
 export { default as ReactSelectAsync } from './components/ReactSelect/Async';
 export { default as Link } from './components/Link';
 export { default as LinkButton } from './components/LinkButton';
-export { default as RelationInput } from './components/RelationInput';
 
 // New icons
 export { default as SortIcon } from './icons/SortIcon';

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap

@@ -1451,7 +1451,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-bYQOTS"
+        class="sc-fMfAsl"
       >
         <ul
           class="c17 c74"

packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap

@@ -94,7 +94,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c25 .sc-fGoOlv {
+.c25 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +164,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c28 .sc-fGoOlv {
+.c28 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap

@@ -110,7 +110,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-fGoOlv {
+.c49 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-fGoOlv {
+.c52 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +262,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-fGoOlv {
+.c53 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap

@@ -110,7 +110,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-fGoOlv {
+.c49 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-fGoOlv {
+.c52 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +262,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-fGoOlv {
+.c53 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap

@@ -94,7 +94,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c32 .sc-fGoOlv {
+.c32 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +164,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c37 .sc-fGoOlv {
+.c37 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap

@@ -146,7 +146,7 @@ Object {
           class=" css-1hb7zxy-IndicatorsContainer"
         >
           <button
-            class="sc-gJbFto sc-URNzB sc-dfhuTu inKUzw cfMhhk gOzGkf"
+            class="sc-eBTqsU sc-ksDcAU sc-bJcRwn elEUJG hjqBQK ddQtUR"
             type="button"
           >
             <svg

packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js

@@ -145,7 +145,7 @@ describe('FromComputerForm', () => {
         border: 1px solid #4945ff;
       }
 
-      .c13 .sc-fGoOlv {
+      .c13 .sc-ezHhwS {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -215,7 +215,7 @@ describe('FromComputerForm', () => {
         background: #ffffff;
       }
 
-      .c21 .sc-fGoOlv {
+      .c21 .sc-ezHhwS {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap

@@ -92,7 +92,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c15 .sc-fGoOlv {
+.c15 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,7 +162,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c57 .sc-fGoOlv {
+.c57 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap

@@ -130,7 +130,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c32 .sc-fGoOlv {
+.c32 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,7 +200,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c38 .sc-fGoOlv {
+.c38 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -922,7 +922,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c34 .sc-fGoOlv {
+.c34 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -992,7 +992,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c31 .sc-fGoOlv {
+.c31 .sc-ezHhwS {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js

@@ -783,7 +783,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c44:hover:not([aria-disabled='true']) .sc-efaPnb {
+      .c44:hover:not([aria-disabled='true']) .sc-OVzLa {
         color: #271fe0;
       }
 
@@ -1161,7 +1161,7 @@ describe('Admin | containers | RoleCreatePage', () => {
                                   class="c55 c56"
                                 >
                                   <span
-                                    class="c55 sc-efaPnb c57"
+                                    class="c55 sc-OVzLa c57"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js

@@ -851,7 +851,7 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c49:hover:not([aria-disabled='true']) .sc-efaPnb {
+      .c49:hover:not([aria-disabled='true']) .sc-OVzLa {
         color: #271fe0;
       }
 
@@ -1263,7 +1263,7 @@ describe('Admin | containers | RoleEditPage', () => {
                                   class="c60 c61"
                                 >
                                   <span
-                                    class="c60 sc-efaPnb c62"
+                                    class="c60 sc-OVzLa c62"
                                     id="accordion-label-accordion-1"
                                   >
                                     Address