diff --git a/packages/plugins/i18n/admin/src/components/LocaleSelect/index.js b/packages/plugins/i18n/admin/src/components/LocaleSelect/index.js index ef838afe78..dc0a5195cc 100644 --- a/packages/plugins/i18n/admin/src/components/LocaleSelect/index.js +++ b/packages/plugins/i18n/admin/src/components/LocaleSelect/index.js @@ -1,27 +1,18 @@ /* eslint-disable react/jsx-indent */ import React from 'react'; -import styled from 'styled-components'; -import { Select, Option } from '@strapi/parts/Select'; -import { Loader } from '@strapi/parts/Loader'; +import { Combobox, ComboboxOption } from '@strapi/parts/Combobox'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import useLocales from '../../hooks/useLocales'; import useDefaultLocales from '../../hooks/useDefaultLocales'; import { getTrad } from '../../utils'; -const SmallLoader = styled(Loader)` - img { - height: 1rem; - width: 1rem; - } -`; - /** * The component is memoized and needs a useCallback over the onLocaleChange and * onClear props to prevent the Select from re-rendering N times when typing on a specific * key in a formik form */ -const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => { +const LocaleSelect = React.memo(({ value, onLocaleChange, error }) => { const { formatMessage } = useIntl(); const { defaultLocales, isLoading } = useDefaultLocales(); const { locales } = useLocales(); @@ -40,30 +31,13 @@ const LocaleSelect = React.memo(({ value, onLocaleChange, error, onClear }) => { const computedValue = value || ''; return ( - + {options.map(option => ( + + {option.label} + + ))} + ); }); LocaleSelect.defaultProps = { error: undefined, value: undefined, - onClear: () => undefined, onLocaleChange: () => undefined, }; LocaleSelect.propTypes = { error: PropTypes.string, - onClear: PropTypes.func, onLocaleChange: PropTypes.func, value: PropTypes.string, }; diff --git a/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/LocaleSelect.test.js b/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/LocaleSelect.test.js index bc8731ebb0..6c200b4f15 100644 --- a/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/LocaleSelect.test.js +++ b/packages/plugins/i18n/admin/src/components/LocaleSelect/tests/LocaleSelect.test.js @@ -50,23 +50,55 @@ describe('LocaleSelect', () => { afterEach(() => server.resetHandlers()); afterAll(() => server.close()); - it('shows an aria-busy element and a loader when loading the data', async () => { + it('shows an aria-busy element when loading the data', async () => { const { container } = render(); expect(container.firstChild).toMatchInlineSnapshot(` - .c3 { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - width: 100%; + .c5 { + padding-left: 12px; + } + + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c6 { background: transparent; border: none; + position: relative; + z-index: 1; + } + + .c6 svg { + height: 0.6875rem; + width: 0.6875rem; + } + + .c6 svg path { + fill: #666687; + } + + .c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; } - .c3:focus { - outline: none; + .c7 svg { + width: 0.375rem; } .c1 { @@ -76,52 +108,40 @@ describe('LocaleSelect', () => { color: #32324d; } - .c12 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #666687; - } - - .c7 { + .c3 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; padding-left: 12px; + border-radius: 4px; + background: #ffffff; } - .c11 { - padding-right: 16px; - padding-left: 16px; + .c3:focus-within { + outline: 2px solid #4945ff; + outline-offset: 2px; + box-shadow: revert; } .c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + min-height: 2.5rem; + border: none; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + font-size: 0.875rem; + color: #32324d; } - .c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + .c4:focus-visible { + outline: none; + box-shadow: none; + outline-offset: 0; + } + + .c4[aria-disabled='true'] { + background: inherit; + color: inherit; } .c0 { @@ -143,162 +163,59 @@ describe('LocaleSelect', () => { margin-top: 4px; } - .c2 { - position: relative; - border: 1px solid #dcdce4; - padding-right: 12px; - border-radius: 4px; - background: #ffffff; - overflow: hidden; - } - - .c2:focus-within { - border: 1px solid #4945ff; - } - - .c13 { - background: transparent; - border: none; - position: relative; - z-index: 1; - } - - .c13 svg { - height: 0.6875rem; - width: 0.6875rem; - } - - .c13 svg path { - fill: #666687; - } - - .c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: none; - border: none; - } - - .c14 svg { - width: 0.375rem; - } - - .c5 { - min-height: 2.5rem; - } - - .c9 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - .c10 { - -webkit-animation: gzYjWD 1s infinite linear; - animation: gzYjWD 1s infinite linear; - } - - .c8 img { - height: 1rem; - width: 1rem; - } -
- Locales - +
- -
+ + +
@@ -312,8 +229,8 @@ describe('LocaleSelect', () => { await waitFor(() => expect(screen.queryByText('Loading the available locales...')).not.toBeInTheDocument() ); - fireEvent.mouseDown(screen.getByLabelText('Locales')); - await waitFor(() => screen.getByRole('listbox')); + fireEvent.click(screen.getByLabelText('Locales')); + await waitFor(() => screen.getByText('Afrikaans (af)')); expect(screen.getByText('Afrikaans (af)')).toBeVisible(); expect(screen.getByText('French (fr)')).toBeVisible(); @@ -327,8 +244,8 @@ describe('LocaleSelect', () => { await waitFor(() => expect(screen.queryByText('Loading the available locales...')).not.toBeInTheDocument() ); - fireEvent.mouseDown(screen.getByLabelText('Locales')); - await waitFor(() => screen.getByRole('listbox')); + fireEvent.click(screen.getByLabelText('Locales')); + await waitFor(() => screen.getByText('Afrikaans (af)')); fireEvent.click(screen.getByText('French (fr)')); expect(onLocaleChangeSpy).toBeCalledWith({ code: 'fr', displayName: 'French (fr)' });