Skip to content

Commit 65ad45e

Browse files
pat270pat270
committed
fix(@clayui/css): Mixins clay-select-variant update to use clay-css pattern, also deprecated keys should win over new keys
fix(@clayui/css): Update Sass maps that use `clay-select-variant` to use new keys: `$date-picker-nav-select` and `$input-select`
1 parent 45ec160 commit 65ad45e

File tree

4 files changed

+104
-38
lines changed

4 files changed

+104
-38
lines changed

‎packages/clay-css/src/scss/atlas/variables/_date-picker.scss

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $date-picker-nav-btn: map-deep-merge(
2626
$date-picker-nav-select: () !default;
2727
$date-picker-nav-select: map-deep-merge(
2828
(
29-
bg: transparent,
29+
background-color: transparent,
3030
border-color: transparent,
3131
color: $secondary,
3232
font-size: $font-size-sm,
@@ -35,12 +35,18 @@ $date-picker-nav-select: map-deep-merge(
3535
padding-bottom: 0,
3636
padding-left: 0.5rem,
3737
padding-top: 0,
38-
hover-bg: $gray-200,
39-
hover-color: $gray-900,
40-
focus-bg: $gray-200,
41-
focus-color: $gray-900,
42-
disabled-bg: transparent,
43-
disabled-color: $input-disabled-color,
38+
hover: (
39+
background-color: $gray-200,
40+
color: $gray-900,
41+
),
42+
focus: (
43+
background-color: $gray-200,
44+
color: $gray-900,
45+
),
46+
disabled: (
47+
background-color: transparent,
48+
color: $input-disabled-color,
49+
),
4450
),
4551
$date-picker-nav-select
4652
);

‎packages/clay-css/src/scss/mixins/_forms.scss

Lines changed: 88 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@
536536

537537
$base: setter($map, ());
538538
$base: map-merge(
539-
$map,
539+
$base,
540540
(
541541
background-color:
542542
setter(map-get($map, bg), map-get($map, background-color)),
@@ -568,48 +568,109 @@
568568
)
569569
);
570570

571+
$hover: setter(map-get($map, hover), ());
571572
$hover: map-deep-merge(
573+
$hover,
572574
(
573-
background-color: map-get($map, hover-bg),
574-
border-color: map-get($map, hover-border-color),
575-
box-shadow: map-get($map, hover-box-shadow),
576-
color: map-get($map, hover-color),
577-
),
578-
map-get($map, hover)
575+
background-color:
576+
setter(
577+
map-get($map, hover-bg),
578+
map-get($hover, background-color)
579+
),
580+
border-color:
581+
setter(
582+
map-get($map, hover-border-color),
583+
map-get($hover, border-color)
584+
),
585+
box-shadow:
586+
setter(
587+
map-get($map, hover-box-shadow),
588+
map-get($hover, box-shadow)
589+
),
590+
color: setter(map-get($map, hover-color), map-get($hover, color)),
591+
)
579592
);
580593

594+
$focus: setter(map-get($map, focus), ());
581595
$focus: map-deep-merge(
596+
$focus,
582597
(
583-
background-color: map-get($map, focus-bg),
584-
background-image: map-get($map, focus-bg-image),
585-
border-color: map-get($map, focus-border-color),
586-
box-shadow: map-get($map, focus-box-shadow),
587-
color: map-get($map, focus-color),
588-
),
589-
map-get($map, focus)
598+
background-color:
599+
setter(
600+
map-get($map, focus-bg),
601+
map-get($focus, background-color)
602+
),
603+
background-image:
604+
setter(
605+
map-get($map, focus-bg-image),
606+
map-get($focus, background-image)
607+
),
608+
border-color:
609+
setter(
610+
map-get($map, focus-border-color),
611+
map-get($focus, border-color)
612+
),
613+
box-shadow:
614+
setter(
615+
map-get($map, focus-box-shadow),
616+
map-get($focus, box-shadow)
617+
),
618+
color: setter(map-get($map, focus-color), map-get($focus, color)),
619+
)
590620
);
591621

622+
$disabled: setter(map-get($map, disabled), ());
592623
$disabled: map-deep-merge(
624+
$disabled,
593625
(
594-
background-color: map-get($map, disabled-bg),
595-
background-image: map-get($map, disabled-bg-image),
596-
border-color: map-get($map, disabled-border-color),
597-
box-shadow: map-get($map, disabled-box-shadow),
598-
color: map-get($map, disabled-color),
599-
cursor: map-get($map, disabled-cursor),
600-
opacity: map-get($map, disabled-opacity),
601-
),
602-
map-get($map, disabled)
626+
background-color:
627+
setter(
628+
map-get($map, disabled-bg),
629+
map-get($disabled, background-color)
630+
),
631+
background-image:
632+
setter(
633+
map-get($map, disabled-bg-image),
634+
map-get($disabled, background-image)
635+
),
636+
border-color:
637+
setter(
638+
map-get($map, disabled-border-color),
639+
map-get($disabled, border-color)
640+
),
641+
box-shadow:
642+
setter(
643+
map-get($map, disabled-box-shadow),
644+
map-get($disabled, box-shadow)
645+
),
646+
color:
647+
setter(map-get($map, disabled-color), map-get($disabled, color)),
648+
cursor:
649+
setter(
650+
map-get($map, disabled-cursor),
651+
map-get($disabled, cursor)
652+
),
653+
opacity:
654+
setter(
655+
map-get($map, disabled-opacity),
656+
map-get($disabled, opacity)
657+
),
658+
)
603659
);
604660

661+
$disabled-option: setter(map-get($disabled, option), ());
605662
$disabled-option: map-deep-merge(
663+
$disabled-option,
606664
(
607-
color: map-get($map, disabled-color),
608-
),
609-
map-get($map, disabled-option)
665+
color:
666+
setter(
667+
map-get($map, disabled-color),
668+
map-get($disabled-option, color)
669+
),
670+
)
610671
);
611672

612-
$option: map-deep-merge((), map-get($map, option));
673+
$option: setter(map-get($map, option), ());
613674

614675
@if ($enabled) {
615676
@include clay-css($base);

‎packages/clay-css/src/scss/variables/_date-picker.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ $date-picker-nav-btn-monospaced: map-deep-merge(
5151
);
5252

5353
$date-picker-nav-select: () !default;
54-
$date-picker-nav-select: map-deep-merge((), $date-picker-nav-select);
5554

5655
// Date Picker Row
5756

‎packages/clay-css/src/scss/variables/_forms.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -575,9 +575,9 @@ $input-select: map-deep-merge(
575575
),
576576
disabled: (
577577
background-image: $input-select-icon-disabled,
578-
),
579-
disabled-option: (
580-
cursor: $disabled-cursor,
578+
option: (
579+
cursor: $disabled-cursor,
580+
),
581581
),
582582
option: (
583583
cursor: $input-select-cursor,

0 commit comments

Comments
 (0)