diff --git a/packages/pxweb2-ui/src/lib/components/Select/Select.module.scss b/packages/pxweb2-ui/src/lib/components/Select/Select.module.scss index d635bd551..f044c5e26 100644 --- a/packages/pxweb2-ui/src/lib/components/Select/Select.module.scss +++ b/packages/pxweb2-ui/src/lib/components/Select/Select.module.scss @@ -79,6 +79,10 @@ position: absolute; } +.visualOnlyButton { + pointer-events: none; +} + // -------------------------------------------------------- // --- CSS classes for the Variabelbox Select component --- // -------------------------------------------------------- @@ -130,16 +134,17 @@ justify-content: center; align-items: flex-start; gap: var(--px-border_width-default); - flex: 1 0 0; + flex: 1 1 auto; + min-width: 0; } .optionLayoutVariablebox { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - line-clamp: 1; + display: block; + width: 100%; align-self: stretch; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .modalRadioList { diff --git a/packages/pxweb2-ui/src/lib/components/Select/Select.stories.tsx b/packages/pxweb2-ui/src/lib/components/Select/Select.stories.tsx index c993c952d..7e6c5acad 100644 --- a/packages/pxweb2-ui/src/lib/components/Select/Select.stories.tsx +++ b/packages/pxweb2-ui/src/lib/components/Select/Select.stories.tsx @@ -51,6 +51,8 @@ function closeModal() { console.log('Close modal'); } +const changeCategory = 'Change category'; + export const Default = { args: { variant: 'default', @@ -59,6 +61,7 @@ export const Default = { hideLabel: false, options: options, placeholder: placeholder, + changeCategory: changeCategory, onChange: selectedOptionChanged, }, }; @@ -85,6 +88,7 @@ export const Variant: StoryFn = () => { onChange={selectedOptionChanged} addModal={addModal} removeModal={closeModal} + changeCategory={changeCategory} > ); @@ -147,6 +151,7 @@ export const SelectedOption: StoryFn = () => { options={options} placeholder={placeholder} onChange={selectedOptionChanged} + changeCategory={changeCategory} >

Selected option = Option 2:

); @@ -182,6 +188,7 @@ export const WithVeryLongOptionText: StoryFn = () => { placeholder={placeholder} selectedOption={options[2]} onChange={selectedOptionChanged} + changeCategory={changeCategory} > ); @@ -198,6 +205,8 @@ export const RTLLanguage: StoryFn = () => { const rtlPlaceholder = 'اختر خيارًا'; + const changeCategory = 'تغيير الفئة'; + return (

RTL Language Support

@@ -207,12 +216,12 @@ export const RTLLanguage: StoryFn = () => { void; @@ -32,12 +32,12 @@ export type SelectProps = { export function Select({ variant = 'default', label, - languageDirection = 'ltr', modalHeading = '', modalCancelLabel = '', modalConfirmLabel = '', hideLabel = false, placeholder = '', + changeCategory = '', options: ops, selectedOption, onChange, @@ -66,12 +66,12 @@ export function Select({ {variant === 'inVariableBox' && ( & { - languageDirection: 'ltr' | 'rtl'; addModal: (id: string, onClose: () => void) => void; removeModal: (name: string) => void; + changeCategory?: string; }; function VariableBoxSelect({ label, - languageDirection, modalHeading, modalCancelLabel, modalConfirmLabel, options, placeholder, + changeCategory, selectedOption, onChange, tabIndex, @@ -223,6 +223,13 @@ function VariableBoxSelect({ ); const selectedItem: SelectOption | undefined = selectedOption; + const triggerAriaLabel = [ + label, + selectedItem ? selectedItem.label : placeholder, + changeCategory, + ] + .filter(Boolean) + .join(', '); const handleOpenModal = () => { setIsModalOpen(true); @@ -289,13 +296,6 @@ function VariableBoxSelect({ } }, [removeModal, isModalOpen, addModal]); - // handle rtl for the icon - const chevronIcon = getIconDirection( - languageDirection, - 'ChevronRight', - 'ChevronLeft', - ); - return ( <>
{ if (programmaticFocusRef.current) { @@ -313,7 +314,7 @@ function VariableBoxSelect({ handleOpenModal(); }} onKeyUp={(event) => { - if (event.key === ' ') { + if (event.key === ' ' || event.key === 'Enter') { handleOpenModal(); } }} @@ -323,8 +324,8 @@ function VariableBoxSelect({ } }} > -
-
{isModalOpen && ( diff --git a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxContent/VariableBoxContent.tsx b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxContent/VariableBoxContent.tsx index 77c8b5e3d..1716b997c 100644 --- a/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxContent/VariableBoxContent.tsx +++ b/packages/pxweb2-ui/src/lib/components/VariableBox/VariableBoxContent/VariableBoxContent.tsx @@ -37,7 +37,6 @@ type VariableBoxContentProps = VariableBoxPropsToContent & { selectedValues: SelectedVBValues[]; totalValues: number; totalChosenValues: number; - languageDirection: 'ltr' | 'rtl'; onChangeCodeList: (selectedItem: SelectOption, varId: string) => void; onChangeCheckbox: (varId: string, value: string) => void; onChangeMixedCheckbox: ( @@ -57,7 +56,6 @@ type VirtualListItem = { export function VariableBoxContent({ varId, label, - languageDirection, type, values, codeLists, @@ -516,7 +514,6 @@ export function VariableBoxContent({ label={t( 'presentation_page.side_menu.selection.variablebox.content.select.label', )} - languageDirection={languageDirection} modalHeading={label} modalCancelLabel={t( 'presentation_page.side_menu.selection.variablebox.content.select.modal.cancel_button', @@ -527,6 +524,9 @@ export function VariableBoxContent({ placeholder={t( 'presentation_page.side_menu.selection.variablebox.content.select.placeholder', )} + changeCategory={t( + 'presentation_page.side_menu.selection.variablebox.content.select.change_category', + )} addModal={addModal} removeModal={removeModal} options={mappedAndSortedCodeLists} diff --git a/packages/pxweb2/public/locales/ar/translation.json b/packages/pxweb2/public/locales/ar/translation.json index 0e70037cc..f1ce94d9b 100644 --- a/packages/pxweb2/public/locales/ar/translation.json +++ b/packages/pxweb2/public/locales/ar/translation.json @@ -97,8 +97,9 @@ }, "content": { "select": { - "label": "حدد التجميع", + "label": "حدد الفئة", "placeholder": "قم بالاختيار", + "change_category": "تغيير الفئة", "modal": { "cancel_button": "يلغي", "confirm_button": "يحفظ" diff --git a/packages/pxweb2/public/locales/en/translation.json b/packages/pxweb2/public/locales/en/translation.json index 69c8fe6ca..021f1a8bc 100644 --- a/packages/pxweb2/public/locales/en/translation.json +++ b/packages/pxweb2/public/locales/en/translation.json @@ -154,8 +154,9 @@ }, "content": { "select": { - "label": "Select grouping", + "label": "Select category", "placeholder": "Nothing selected", + "change_category": "Change", "modal": { "cancel_button": "Cancel", "confirm_button": "Save" diff --git a/packages/pxweb2/public/locales/no/translation.json b/packages/pxweb2/public/locales/no/translation.json index b2b39deba..95051710c 100644 --- a/packages/pxweb2/public/locales/no/translation.json +++ b/packages/pxweb2/public/locales/no/translation.json @@ -154,8 +154,9 @@ }, "content": { "select": { - "label": "Velg inndeling", + "label": "Velg kategori", "placeholder": "Ikke valgt", + "change_category": "Endre", "modal": { "cancel_button": "Avbryt", "confirm_button": "Bekreft" diff --git a/packages/pxweb2/public/locales/sv/translation.json b/packages/pxweb2/public/locales/sv/translation.json index 19e74aef6..0e42eae8e 100644 --- a/packages/pxweb2/public/locales/sv/translation.json +++ b/packages/pxweb2/public/locales/sv/translation.json @@ -154,8 +154,9 @@ }, "content": { "select": { - "label": "Välj indelning", + "label": "Välj kategori", "placeholder": "Inget valt", + "change_category": "Ändra", "modal": { "cancel_button": "Avbryt", "confirm_button": "Spara" diff --git a/packages/pxweb2/src/@types/resources.d.ts b/packages/pxweb2/src/@types/resources.d.ts index 6329c3a87..5504fae2d 100644 --- a/packages/pxweb2/src/@types/resources.d.ts +++ b/packages/pxweb2/src/@types/resources.d.ts @@ -1,4 +1,4 @@ -interface Resources { +export default interface Resources { translation: { common: { alert: { @@ -282,7 +282,8 @@ interface Resources { mixed_checkbox: 'Select all'; mixed_checkbox_search: 'Select all results'; select: { - label: 'Select grouping'; + change_category: 'Change'; + label: 'Select category'; modal: { cancel_button: 'Cancel'; confirm_button: 'Save'; @@ -384,5 +385,3 @@ interface Resources { }; }; } - -export default Resources;