Skip to content

Commit 24d2609

Browse files
JaanesenJaanesen
authored
Merge pull request #94 from miljodir/MALIN-642-designsystem-md-select-sizing-fix
Select, multiselect & autocomplete styling fixes
2 parents e0449f0 + de8ab36 commit 24d2609

File tree

9 files changed

+194
-81
lines changed

9 files changed

+194
-81
lines changed

‎packages/css/src/formElements/autocomplete/autocomplete.css

+28-13
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@
1313

1414
.md-autocomplete__container {
1515
position: relative;
16+
background-color: white;
1617
}
1718

1819
.md-autocomplete__label {
1920
display: flex;
2021
align-items: flex-end;
2122
font-weight: 600;
23+
padding-bottom: 0.25em;
2224
}
2325

2426
.md-autocomplete__label > * + * {
@@ -28,7 +30,7 @@
2830
.md-autocomplete__input {
2931
max-width: 100%;
3032
width: 100%;
31-
background-color: #fff;
33+
background-color: transparent;
3234
border-radius: 0;
3335
color: var(--mdGreyColor);
3436
box-sizing: border-box;
@@ -39,15 +41,20 @@
3941
justify-content: space-between;
4042
padding: 1em;
4143
border: 1px solid var(--mdGreyColor60);
42-
margin: 0.8em 0 0 0;
4344
text-align: left;
4445
cursor: pointer;
46+
position: relative;
47+
z-index: 2;
4548
}
4649

4750
.md-autocomplete__input.md-autocomplete__input--error {
4851
border-color: var(--mdErrorColor);
4952
}
5053

54+
.md-autocomplete--small > .md-autocomplete__input {
55+
padding: 0.75em;
56+
}
57+
5158
.md-autocomplete--disabled .md-autocomplete__input {
5259
background-color: var(--mdGreyColor20);
5360
color: var(--mdGreyColor60);
@@ -65,15 +72,6 @@
6572
padding-right: 1em;
6673
}
6774

68-
.md-autocomplete__input-icon {
69-
display: flex;
70-
flex-shrink: 0;
71-
width: 15px;
72-
height: 15px;
73-
rotate: 90deg;
74-
color: var(--mdGreyColor);
75-
}
76-
7775
.md-autocomplete__input.md-autocomplete__input--has-prefix {
7876
padding-left: 2.5em;
7977
}
@@ -90,6 +88,12 @@
9088
width: 16px;
9189
display: flex;
9290
color: var(--mdPrimaryColor);
91+
z-index: 1;
92+
}
93+
94+
.md-autocomplete--small > .md-autocomplete__input__prefix {
95+
top: 1em;
96+
left: 1em;
9397
}
9498

9599
.md-autocomplete__input__prefix.md-autocomplete__input__prefix--disabled {
@@ -101,12 +105,17 @@
101105
top: 1.3em;
102106
right: 0.9em;
103107
display: flex;
104-
width: 15px;
105-
height: 15px;
108+
width: 16px;
109+
height: 16px;
106110
rotate: 90deg;
107111
color: var(--mdGreyColor);
108112
}
109113

114+
.md-autocomplete--small > .md-autocomplete__input-icon {
115+
top: 1em;
116+
right: 1em;
117+
}
118+
110119
.md-autocomplete__help-text {
111120
max-height: 0;
112121
overflow: hidden;
@@ -130,6 +139,7 @@
130139

131140
.md-autocomplete__dropdown-item {
132141
display: flex;
142+
align-items: center;
133143
font-family: 'Open sans';
134144
border: 0;
135145
background-color: #fff;
@@ -169,6 +179,10 @@
169179
border-left: 2px solid var(--mdPrimaryColor);
170180
border-right: 2px solid var(--mdPrimaryColor);
171181
border-top: 2px solid var(--mdPrimaryColor);
182+
padding-bottom: calc(1em - 1px);
183+
}
184+
.md-autocomplete--open.md-autocomplete--small .md-autocomplete__input {
185+
padding-bottom: calc(0.75em - 1px);
172186
}
173187

174188
.md-autocomplete--open .md-autocomplete__dropdown {
@@ -179,6 +193,7 @@
179193
border-right: 2px solid var(--mdPrimaryColor);
180194
border-left: 2px solid var(--mdPrimaryColor);
181195
border-bottom: 2px solid var(--mdPrimaryColor);
196+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
182197
z-index: 2;
183198
}
184199

‎packages/css/src/formElements/multiselect/multiselect.css

+43-8
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
display: flex;
1616
align-items: flex-end;
1717
font-weight: 600;
18+
padding-bottom: 0.25em;
1819
}
1920

2021
.md-multiselect__label > * + * {
@@ -36,6 +37,10 @@
3637
cursor: pointer;
3738
}
3839

40+
.md-multiselect__button.md-multiselect--small {
41+
padding: 0.75em;
42+
}
43+
3944
.md-multiselect--disabled .md-multiselect__button {
4045
background-color: var(--mdGreyColor20);
4146
color: var(--mdGreyColor60);
@@ -46,11 +51,18 @@
4651
.md-multiselect__button:focus-within {
4752
outline: none;
4853
}
54+
.md-multiselect:not(.md-multiselect--disabled)
55+
.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
56+
.md-multiselect:not(.md-multiselect--disabled)
57+
.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
58+
padding: calc(0.75em - 1px);
59+
border: 2px solid var(--mdPrimaryColor80);
60+
}
4961

5062
.md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus,
5163
.md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
5264
padding: calc(1em - 1px);
53-
border: 2px solid var(--mdPrimaryColor);
65+
border: 2px solid var(--mdPrimaryColor80);
5466
}
5567

5668
.md-multiselect--error:not(.md-multiselect--disabled) .md-multiselect__button {
@@ -93,7 +105,6 @@
93105

94106
.md-multiselect__dropdown-wrapper {
95107
position: relative;
96-
margin: 0.7em 0 0 0;
97108
}
98109

99110
.md-multiselect__dropdown {
@@ -127,13 +138,22 @@
127138
display: flex;
128139
flex-shrink: 0;
129140
flex-grow: 1;
130-
padding: 0.9em;
141+
padding: 0.75em;
131142
}
132143

133144
.md-multiselect__dropdown-item .md-checkbox .md-checkbox__label .md-checkbox__labelText {
134145
padding: 0;
135146
}
136147

148+
.md-multiselect__dropdown-item .md-checkbox__labelText {
149+
font-family: 'Open Sans';
150+
font-size: 16px;
151+
font-style: normal;
152+
font-weight: 400;
153+
line-height: 22px;
154+
color: var(--mdGreyColor);
155+
}
156+
137157
.md-multiselect__dropdown-item:hover,
138158
.md-multiselect__dropdown-item:focus,
139159
.md-multiselect__dropdown-item:focus-within {
@@ -191,24 +211,39 @@
191211

192212
/* Open state */
193213
.md-multiselect--open .md-multiselect__button {
194-
border-top: 2px solid var(--mdPrimaryColor);
195-
border-right: 2px solid var(--mdPrimaryColor);
196-
border-left: 2px solid var(--mdPrimaryColor);
214+
border-top: 2px solid var(--mdPrimaryColor80);
215+
border-right: 2px solid var(--mdPrimaryColor80);
216+
border-left: 2px solid var(--mdPrimaryColor80);
197217
padding: calc(1em - 1px);
198218
padding-bottom: 1em;
199219
}
200220

221+
.md-multiselect--open .md-multiselect__button.md-multiselect--small {
222+
border-top: 2px solid var(--mdPrimaryColor80);
223+
border-right: 2px solid var(--mdPrimaryColor80);
224+
border-left: 2px solid var(--mdPrimaryColor80);
225+
padding: calc(0.75em - 1px);
226+
padding-bottom: 0.75em;
227+
}
228+
201229
.md-multiselect__button:not(.md-multiselect__button--open):focus,
202230
.md-multiselect__button:not(.md-multiselect__button--open):focus-within {
203231
padding: calc(1em - 1px);
204-
border: 2px solid var(--mdPrimaryColor);
232+
border: 2px solid var(--mdPrimaryColor80);
233+
}
234+
235+
.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
236+
.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
237+
padding: calc(0.75em - 1px);
238+
border: 2px solid var(--mdPrimaryColor80);
205239
}
206240

207241
.md-multiselect__dropdown--open {
208242
max-height: 350px;
209243
overflow-y: auto;
210244
opacity: 1;
211-
border: 2px solid var(--mdPrimaryColor);
245+
border: 2px solid var(--mdPrimaryColor80);
246+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
212247
border-top: 0;
213248
}
214249
.md-multiselect--open.md-multiselect--error .md-multiselect__dropdown {

‎packages/css/src/formElements/select/select.css

+14-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
display: flex;
2020
align-items: flex-end;
2121
font-weight: 600;
22+
padding-bottom: 0.25em;
2223
}
2324

2425
.md-select__label > * + * {
@@ -36,7 +37,6 @@
3637
padding: 1em;
3738
border: 1px solid var(--mdGreyColor60);
3839
color: var(--mdGreyColor);
39-
margin: 0.8em 0 0 0;
4040
text-align: left;
4141
cursor: pointer;
4242
}
@@ -45,6 +45,17 @@
4545
border-color: var(--mdErrorColor);
4646
}
4747

48+
.md-select__button.md-select__button--small {
49+
padding: 0.75em;
50+
}
51+
52+
.md-select__button:not(.md-select__button--open):focus.md-select__button--small {
53+
padding: calc(0.75em - 1px);
54+
}
55+
.md-select__button.md-select__button--open.md-select__button--small {
56+
padding: calc(0.75em - 1px);
57+
}
58+
4859
.md-select--disabled .md-select__button {
4960
background-color: var(--mdGreyColor20);
5061
color: var(--mdGreyColor60);
@@ -106,6 +117,7 @@
106117

107118
.md-select__dropdown-item {
108119
display: flex;
120+
align-items: center;
109121
font-family: 'Open sans';
110122
border: 0;
111123
background-color: #fff;
@@ -158,6 +170,7 @@
158170
opacity: 1;
159171
transition: max-height 0.5s ease-in-out;
160172
border: 2px solid var(--mdPrimaryColor);
173+
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
161174
border-top: 0;
162175
z-index: 2;
163176
}

‎packages/react/src/formElements/MdAutocomplete.tsx

+24-20
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface MdAutocompleteProps {
2828
error?: boolean;
2929
errorText?: string;
3030
prefixIcon?: React.ReactNode;
31+
dropdownHeight?: number;
3132
}
3233

3334
const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
@@ -46,6 +47,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
4647
errorText,
4748
prefixIcon = null,
4849
onChange,
50+
dropdownHeight,
4951
...otherProps
5052
},
5153
ref,
@@ -71,6 +73,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
7173
'md-autocomplete__input--open': !!open,
7274
'md-autocomplete__input--error': !!error,
7375
'md-autocomplete__input--has-prefix': prefixIcon !== null && prefixIcon !== '',
76+
'md-autocomplete--small': size === 'small',
7477
});
7578

7679
const selectedOption =
@@ -107,27 +110,27 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
107110

108111
return (
109112
<div className={classNames}>
110-
<div className="md-autocomplete__label">
111-
{label && label !== '' && (
113+
{label && label !== '' && (
114+
<div className="md-autocomplete__label">
112115
<label id={`md-autocomplete_label_${autocompleteId}`} htmlFor={autocompleteId}>
113116
{label}
114117
</label>
115-
)}
116-
{helpText && helpText !== '' && (
117-
<div className="md-autocomplete__help-button">
118-
<MdHelpButton
119-
ariaLabel={`Hjelpetekst for ${label}`}
120-
id={`md-autocomplete_help-button_${autocompleteId}`}
121-
aria-expanded={helpOpen}
122-
aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
123-
onClick={() => {
124-
return setHelpOpen(!helpOpen);
125-
}}
126-
expanded={helpOpen}
127-
/>
128-
</div>
129-
)}
130-
</div>
118+
{helpText && helpText !== '' && (
119+
<div className="md-autocomplete__help-button">
120+
<MdHelpButton
121+
ariaLabel={`Hjelpetekst for ${label}`}
122+
id={`md-autocomplete_help-button_${autocompleteId}`}
123+
aria-expanded={helpOpen}
124+
aria-controls={`md-autocomplete_help-text_${autocompleteId}`}
125+
onClick={() => {
126+
return setHelpOpen(!helpOpen);
127+
}}
128+
expanded={helpOpen}
129+
/>
130+
</div>
131+
)}
132+
</div>
133+
)}
131134

132135
{helpText && helpText !== '' && (
133136
<div className={`md-autocomplete__help-text ${helpOpen ? 'md-autocomplete__help-text--open' : ''}`}>
@@ -147,7 +150,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
147150
onClickOutside={() => {
148151
return setOpen(false);
149152
}}
150-
className="md-autocomplete__container"
153+
className={`md-autocomplete__container ${size === 'small' ? 'md-autocomplete--small' : ''}`}
151154
>
152155
{prefixIcon && (
153156
<div
@@ -194,7 +197,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
194197
{...otherProps}
195198
/>
196199
<div aria-hidden="true" className="md-autocomplete__input-icon">
197-
<MdChevronIcon />
200+
<MdChevronIcon transform={`rotate(${open ? '180' : '0'})`} />
198201
</div>
199202

200203
{options && options.length > 0 && (
@@ -203,6 +206,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
203206
role="listbox"
204207
id={`md-autocomplete__dropdown_${autocompleteId}`}
205208
className="md-autocomplete__dropdown"
209+
style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }}
206210
>
207211
{(autocompleteValue ? results : defaultOptions ? defaultOptions : options ? options : []).map(option => {
208212
return (

0 commit comments

Comments
 (0)