Skip to content

Commit 5498c33

Browse files
iOvergaardiOvergaard
authored
Merge branch 'v1/contrib' into v1/bugfix/table-cell-padding
2 parents e45268b + ea80215 commit 5498c33

File tree

9 files changed

+52
-30
lines changed

9 files changed

+52
-30
lines changed

‎packages/uui-icon/lib/uui-icon.element.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ export class UUIIconElement extends LitElement {
149149
:host svg,
150150
::slotted(svg) {
151151
color: var(--uui-icon-color, currentColor);
152+
width: 100%;
152153
}
153154
154155
:host-context(div[slot='prepend']) {

‎packages/uui-icon/lib/uui-icon.test.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,5 +224,13 @@ describe('UUIIconElement', () => {
224224
it('Child uui-icon passes the a11y audit', async () => {
225225
await expect(testElement.iconElement).shadowDom.to.be.accessible();
226226
});
227+
228+
it('svg has a size of 18px for both width and height', () => {
229+
const svgElement =
230+
testElement.iconElement.shadowRoot!.querySelector('svg')!;
231+
const computedStyle = getComputedStyle(svgElement);
232+
expect(computedStyle.width).to.equal('18px');
233+
expect(computedStyle.height).to.equal('18px');
234+
});
227235
});
228236
});

‎packages/uui-input/lib/uui-input.element.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ export class UUIInputElement extends UUIFormControlMixin(
348348
);
349349
border: var(--uui-input-border-width, 1px) solid
350350
var(--uui-input-border-color, var(--uui-color-border));
351+
border-radius: var(--uui-border-radius);
351352
352353
--uui-button-height: 100%;
353354
--auto-width-text-margin-right: 0;
@@ -439,7 +440,7 @@ export class UUIInputElement extends UUIFormControlMixin(
439440
padding: var(--uui-size-1) var(--uui-size-space-3);
440441
font-size: inherit;
441442
color: inherit;
442-
border-radius: 0;
443+
border-radius: var(--uui-border-radius);
443444
box-sizing: border-box;
444445
border: none;
445446
background: none;

‎packages/uui-input/lib/uui-input.story.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const meta: Meta = {
3030
'datetime-local',
3131
'number',
3232
'color',
33-
'wha',
3433
],
3534
},
3635
},

‎packages/uui-select/lib/uui-select.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
286286
var(--uui-select-padding-x, var(--uui-size-2));
287287
color: var(--uui-select-text-color, var(--uui-color-text));
288288
box-sizing: border-box;
289-
border-radius: 0;
289+
border-radius: var(--uui-border-radius);
290290
border: 1px solid
291291
var(--uui-select-border-color, var(--uui-color-border));
292292
transition: all 150ms ease;

‎packages/uui-tabs/lib/uui-tab-group.element.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,6 @@ export class UUITabGroupElement extends LitElement {
7777
demandCustomElement(this, 'uui-popover-container');
7878
demandCustomElement(this, 'uui-symbol-more');
7979

80-
if (!this.hasAttribute('role')) this.setAttribute('role', 'tablist');
81-
8280
await this.updateComplete;
8381
this.#resizeObserver.observe(this._mainElement);
8482
}
@@ -268,7 +266,7 @@ export class UUITabGroupElement extends LitElement {
268266
render() {
269267
return html`
270268
<div id="main">
271-
<div id="grid">
269+
<div id="grid" role="tablist">
272270
<slot @slotchange=${this.#onSlotChange}></slot>
273271
</div>
274272
<uui-button
@@ -284,7 +282,7 @@ export class UUITabGroupElement extends LitElement {
284282
id="popover-container"
285283
popover
286284
placement="bottom-end">
287-
<div id="hidden-tabs-container">
285+
<div id="hidden-tabs-container" role="tablist">
288286
${repeat(this.#hiddenTabElements, el => html`${el}`)}
289287
</div>
290288
</uui-popover-container>

‎packages/uui-tabs/lib/uui-tabs.test.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,21 @@ describe('UuiTab', () => {
1717
<uui-tab label="Content">Content</uui-tab>
1818
<uui-tab label="Packages">Packages</uui-tab>
1919
<uui-tab label="Media" active>Media</uui-tab>
20+
<uui-tab label="Content1">Content to force a more button</uui-tab>
21+
<uui-tab label="Content2">Content to force a more button</uui-tab>
22+
<uui-tab label="Content3">Content to force a more button</uui-tab>
23+
<uui-tab label="Content4">Content to force a more button</uui-tab>
24+
<uui-tab label="Content5">Content to force a more button</uui-tab>
25+
<uui-tab label="Content6">Content to force a more button</uui-tab>
26+
<uui-tab label="Content7">Content to force a more button</uui-tab>
27+
<uui-tab label="Content8">Content to force a more button</uui-tab>
28+
<uui-tab label="Content9">Content to force a more button</uui-tab>
29+
<uui-tab label="Content10">Content to force a more button</uui-tab>
30+
<uui-tab label="Content11">Content to force a more button</uui-tab>
31+
<uui-tab label="Content12">Content to force a more button</uui-tab>
32+
<uui-tab label="Content13">Content to force a more button</uui-tab>
33+
<uui-tab label="Content14">Content to force a more button</uui-tab>
34+
<uui-tab label="Content15">Content to force a more button</uui-tab>
2035
</uui-tab-group>
2136
`);
2237

‎packages/uui-textarea/lib/uui-textarea.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
330330
padding: var(--uui-size-2);
331331
border: 1px solid
332332
var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */
333-
border-radius: 0;
333+
border-radius: var(--uui-border-radius);
334334
outline: none;
335335
min-height: var(--uui-textarea-min-height);
336336
max-height: var(--uui-textarea-max-height);

‎packages/uui-toggle/lib/uui-toggle.element.ts‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
3838

3939
renderCheckbox() {
4040
return html`
41-
<div id="slider">
41+
<div id="toggle">
4242
<div id="icon-checked">${iconCheck}</div>
4343
<div id="icon-unchecked">${iconRemove}</div>
4444
</div>
@@ -54,7 +54,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
5454
--uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));
5555
}
5656
57-
#slider {
57+
#toggle {
5858
position: relative;
5959
grid-area: 'input';
6060
display: flex;
@@ -75,7 +75,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
7575
font-size: calc(var(--uui-toggle-size) * 0.6);
7676
}
7777
78-
label:hover input:not([disabled]) ~ #slider {
78+
label:hover input:not([disabled]) ~ #toggle {
7979
border-color: var(
8080
--uui-toggle-border-color-hover,
8181
var(--uui-color-border-emphasis)
@@ -86,7 +86,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
8686
);
8787
}
8888
89-
label:focus #slider {
89+
label:focus #toggle {
9090
border-color: var(
9191
--uui-toggle-border-color-focus,
9292
var(--uui-color-focus)
@@ -97,15 +97,15 @@ export class UUIToggleElement extends UUIBooleanInputElement {
9797
);
9898
}
9999
100-
input:checked ~ #slider {
100+
input:checked ~ #toggle {
101101
background-color: var(--uui-color-selected);
102102
}
103103
104-
label:hover input:checked:not([disabled]) ~ #slider {
104+
label:hover input:checked:not([disabled]) ~ #toggle {
105105
background-color: var(--uui-color-selected-emphasis);
106106
}
107107
108-
label:focus input:checked ~ #slider {
108+
label:focus input:checked ~ #toggle {
109109
background-color: var(--uui-color-selected-emphasis);
110110
}
111111
@@ -131,11 +131,11 @@ export class UUIToggleElement extends UUIBooleanInputElement {
131131
color: var(--uui-color-interactive);
132132
}
133133
134-
input:checked ~ #slider #icon-checked {
134+
input:checked ~ #toggle #icon-checked {
135135
color: var(--uui-color-selected-contrast);
136136
}
137137
138-
#slider::after {
138+
#toggle::after {
139139
content: '';
140140
position: absolute;
141141
top: 2px;
@@ -151,45 +151,45 @@ export class UUIToggleElement extends UUIBooleanInputElement {
151151
background-color 120ms;
152152
}
153153
154-
input:checked ~ #slider::after {
154+
input:checked ~ #toggle::after {
155155
left: calc(100% - 2px);
156156
transform: translateX(-100%);
157157
}
158158
159-
input:focus ~ #slider {
159+
input:focus ~ #toggle {
160160
outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
161161
var(--uui-color-focus);
162162
}
163163
164-
:host(:not([disabled], [readonly])) label:active #slider::after {
164+
:host(:not([disabled], [readonly])) label:active #toggle::after {
165165
/** Stretch when mouse down */
166166
width: calc(1.06 * var(--uui-toggle-size));
167167
}
168168
169-
:host([disabled]) #slider {
169+
:host([disabled]) #toggle {
170170
background-color: var(--uui-color-disabled-standalone);
171171
}
172-
:host([disabled]) input:checked ~ #slider {
172+
:host([disabled]) input:checked ~ #toggle {
173173
background-color: var(--uui-color-disabled-contrast);
174174
}
175-
:host([disabled]) #slider::after {
175+
:host([disabled]) #toggle::after {
176176
background-color: var(--uui-color-disabled);
177177
}
178-
:host([disabled]) #slider #icon-unchecked {
178+
:host([disabled]) #toggle #icon-unchecked {
179179
color: var(--uui-color-disabled-contrast);
180180
}
181-
:host([disabled]) label:active #slider {
181+
:host([disabled]) label:active #toggle {
182182
animation: ${UUIHorizontalShakeAnimationValue};
183183
}
184-
:host([disabled]) input:checked #slider #icon-checked {
184+
:host([disabled]) input:checked #toggle #icon-checked {
185185
color: var(--uui-color-disabled-contrast);
186186
}
187187
188-
:host(:not([pristine]):invalid) #slider,
189-
:host(:not([pristine]):invalid) label:hover #slider,
188+
:host(:not([pristine]):invalid) #toggle,
189+
:host(:not([pristine]):invalid) label:hover #toggle,
190190
/* polyfill support */
191-
:host(:not([pristine])[internals-invalid]) #slider,
192-
:host(:not([pristine])[internals-invalid]) label:hover #slider {
191+
:host(:not([pristine])[internals-invalid]) #toggle,
192+
:host(:not([pristine])[internals-invalid]) label:hover #toggle {
193193
border: 1px solid var(--uui-color-danger-standalone);
194194
}
195195
`,

0 commit comments

Comments
 (0)