Skip to content

Commit 6544a3b

Browse files
tw15egankodiakhq[bot]
tw15egan
and
kodiakhq[bot]
authored
feat(React): updates to size prop (#8160)
* feat(Accordion): update size prop names * feat(ListBox): update size prop for Listbox components * test(snapshot): update snapshot tests * feat(DatePicker): update size prop names * feat(link): update story, add md to size * feat(Modal): update size props * feat(NumberInput): update size prop * feat(OverflowMenu): update size prop * feat(Select): update size prop * feat(Inputs): update size props * test(snapshot): update snapshot tests Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 3f7cbc1 commit 6544a3b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+200
-102
lines changed

‎packages/components/src/components/accordion/_accordion.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@
7373
}
7474

7575
// Size styles
76-
.#{$prefix}--accordion--xl .#{$prefix}--accordion__heading {
76+
// TODO V11: Remove xl selector
77+
.#{$prefix}--accordion--xl .#{$prefix}--accordion__heading,
78+
.#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
7779
min-height: rem(48px);
7880
}
7981

‎packages/components/src/components/content-switcher/_content-switcher.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@
2626
height: rem(32px);
2727
}
2828

29-
.#{$prefix}--content-switcher--xl {
29+
// TODO V11: Remove xl selector
30+
.#{$prefix}--content-switcher--xl,
31+
.#{$prefix}--content-switcher--lg {
3032
height: rem(48px);
3133
}
3234

‎packages/components/src/components/date-picker/_date-picker.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,9 @@
118118
}
119119

120120
// Size variant styles
121-
.#{$prefix}--date-picker__input--xl {
121+
// TODO V11: Remove xl selector
122+
.#{$prefix}--date-picker__input--xl,
123+
.#{$prefix}--date-picker__input--lg {
122124
height: rem(48px);
123125
}
124126

‎packages/components/src/components/dropdown/_dropdown.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,16 @@
7575
}
7676
}
7777

78-
.#{$prefix}--dropdown--xl {
78+
// TODO V11: Remove xl selector
79+
.#{$prefix}--dropdown--xl,
80+
.#{$prefix}--dropdown--lg {
7981
height: rem(48px);
8082
max-height: rem(48px);
8183
}
8284

83-
.#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow {
85+
// TODO V11: Remove xl selector
86+
.#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow,
87+
.#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
8488
top: rem(16px);
8589
}
8690

‎packages/components/src/components/list-box/_list-box.scss‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@ $list-box-menu-width: rem(300px);
8787
}
8888
}
8989

90-
.#{$prefix}--list-box--xl {
90+
// TODO V11: Remove xl selector
91+
.#{$prefix}--list-box--xl,
92+
.#{$prefix}--list-box--lg {
9193
height: rem(48px);
9294
max-height: rem(48px);
9395
}
@@ -572,7 +574,10 @@ $list-box-menu-width: rem(300px);
572574
max-height: rem(220px);
573575
}
574576

577+
// TODO V11: Remove xl selector
575578
.#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
579+
.#{$prefix}--list-box__menu,
580+
.#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
576581
.#{$prefix}--list-box__menu {
577582
// 48px item height * 5.5 items shown
578583
max-height: rem(264px);
@@ -613,7 +618,9 @@ $list-box-menu-width: rem(300px);
613618
height: rem(32px);
614619
}
615620

616-
.#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item {
621+
// TODO V11: Remove xl selector
622+
.#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
623+
.#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
617624
height: rem(48px);
618625
}
619626

@@ -702,7 +709,9 @@ $list-box-menu-width: rem(300px);
702709
padding-bottom: rem(7px);
703710
}
704711

705-
.#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option {
712+
// TODO V11: Remove xl selector
713+
.#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
714+
.#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
706715
height: rem(48px);
707716
padding-top: rem(15px);
708717
padding-bottom: rem(15px);
@@ -823,9 +832,14 @@ $list-box-menu-width: rem(300px);
823832
bottom: 2rem;
824833
}
825834

835+
// TODO V11: Remove xl selector
826836
.#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
827837
.#{$prefix}--list-box__menu,
828838
.#{$prefix}--list-box--up.#{$prefix}--list-box--xl
839+
.#{$prefix}--list-box__menu,
840+
.#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
841+
.#{$prefix}--list-box__menu,
842+
.#{$prefix}--list-box--up.#{$prefix}--list-box--lg
829843
.#{$prefix}--list-box__menu {
830844
bottom: 3rem;
831845
}

‎packages/components/src/components/number-input/_number-input.scss‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@
7373
}
7474
}
7575

76-
.#{$prefix}--number--xl.#{$prefix}--number input[type='number'] {
76+
// TODO V11: Remove xl selector
77+
.#{$prefix}--number--xl.#{$prefix}--number input[type='number'],
78+
.#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
7779
padding-right: rem(144px);
7880
}
7981

@@ -311,7 +313,9 @@
311313
fill: $support-error;
312314
}
313315

314-
.#{$prefix}--number--xl .#{$prefix}--number__invalid {
316+
// TODO V11: Remove xl selector
317+
.#{$prefix}--number--xl .#{$prefix}--number__invalid,
318+
.#{$prefix}--number--lg .#{$prefix}--number__invalid {
315319
right: rem(112px);
316320
}
317321

@@ -324,7 +328,11 @@
324328
right: rem(80px);
325329
}
326330

331+
// TODO V11: Remove xl selector
327332
.#{$prefix}--number--xl
333+
.#{$prefix}--number__invalid
334+
+ .#{$prefix}--number__rule-divider,
335+
.#{$prefix}--number--lg
328336
.#{$prefix}--number__invalid
329337
+ .#{$prefix}--number__rule-divider {
330338
right: rem(96px);
@@ -388,15 +396,21 @@
388396
}
389397

390398
// Size Variant styles
391-
.#{$prefix}--number--xl input[type='number'] {
399+
// TODO V11: Remove xl selector
400+
.#{$prefix}--number--xl input[type='number'],
401+
.#{$prefix}--number--lg input[type='number'] {
392402
height: rem(48px);
393403
}
394404

395-
.#{$prefix}--number--xl .#{$prefix}--number__controls {
405+
// TODO V11: Remove xl selector
406+
.#{$prefix}--number--xl .#{$prefix}--number__controls,
407+
.#{$prefix}--number--lg .#{$prefix}--number__controls {
396408
width: rem(96px);
397409
}
398410

399-
.#{$prefix}--number--xl .#{$prefix}--number__control-btn {
411+
// TODO V11: Remove xl selector
412+
.#{$prefix}--number--xl .#{$prefix}--number__control-btn,
413+
.#{$prefix}--number--lg .#{$prefix}--number__control-btn {
400414
width: rem(48px);
401415

402416
&::before,

‎packages/components/src/components/overflow-menu/_overflow-menu.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@
5151
height: rem(32px);
5252
}
5353

54-
.#{$prefix}--overflow-menu--xl {
54+
// TODO V11: Remove xl selector
55+
.#{$prefix}--overflow-menu--xl,
56+
.#{$prefix}--overflow-menu--lg {
5557
width: rem(48px);
5658
height: rem(48px);
5759
}
@@ -172,7 +174,9 @@
172174
}
173175
}
174176

175-
.#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options {
177+
// TODO V11: Remove xl selector
178+
.#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options,
179+
.#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
176180
&[data-floating-menu-direction='bottom']::after,
177181
&[data-floating-menu-direction='top']::after {
178182
width: rem(48px);
@@ -220,7 +224,10 @@
220224
height: rem(32px);
221225
}
222226

227+
// TODO V11: Remove xl selector
223228
.#{$prefix}--overflow-menu-options--xl
229+
.#{$prefix}--overflow-menu-options__option,
230+
.#{$prefix}--overflow-menu-options--lg
224231
.#{$prefix}--overflow-menu-options__option {
225232
height: rem(48px);
226233
}

‎packages/components/src/components/select/_select.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,9 @@
9898
max-height: rem(32px);
9999
}
100100

101-
.#{$prefix}--select-input--xl {
101+
// TODO V11: Remove xl selector
102+
.#{$prefix}--select-input--xl,
103+
.#{$prefix}--select-input--lg {
102104
height: rem(48px);
103105
max-height: rem(48px);
104106
}

‎packages/components/src/components/text-input/_text-input.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@
4545
}
4646
}
4747

48-
.#{$prefix}--text-input--xl {
48+
// TODO V11: Remove xl selector
49+
.#{$prefix}--text-input--xl,
50+
.#{$prefix}--text-input--lg {
4951
height: rem(48px);
5052
}
5153

@@ -315,7 +317,9 @@
315317
margin-top: rem(9px);
316318
}
317319

318-
.#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--xl {
320+
// TODO V11: Remove xl selector
321+
.#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--xl,
322+
.#{$prefix}--text-input-wrapper .#{$prefix}--label--inline--lg {
319323
margin-top: rem(17px);
320324
}
321325

‎packages/components/src/components/time-picker/_time-picker.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,11 @@
8383
max-height: rem(32px);
8484
}
8585

86+
// TODO V11: Remove xl selector
8687
.#{$prefix}--time-picker--xl .#{$prefix}--select-input,
87-
.#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field {
88+
.#{$prefix}--time-picker--xl .#{$prefix}--time-picker__input-field,
89+
.#{$prefix}--time-picker--lg .#{$prefix}--select-input,
90+
.#{$prefix}--time-picker--lg .#{$prefix}--time-picker__input-field {
8891
height: rem(48px);
8992
max-height: rem(48px);
9093
}

0 commit comments

Comments
 (0)