Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select, multiselect & autocomplete styling fixes #94

Merged
merged 9 commits into from
Jan 30, 2024
Merged

Select, multiselect & autocomplete styling fixes #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
933974e
MALING-642 fix: small select sizing
Jaanesen Jan 29, 2024
6e06719
MALIN-642 feat: dropdownHeight attribute
Jaanesen Jan 29, 2024
7b463ef
MALIN-642 fix: multiselect and styling
Jaanesen Jan 29, 2024
59c7262
fix: typo
Jaanesen Jan 29, 2024
d2acf4e
MALIN-642 fix: label styling
Jaanesen Jan 29, 2024
d3b5d8a
MALIN-642 fix: autocomplete styling
Jaanesen Jan 29, 2024
ef42756
MALIN-642 fix: autocomplete styling
Jaanesen Jan 30, 2024
886fd51
MALIN-642 fix: chevron rotations on open
Jaanesen Jan 30, 2024
de8ab36
MALIN-642 fix: dropdownHeight for autocomplete
Jaanesen Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 28 additions & 13 deletions packages/css/src/formElements/autocomplete/autocomplete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@

.md-autocomplete__container {
position: relative;
background-color: white;
}

.md-autocomplete__label {
display: flex;
align-items: flex-end;
font-weight: 600;
padding-bottom: 0.25em;
}

.md-autocomplete__label > * + * {
Expand All @@ -28,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;
Expand All @@ -39,15 +41,20 @@
justify-content: space-between;
padding: 1em;
border: 1px solid var(--mdGreyColor60);
margin: 0.8em 0 0 0;
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);
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -130,6 +139,7 @@

.md-autocomplete__dropdown-item {
display: flex;
align-items: center;
font-family: 'Open sans';
border: 0;
background-color: #fff;
Expand Down Expand Up @@ -169,6 +179,10 @@
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--small .md-autocomplete__input {
padding-bottom: calc(0.75em - 1px);
}

.md-autocomplete--open .md-autocomplete__dropdown {
Expand All @@ -179,6 +193,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;
}

Expand Down
51 changes: 43 additions & 8 deletions packages/css/src/formElements/multiselect/multiselect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
display: flex;
align-items: flex-end;
font-weight: 600;
padding-bottom: 0.25em;
}

.md-multiselect__label > * + * {
Expand All @@ -36,6 +37,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);
Expand All @@ -46,11 +51,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 {
Expand Down Expand Up @@ -93,7 +105,6 @@

.md-multiselect__dropdown-wrapper {
position: relative;
margin: 0.7em 0 0 0;
}

.md-multiselect__dropdown {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
15 changes: 14 additions & 1 deletion packages/css/src/formElements/select/select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
display: flex;
align-items: flex-end;
font-weight: 600;
padding-bottom: 0.25em;
}

.md-select__label > * + * {
Expand All @@ -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;
}
Expand All @@ -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);
Expand Down Expand Up @@ -106,6 +117,7 @@

.md-select__dropdown-item {
display: flex;
align-items: center;
font-family: 'Open sans';
border: 0;
background-color: #fff;
Expand Down Expand Up @@ -158,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;
}
Expand Down
44 changes: 24 additions & 20 deletions packages/react/src/formElements/MdAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface MdAutocompleteProps {
error?: boolean;
errorText?: string;
prefixIcon?: React.ReactNode;
dropdownHeight?: number;
}

const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
Expand All @@ -46,6 +47,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
errorText,
prefixIcon = null,
onChange,
dropdownHeight,
...otherProps
},
ref,
Expand All @@ -71,6 +73,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
'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 =
Expand Down Expand Up @@ -107,27 +110,27 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(

return (
<div className={classNames}>
<div className="md-autocomplete__label">
{label && label !== '' && (
{label && label !== '' && (
<div className="md-autocomplete__label">
<label id={`md-autocomplete_label_${autocompleteId}`} htmlFor={autocompleteId}>
{label}
</label>
)}
{helpText && helpText !== '' && (
<div className="md-autocomplete__help-button">
<MdHelpButton
ariaLabel={`Hjelpetekst for ${label}`}
id={`md-autocomplete_help-button_${autocompleteId}`}
aria-expanded={helpOpen}
aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
onClick={() => {
return setHelpOpen(!helpOpen);
}}
expanded={helpOpen}
/>
</div>
)}
</div>
{helpText && helpText !== '' && (
<div className="md-autocomplete__help-button">
<MdHelpButton
ariaLabel={`Hjelpetekst for ${label}`}
id={`md-autocomplete_help-button_${autocompleteId}`}
aria-expanded={helpOpen}
aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
onClick={() => {
return setHelpOpen(!helpOpen);
}}
expanded={helpOpen}
/>
</div>
)}
</div>
)}

{helpText && helpText !== '' && (
<div className={`md-autocomplete__help-text ${helpOpen ? 'md-autocomplete__help-text--open' : ''}`}>
Expand All @@ -147,7 +150,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
onClickOutside={() => {
return setOpen(false);
}}
className="md-autocomplete__container"
className={`md-autocomplete__container ${size === 'small' ? 'md-autocomplete--small' : ''}`}
>
{prefixIcon && (
<div
Expand Down Expand Up @@ -194,7 +197,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
{...otherProps}
/>
<div aria-hidden="true" className="md-autocomplete__input-icon">
<MdChevronIcon />
<MdChevronIcon transform={`rotate(${open ? '180' : '0'})`} />
</div>

{options && options.length > 0 && (
Expand All @@ -203,6 +206,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
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 (
Expand Down
Loading
Loading