From 933974e2757153509809f293ceb70d8d5dd5ecc1 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Mon, 29 Jan 2024 10:37:31 +0100 Subject: [PATCH 1/9] MALING-642 fix: small select sizing --- packages/css/src/formElements/select/select.css | 11 +++++++++++ packages/react/src/formElements/MdSelect.tsx | 1 + 2 files changed, 12 insertions(+) diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css index 94aa8861..bdbc99e9 100644 --- a/packages/css/src/formElements/select/select.css +++ b/packages/css/src/formElements/select/select.css @@ -45,6 +45,17 @@ border-color: var(--mdErrorColor); } +.md-select__button.md-select__button--small { + padding: 0.75em; +} + +.md-select__button:not(.md-select__button--open):focus.md-select__button--small { + padding: calc(0.75em - 1px); +} +.md-select__button.md-select__button--open.md-select__button--small { + padding: calc(0.75em - 1px); +} + .md-select--disabled .md-select__button { background-color: var(--mdGreyColor20); color: var(--mdGreyColor60); diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx index 2c1054e5..ed933bfb 100644 --- a/packages/react/src/formElements/MdSelect.tsx +++ b/packages/react/src/formElements/MdSelect.tsx @@ -117,6 +117,7 @@ const MdSelect = React.forwardRef( const buttonClassNames = classnames('md-select__button', { 'md-select__button--open': !!open, 'md-select__button--error': !!error, + 'md-select__button--small': size === 'small', }); const optionClass = (option: MdSelectOptionProps) => { From 6e06719b55e28f78ac3c4cc4f2540260bbdc03bd Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Mon, 29 Jan 2024 10:52:02 +0100 Subject: [PATCH 2/9] MALIN-642 feat: dropdownHeight attribute --- packages/css/src/formElements/select/select.css | 1 + packages/react/src/formElements/MdSelect.tsx | 3 +++ stories/Select.stories.tsx | 12 ++++++++++++ 3 files changed, 16 insertions(+) diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css index bdbc99e9..e0c2f401 100644 --- a/packages/css/src/formElements/select/select.css +++ b/packages/css/src/formElements/select/select.css @@ -117,6 +117,7 @@ .md-select__dropdown-item { display: flex; + align-items: center; font-family: 'Open sans'; border: 0; background-color: #fff; diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx index ed933bfb..464f8bb1 100644 --- a/packages/react/src/formElements/MdSelect.tsx +++ b/packages/react/src/formElements/MdSelect.tsx @@ -27,6 +27,7 @@ export interface MdSelectProps { error?: boolean; errorText?: string; onChange(_e: MdSelectOptionProps): void; + dropdownHeight?: number; } const MdSelect = React.forwardRef( @@ -43,6 +44,7 @@ const MdSelect = React.forwardRef( error = false, errorText, onChange, + dropdownHeight, ...otherProps }, ref, @@ -192,6 +194,7 @@ const MdSelect = React.forwardRef( role="listbox" className="md-select__dropdown" id={`md-select_dropdown_${selectId}`} + style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }} > {options.map(option => { return ( diff --git a/stories/Select.stories.tsx b/stories/Select.stories.tsx index b56adf12..1f41746e 100644 --- a/stories/Select.stories.tsx +++ b/stories/Select.stories.tsx @@ -135,6 +135,17 @@ export default { }, }, }, + dropdownHeight: { + type: { name: 'number' }, + description: 'Set max height of dropdown in pixels', + table: { + defaultValue: { summary: '350' }, + type: { + summary: 'number', + }, + }, + control: { type: 'number' }, + }, selectRef: { type: { name: 'Ref' }, description: @@ -175,4 +186,5 @@ Select.args = { helpText: '', error: false, errorText: '', + dropdownHeight: null, }; From 7b463efc197d8368e6f62a0a076393b73f656139 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Mon, 29 Jan 2024 14:30:46 +0100 Subject: [PATCH 3/9] MALIN-642 fix: multiselect and styling --- .../formElements/multiselect/multiselect.css | 49 ++++++++++++++++--- .../css/src/formElements/select/select.css | 1 + .../react/src/formElements/MdMultiSelect.tsx | 4 ++ stories/MultiSelect.stories.tsx | 12 +++++ 4 files changed, 59 insertions(+), 7 deletions(-) diff --git a/packages/css/src/formElements/multiselect/multiselect.css b/packages/css/src/formElements/multiselect/multiselect.css index 0bbb25da..fecc4656 100644 --- a/packages/css/src/formElements/multiselect/multiselect.css +++ b/packages/css/src/formElements/multiselect/multiselect.css @@ -36,6 +36,10 @@ cursor: pointer; } +.md-multiselect__button.md-multiselect--small { + padding: 0.75em; +} + .md-multiselect--disabled .md-multiselect__button { background-color: var(--mdGreyColor20); color: var(--mdGreyColor60); @@ -46,11 +50,18 @@ .md-multiselect__button:focus-within { outline: none; } +.md-multiselect:not(.md-multiselect--disabled) + .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus, +.md-multiselect:not(.md-multiselect--disabled) + .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within { + padding: calc(0.75em - 1px); + border: 2px solid var(--mdPrimaryColor80); +} .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus, .md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within { padding: calc(1em - 1px); - border: 2px solid var(--mdPrimaryColor); + border: 2px solid var(--mdPrimaryColor80); } .md-multiselect--error:not(.md-multiselect--disabled) .md-multiselect__button { @@ -127,13 +138,22 @@ display: flex; flex-shrink: 0; flex-grow: 1; - padding: 0.9em; + padding: 0.75em; } .md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText { padding: 0; } +.md-multiselect__dropdown-item .md-checkbox__labelText { + font-family: 'Open Sans'; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + color: var(--mdGreyColor); +} + .md-multiselect__dropdown-item:hover, .md-multiselect__dropdown-item:focus, .md-multiselect__dropdown-item:focus-within { @@ -191,24 +211,39 @@ /* Open state */ .md-multiselect--open .md-multiselect__button { - border-top: 2px solid var(--mdPrimaryColor); - border-right: 2px solid var(--mdPrimaryColor); - border-left: 2px solid var(--mdPrimaryColor); + border-top: 2px solid var(--mdPrimaryColor80); + border-right: 2px solid var(--mdPrimaryColor80); + border-left: 2px solid var(--mdPrimaryColor80); padding: calc(1em - 1px); padding-bottom: 1em; } +.md-multiselect--open .md-multiselect__button.md-multiselect--small { + border-top: 2px solid var(--mdPrimaryColor80); + border-right: 2px solid var(--mdPrimaryColor80); + border-left: 2px solid var(--mdPrimaryColor80); + padding: calc(0.75em - 1px); + padding-bottom: 0.75em; +} + .md-multiselect__button:not(.md-multiselect__button--open):focus, .md-multiselect__button:not(.md-multiselect__button--open):focus-within { padding: calc(1em - 1px); - border: 2px solid var(--mdPrimaryColor); + border: 2px solid var(--mdPrimaryColor80); +} + +.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus, +.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within { + padding: calc(0.75em - 1px); + border: 2px solid var(--mdPrimaryColor80); } .md-multiselect__dropdown--open { max-height: 350px; overflow-y: auto; opacity: 1; - border: 2px solid var(--mdPrimaryColor); + border: 2px solid var(--mdPrimaryColor80); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); border-top: 0; } .md-multiselect--open.md-multiselect--error .md-multiselect__dropdown { diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css index e0c2f401..11743958 100644 --- a/packages/css/src/formElements/select/select.css +++ b/packages/css/src/formElements/select/select.css @@ -170,6 +170,7 @@ opacity: 1; transition: max-height 0.5s ease-in-out; border: 2px solid var(--mdPrimaryColor); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); border-top: 0; z-index: 2; } diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index f4026bc0..489a6f49 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -31,6 +31,7 @@ export interface MdMultiSelectProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any id?: any; onChange?(_e: React.ChangeEvent): void; + dropdownHeight?: number; } const MdMultiSelect = React.forwardRef( @@ -49,6 +50,7 @@ const MdMultiSelect = React.forwardRef( closeOnSelect = false, id, onChange, + dropdownHeight, ...otherProps }, ref, @@ -71,6 +73,7 @@ const MdMultiSelect = React.forwardRef( const buttonClassNames = classnames('md-multiselect__button', { 'md-multiselect__button--open': !!open, + 'md-multiselect--small': size === 'small', }); const dropDownClassNames = classnames('md-multiselect__dropdown', { @@ -211,6 +214,7 @@ const MdMultiSelect = React.forwardRef( role="listbox" id={`md-multiselect_dropdown_${multiSelectId}`} className={dropDownClassNames} + style={{ maxHeight: dropdownHeight ? `${dropdownHeight}px` : 'auto' }} > {options.map(option => { return ( diff --git a/stories/MultiSelect.stories.tsx b/stories/MultiSelect.stories.tsx index 8990ab07..0a816544 100644 --- a/stories/MultiSelect.stories.tsx +++ b/stories/MultiSelect.stories.tsx @@ -162,6 +162,17 @@ export default { }, }, }, + dropdownHeight: { + type: { name: 'number' }, + description: 'Set max height of dropdown in pixels', + table: { + defaultValue: { summary: '350px' }, + type: { + summary: 'number', + }, + }, + control: { type: 'number' }, + }, }, }; @@ -213,4 +224,5 @@ Multiselect.args = { helpText: '', error: false, errorText: '', + dropdownHeight: null, }; From 59c7262f8b34b003d74476de3ae0ded41012cb05 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Mon, 29 Jan 2024 15:11:44 +0100 Subject: [PATCH 4/9] fix: typo --- stories/MultiSelect.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/MultiSelect.stories.tsx b/stories/MultiSelect.stories.tsx index 0a816544..6bf459dc 100644 --- a/stories/MultiSelect.stories.tsx +++ b/stories/MultiSelect.stories.tsx @@ -34,7 +34,7 @@ export default { argTypes: { label: { type: { name: 'string' }, - description: 'The label for the selct box.', + description: 'The label for the select box.', table: { defaultValue: { summary: 'null' }, type: { From d2acf4e6b80de33e355783f9280c0663b5662093 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Mon, 29 Jan 2024 15:24:59 +0100 Subject: [PATCH 5/9] MALIN-642 fix: label styling --- .../formElements/multiselect/multiselect.css | 2 +- .../css/src/formElements/select/select.css | 2 +- .../react/src/formElements/MdMultiSelect.tsx | 37 ++++++++++--------- packages/react/src/formElements/MdSelect.tsx | 37 ++++++++++--------- 4 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/css/src/formElements/multiselect/multiselect.css b/packages/css/src/formElements/multiselect/multiselect.css index fecc4656..0524f247 100644 --- a/packages/css/src/formElements/multiselect/multiselect.css +++ b/packages/css/src/formElements/multiselect/multiselect.css @@ -15,6 +15,7 @@ display: flex; align-items: flex-end; font-weight: 600; + padding-bottom: 0.25em; } .md-multiselect__label > * + * { @@ -104,7 +105,6 @@ .md-multiselect__dropdown-wrapper { position: relative; - margin: 0.7em 0 0 0; } .md-multiselect__dropdown { diff --git a/packages/css/src/formElements/select/select.css b/packages/css/src/formElements/select/select.css index 11743958..b5de6f9c 100644 --- a/packages/css/src/formElements/select/select.css +++ b/packages/css/src/formElements/select/select.css @@ -19,6 +19,7 @@ display: flex; align-items: flex-end; font-weight: 600; + padding-bottom: 0.25em; } .md-select__label > * + * { @@ -36,7 +37,6 @@ padding: 1em; border: 1px solid var(--mdGreyColor60); color: var(--mdGreyColor); - margin: 0.8em 0 0 0; text-align: left; cursor: pointer; } diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index 489a6f49..bb33a495 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -146,24 +146,25 @@ const MdMultiSelect = React.forwardRef( return (
-
- {label && label !== '' &&
{label}
} - - {helpText && helpText !== '' && ( -
- { - return setHelpOpen(!helpOpen); - }} - expanded={helpOpen} - /> -
- )} -
+ {label && label !== '' && ( +
+ {label && label !== '' &&
{label}
} + {helpText && helpText !== '' && ( +
+ { + return setHelpOpen(!helpOpen); + }} + expanded={helpOpen} + /> +
+ )} +
+ )} {helpText && helpText !== '' && (
diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx index 464f8bb1..b27bf8f4 100644 --- a/packages/react/src/formElements/MdSelect.tsx +++ b/packages/react/src/formElements/MdSelect.tsx @@ -130,24 +130,25 @@ const MdSelect = React.forwardRef( return (
-
- {label && label !== '' &&
{label}
} - {helpText && helpText !== '' && ( -
- { - return setHelpOpen(!helpOpen); - }} - expanded={helpOpen} - /> -
- )} -
- + {label && label !== '' && ( +
+ {label && label !== '' &&
{label}
} + {helpText && helpText !== '' && ( +
+ { + return setHelpOpen(!helpOpen); + }} + expanded={helpOpen} + /> +
+ )} +
+ )} {helpText && helpText !== '' && (
Date: Mon, 29 Jan 2024 15:48:49 +0100 Subject: [PATCH 6/9] MALIN-642 fix: autocomplete styling still missing height changes for small size, however the component is a bit weird and more difficult to style correctly to the design specifications --- .../autocomplete/autocomplete.css | 4 ++- .../react/src/formElements/MdAutocomplete.tsx | 36 +++++++++---------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/css/src/formElements/autocomplete/autocomplete.css b/packages/css/src/formElements/autocomplete/autocomplete.css index cb628d1f..4d89bc7c 100644 --- a/packages/css/src/formElements/autocomplete/autocomplete.css +++ b/packages/css/src/formElements/autocomplete/autocomplete.css @@ -19,6 +19,7 @@ display: flex; align-items: flex-end; font-weight: 600; + padding-bottom: 0.25em; } .md-autocomplete__label > * + * { @@ -39,7 +40,6 @@ justify-content: space-between; padding: 1em; border: 1px solid var(--mdGreyColor60); - margin: 0.8em 0 0 0; text-align: left; cursor: pointer; } @@ -169,6 +169,7 @@ border-left: 2px solid var(--mdPrimaryColor); border-right: 2px solid var(--mdPrimaryColor); border-top: 2px solid var(--mdPrimaryColor); + padding-bottom: calc(1em - 1px); } .md-autocomplete--open .md-autocomplete__dropdown { @@ -179,6 +180,7 @@ border-right: 2px solid var(--mdPrimaryColor); border-left: 2px solid var(--mdPrimaryColor); border-bottom: 2px solid var(--mdPrimaryColor); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); z-index: 2; } diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index b01f9a5e..b5a84a20 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -107,27 +107,27 @@ const MdAutocomplete = React.forwardRef( return (
-
- {label && label !== '' && ( + {label && label !== '' && ( +
- )} - {helpText && helpText !== '' && ( -
- { - return setHelpOpen(!helpOpen); - }} - expanded={helpOpen} - /> -
- )} -
+ {helpText && helpText !== '' && ( +
+ { + return setHelpOpen(!helpOpen); + }} + expanded={helpOpen} + /> +
+ )} +
+ )} {helpText && helpText !== '' && (
From ef42756d9f361d3b07a03a41256352203572f592 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Tue, 30 Jan 2024 13:15:58 +0100 Subject: [PATCH 7/9] MALIN-642 fix: autocomplete styling --- .../autocomplete/autocomplete.css | 37 +++++++++++++------ .../react/src/formElements/MdAutocomplete.tsx | 5 ++- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/packages/css/src/formElements/autocomplete/autocomplete.css b/packages/css/src/formElements/autocomplete/autocomplete.css index 4d89bc7c..6bc4aa5b 100644 --- a/packages/css/src/formElements/autocomplete/autocomplete.css +++ b/packages/css/src/formElements/autocomplete/autocomplete.css @@ -13,6 +13,7 @@ .md-autocomplete__container { position: relative; + background-color: white; } .md-autocomplete__label { @@ -29,7 +30,7 @@ .md-autocomplete__input { max-width: 100%; width: 100%; - background-color: #fff; + background-color: transparent; border-radius: 0; color: var(--mdGreyColor); box-sizing: border-box; @@ -42,12 +43,18 @@ border: 1px solid var(--mdGreyColor60); text-align: left; cursor: pointer; + position: relative; + z-index: 2; } .md-autocomplete__input.md-autocomplete__input--error { border-color: var(--mdErrorColor); } +.md-autocomplete--small > .md-autocomplete__input { + padding: 0.75em; +} + .md-autocomplete--disabled .md-autocomplete__input { background-color: var(--mdGreyColor20); color: var(--mdGreyColor60); @@ -65,15 +72,6 @@ padding-right: 1em; } -.md-autocomplete__input-icon { - display: flex; - flex-shrink: 0; - width: 15px; - height: 15px; - rotate: 90deg; - color: var(--mdGreyColor); -} - .md-autocomplete__input.md-autocomplete__input--has-prefix { padding-left: 2.5em; } @@ -90,6 +88,12 @@ width: 16px; display: flex; color: var(--mdPrimaryColor); + z-index: 1; +} + +.md-autocomplete--small > .md-autocomplete__input__prefix { + top: 1em; + left: 1em; } .md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled { @@ -101,12 +105,17 @@ top: 1.3em; right: 0.9em; display: flex; - width: 15px; - height: 15px; + width: 16px; + height: 16px; rotate: 90deg; color: var(--mdGreyColor); } +.md-autocomplete--small > .md-autocomplete__input-icon { + top: 1em; + right: 1em; +} + .md-autocomplete__help-text { max-height: 0; overflow: hidden; @@ -130,6 +139,7 @@ .md-autocomplete__dropdown-item { display: flex; + align-items: center; font-family: 'Open sans'; border: 0; background-color: #fff; @@ -171,6 +181,9 @@ border-top: 2px solid var(--mdPrimaryColor); padding-bottom: calc(1em - 1px); } +.md-autocomplete--open.md-autocomplete--small .md-autocomplete__input { + padding-bottom: calc(0.75em - 1px); +} .md-autocomplete--open .md-autocomplete__dropdown { max-height: 350px; diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index b5a84a20..a9a9c054 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -71,6 +71,7 @@ const MdAutocomplete = React.forwardRef( 'md-autocomplete__input--open': !!open, 'md-autocomplete__input--error': !!error, 'md-autocomplete__input--has-prefix': prefixIcon !== null && prefixIcon !== '', + 'md-autocomplete--small': size === 'small', }); const selectedOption = @@ -147,7 +148,7 @@ const MdAutocomplete = React.forwardRef( onClickOutside={() => { return setOpen(false); }} - className="md-autocomplete__container" + className={`md-autocomplete__container ${size === 'small' ? 'md-autocomplete--small' : ''}`} > {prefixIcon && (
( {...otherProps} /> {options && options.length > 0 && ( From 886fd512393a372faaa2aab96f37e2e82150d413 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Tue, 30 Jan 2024 13:25:50 +0100 Subject: [PATCH 8/9] MALIN-642 fix: chevron rotations on open --- packages/react/src/formElements/MdMultiSelect.tsx | 2 +- packages/react/src/formElements/MdSelect.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index bb33a495..76f68f65 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -205,7 +205,7 @@ const MdMultiSelect = React.forwardRef(
+{selected.length - 1}
)} diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx index b27bf8f4..4202749f 100644 --- a/packages/react/src/formElements/MdSelect.tsx +++ b/packages/react/src/formElements/MdSelect.tsx @@ -185,7 +185,7 @@ const MdSelect = React.forwardRef( >
{displayValue}
From de8ab36175653b3ac5d6749dac21225b348e8b14 Mon Sep 17 00:00:00 2001 From: Jonathan Aanesen Date: Tue, 30 Jan 2024 13:34:58 +0100 Subject: [PATCH 9/9] MALIN-642 fix: dropdownHeight for autocomplete --- packages/react/src/formElements/MdAutocomplete.tsx | 3 +++ stories/Autocomplete.stories.tsx | 12 ++++++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index a9a9c054..31f8be4f 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -28,6 +28,7 @@ export interface MdAutocompleteProps { error?: boolean; errorText?: string; prefixIcon?: React.ReactNode; + dropdownHeight?: number; } const MdAutocomplete = React.forwardRef( @@ -46,6 +47,7 @@ const MdAutocomplete = React.forwardRef( errorText, prefixIcon = null, onChange, + dropdownHeight, ...otherProps }, ref, @@ -204,6 +206,7 @@ const MdAutocomplete = React.forwardRef( role="listbox" id={`md-autocomplete__dropdown_${autocompleteId}`} className="md-autocomplete__dropdown" + style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }} > {(autocompleteValue ? results : defaultOptions ? defaultOptions : options ? options : []).map(option => { return ( diff --git a/stories/Autocomplete.stories.tsx b/stories/Autocomplete.stories.tsx index b7bc1ee9..4db6fdcb 100644 --- a/stories/Autocomplete.stories.tsx +++ b/stories/Autocomplete.stories.tsx @@ -145,6 +145,17 @@ export default { }, }, }, + dropdownHeight: { + type: { name: 'number' }, + description: 'Set max height of dropdown in pixels', + table: { + defaultValue: { summary: 'variable' }, + type: { + summary: 'number', + }, + }, + control: { type: 'number' }, + }, inputRef: { type: { name: 'Ref' }, description: @@ -190,4 +201,5 @@ Autocomplete.args = { helpText: '', error: false, errorText: '', + dropdownHeight: null, };