From 6ace393fd30661ff8c0632f9d9ea2c7926be3c06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Tue, 15 Aug 2023 12:36:42 -0500 Subject: [PATCH 1/9] feat(@clayui/css): modifies DatePicker size to new default of 352px --- packages/clay-css/src/scss/_license-text.scss | 2 +- .../scss/atlas/variables/_date-picker.scss | 2 +- .../scss/cadmin/variables/_date-picker.scss | 22 ++++++++++--------- .../src/scss/components/_date-picker.scss | 4 ++-- .../src/scss/variables/_date-picker.scss | 18 ++++++++------- packages/clay-date-picker/src/index.tsx | 2 +- packages/clay-time-picker/src/index.tsx | 2 +- 7 files changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/clay-css/src/scss/_license-text.scss b/packages/clay-css/src/scss/_license-text.scss index 698bd67934..2245f9cd59 100644 --- a/packages/clay-css/src/scss/_license-text.scss +++ b/packages/clay-css/src/scss/_license-text.scss @@ -1,5 +1,5 @@ /** - * Clay 3.95.0 + * Clay 3.102.0 * * SPDX-FileCopyrightText: © 2020 Liferay, Inc. * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay diff --git a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss index 8aa5176697..39eb7f51cc 100644 --- a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss @@ -3,7 +3,7 @@ $date-picker-dropdown-menu: () !default; $date-picker-dropdown-menu: map-deep-merge( ( - max-width: 368px, + max-width: 352px, ), $date-picker-dropdown-menu ); diff --git a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss index 89dc10ff7c..06edc2620a 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss @@ -4,7 +4,7 @@ $cadmin-date-picker-dropdown-menu: () !default; $cadmin-date-picker-dropdown-menu: map-deep-merge( ( max-height: none, - max-width: 368px, + max-width: 352px, padding-bottom: 0, padding-left: 0, padding-right: 0, @@ -20,8 +20,8 @@ $cadmin-date-picker-nav-row: () !default; $cadmin-date-picker-nav-row: map-deep-merge( ( display: flex, - margin-left: -4px, - margin-right: -4px, + margin-left: -0.125rem, + margin-right: -0.125rem, ), $cadmin-date-picker-nav-row ); @@ -56,6 +56,8 @@ $cadmin-date-picker-nav-btn-monospaced: () !default; $cadmin-date-picker-nav-btn-monospaced: map-deep-merge( ( margin-bottom: 0, + margin-left: 0.125rem, + margin-right: 0.125rem, margin-top: 0, ), $cadmin-date-picker-nav-btn-monospaced @@ -180,9 +182,9 @@ $cadmin-date-picker-calendar-header-container: map-merge( $cadmin-date-picker-calendar-body-container: () !default; $cadmin-date-picker-calendar-body-container: map-merge( ( - padding-left: 16px, - padding-right: 16px, - padding-bottom: 8px, + padding-left: 0.5rem, + padding-right: 0.5rem, + padding-bottom: 0.5rem, ), $cadmin-date-picker-calendar-body-container ); @@ -193,10 +195,10 @@ $cadmin-date-picker-calendar-footer-container: map-merge( border-color: $cadmin-gray-400, border-style: solid, border-width: 1px 0 0 0, - padding-bottom: 16px, - padding-left: 24px, - padding-right: 24px, - padding-top: 16px, + padding-bottom: 0.5rem, + padding-left: 0.875rem, + padding-right: 0.875rem, + padding-top: 0.5rem, ), $cadmin-date-picker-calendar-footer-container ); diff --git a/packages/clay-css/src/scss/components/_date-picker.scss b/packages/clay-css/src/scss/components/_date-picker.scss index ea97f6a119..95e3abc92e 100644 --- a/packages/clay-css/src/scss/components/_date-picker.scss +++ b/packages/clay-css/src/scss/components/_date-picker.scss @@ -35,8 +35,8 @@ .date-picker-nav-item { align-items: center; display: flex; - padding-left: 0.25rem; - padding-right: 0.25rem; + padding-left: 0.125rem; + padding-right: 0.125rem; } .date-picker-nav-item-expand { diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss index 1f51839457..1e0bc1c323 100644 --- a/packages/clay-css/src/scss/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/variables/_date-picker.scss @@ -20,8 +20,8 @@ $date-picker-nav-row: () !default; $date-picker-nav-row: map-deep-merge( ( display: flex, - margin-left: -0.25rem, - margin-right: -0.25rem, + margin-left: -0.125rem, + margin-right: -0.125rem, ), $date-picker-nav-row ); @@ -51,6 +51,8 @@ $date-picker-nav-btn-monospaced: () !default; $date-picker-nav-btn-monospaced: map-deep-merge( ( margin-bottom: 0, + margin-left: 0.125rem, + margin-right: 0.125rem, margin-top: 0, ), $date-picker-nav-btn-monospaced @@ -148,8 +150,8 @@ $date-picker-calendar-header-container: map-merge( $date-picker-calendar-body-container: () !default; $date-picker-calendar-body-container: map-merge( ( - padding-left: 1rem, - padding-right: 1rem, + padding-left: 0.5rem, + padding-right: 0.5rem, padding-bottom: 0.5rem, ), $date-picker-calendar-body-container @@ -161,10 +163,10 @@ $date-picker-calendar-footer-container: map-merge( border-color: $gray-400, border-style: solid, border-width: 1px 0 0 0, - padding-bottom: 1rem, - padding-left: 1.5rem, - padding-right: 1.5rem, - padding-top: 1rem, + padding-bottom: 0.5rem, + padding-left: 0.875rem, + padding-right: 0.875rem, + padding-top: 0.5rem, ), $date-picker-calendar-footer-container ); diff --git a/packages/clay-date-picker/src/index.tsx b/packages/clay-date-picker/src/index.tsx index 741491d9ad..febd69ac3d 100644 --- a/packages/clay-date-picker/src/index.tsx +++ b/packages/clay-date-picker/src/index.tsx @@ -679,7 +679,7 @@ const ClayDatePicker = React.forwardRef( active={expandedValue} alignElementRef={triggerElementRef} aria-label={ariaLabels.dialog} - className="date-picker-dropdown-menu" + className="date-picker date-picker-dropdown-menu" data-testid="dropdown" id={ariaControls} lock diff --git a/packages/clay-time-picker/src/index.tsx b/packages/clay-time-picker/src/index.tsx index e803078750..fc771873e6 100644 --- a/packages/clay-time-picker/src/index.tsx +++ b/packages/clay-time-picker/src/index.tsx @@ -395,7 +395,7 @@ const ClayTimePicker = ({ )} - +
Date: Tue, 15 Aug 2023 17:53:11 -0500 Subject: [PATCH 2/9] feat(@clayui/css): adds new size small to DatePicker --- .../scss/atlas/variables/_date-picker.scss | 11 +++ .../src/scss/components/_date-picker.scss | 74 +++++++++++++++++++ packages/clay-css/src/scss/mixins/_forms.scss | 10 +++ .../src/scss/variables/_date-picker.scss | 62 ++++++++++++++++ 4 files changed, 157 insertions(+) diff --git a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss index 39eb7f51cc..a4c9d5f927 100644 --- a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss @@ -3,6 +3,12 @@ $date-picker-dropdown-menu: () !default; $date-picker-dropdown-menu: map-deep-merge( ( + breakpoint-down: 'sm', + mobile: ( + font-size: 0.75rem, + max-width: 264px, + max-height: 254px, + ), max-width: 352px, ), $date-picker-dropdown-menu @@ -36,6 +42,11 @@ $date-picker-nav-select: map-deep-merge( ( background-color: transparent, border-color: transparent, + breakpoint-down: 'sm', + mobile: ( + font-size: 0.75rem, + height: 1.5rem, + ), color: $secondary, font-size: $font-size-sm, font-weight: $font-weight-semi-bold, diff --git a/packages/clay-css/src/scss/components/_date-picker.scss b/packages/clay-css/src/scss/components/_date-picker.scss index 95e3abc92e..1fe8d2d836 100644 --- a/packages/clay-css/src/scss/components/_date-picker.scss +++ b/packages/clay-css/src/scss/components/_date-picker.scss @@ -2,6 +2,20 @@ .input-group-text { @include clay-input-group-text-variant($date-picker-input-group-text); } + + .clay-time .form-control { + @include clay-css($date-picker-input-form-control); + + $breakpoint-down: map-get($date-picker-input-form-control, breakpoint-down); + + $mobile: setter(map-get($date-picker-calendar-header-container, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } + } } // Date Picker Dropdown Menu @@ -56,14 +70,44 @@ .date-picker-calendar-header { @include clay-css($date-picker-calendar-header-container); + + $breakpoint-down: map-get($date-picker-calendar-header-container, breakpoint-down); + + $mobile: setter(map-get($date-picker-calendar-header-container, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } } .date-picker-calendar-body { @include clay-css($date-picker-calendar-body-container); + + $breakpoint-down: map-get($date-picker-calendar-body-container, breakpoint-down); + + $mobile: setter(map-get($date-picker-calendar-body-container, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } } .date-picker-calendar-footer { @include clay-css($date-picker-calendar-footer-container); + + $breakpoint-down: map-get($date-picker-calendar-footer-container, breakpoint-down); + + $mobile: setter(map-get($date-picker-calendar-footer-container, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } } .date-picker-calendar-item { @@ -74,11 +118,31 @@ .date-picker-row { @include clay-row($date-picker-row); + + $breakpoint-down: map-get($date-picker-row, breakpoint-down); + + $mobile: setter(map-get($date-picker-row, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } } .date-picker-col { @include clay-css($date-picker-col); + $breakpoint-down: map-get($date-picker-col, breakpoint-down); + + $mobile: setter(map-get($date-picker-col, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } + &.c-selected { @include clay-css(map-get($date-picker-col, c-selected)); @@ -104,6 +168,16 @@ .date-picker-days-row { @include clay-row($date-picker-days-row); + + $breakpoint-down: map-get($date-picker-days-row, breakpoint-down); + + $mobile: setter(map-get($date-picker-days-row, mobile), ()); + + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } } .date-picker-day { diff --git a/packages/clay-css/src/scss/mixins/_forms.scss b/packages/clay-css/src/scss/mixins/_forms.scss index bfe75d935a..bc77ba4382 100644 --- a/packages/clay-css/src/scss/mixins/_forms.scss +++ b/packages/clay-css/src/scss/mixins/_forms.scss @@ -919,9 +919,19 @@ ) ); + $breakpoint-down: map-get($map, breakpoint-down); + + $mobile: setter(map-get($map, mobile), ()); + @if ($enabled) { @include clay-css($base); + @if ($breakpoint-down) { + @include media-breakpoint-down($breakpoint-down) { + @include clay-css($mobile); + } + } + &:hover, &.hover { @include clay-css($hover); diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss index 1e0bc1c323..14e2d97d98 100644 --- a/packages/clay-css/src/scss/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/variables/_date-picker.scss @@ -50,6 +50,13 @@ $date-picker-nav-btn: map-deep-merge( $date-picker-nav-btn-monospaced: () !default; $date-picker-nav-btn-monospaced: map-deep-merge( ( + breakpoint-down: 'sm', + mobile: ( + font-size: 0.75rem, + height: 1.375rem, + max-height: 1.375rem, + max-width: 1.375rem, + ), margin-bottom: 0, margin-left: 0.125rem, margin-right: 0.125rem, @@ -65,6 +72,11 @@ $date-picker-nav-select: () !default; $date-picker-row: () !default; $date-picker-row: map-deep-merge( ( + breakpoint-down: 'sm', + mobile: ( + margin-bottom: 0.25rem, + margin-top: 0.25rem, + ), display: flex, justify-content: space-between, list-style: none, @@ -78,6 +90,11 @@ $date-picker-row: map-deep-merge( $date-picker-col: () !default; $date-picker-col: map-deep-merge( ( + breakpoint-down: 'sm', + mobile: ( + padding-left: 0.375rem, + padding-right: 0.375rem, + ), padding-left: 0.5rem, padding-right: 0.5rem, c-selected: ( @@ -107,6 +124,10 @@ $date-picker-col: map-deep-merge( $date-picker-days-row: () !default; $date-picker-days-row: map-deep-merge( ( + breakpoint-down: 'sm', + mobile: ( + margin-bottom: 0.25rem, + ), margin-bottom: 1rem, margin-top: 0, ), @@ -139,6 +160,13 @@ $date-picker-calendar-container: map-merge( $date-picker-calendar-header-container: () !default; $date-picker-calendar-header-container: map-merge( ( + breakpoint-down: 'sm', + mobile: ( + padding-bottom: 0.25rem, + padding-left: 0.375rem, + padding-right: 0.375rem, + padding-top: 0.5rem, + ), padding-bottom: 1rem, padding-left: 1rem, padding-right: 1rem, @@ -150,6 +178,12 @@ $date-picker-calendar-header-container: map-merge( $date-picker-calendar-body-container: () !default; $date-picker-calendar-body-container: map-merge( ( + breakpoint-down: 'sm', + mobile: ( + padding-left: 0.375rem, + padding-right: 0.375rem, + padding-bottom: 0.25rem, + ), padding-left: 0.5rem, padding-right: 0.5rem, padding-bottom: 0.5rem, @@ -160,6 +194,11 @@ $date-picker-calendar-body-container: map-merge( $date-picker-calendar-footer-container: () !default; $date-picker-calendar-footer-container: map-merge( ( + breakpoint-down: 'sm', + mobile: ( + padding-left: 0.75rem, + padding-right: 0.75rem, + ), border-color: $gray-400, border-style: solid, border-width: 1px 0 0 0, @@ -180,6 +219,11 @@ $date-picker-calendar-item: map-deep-merge( background-color: setter(map-get($date-picker-calendar-item, bg) transparent), border-width: 0px, + breakpoint-down: 'sm', + mobile: ( + height: 1.5rem, + width: 1.5rem, + ), disabled-cursor: $disabled-cursor, display: inline-flex, flex-shrink: 0, @@ -273,3 +317,21 @@ $date-picker-input-group-text: map-deep-merge( ), $date-picker-input-group-text ); + +$date-picker-input-form-control: () !default; +$date-picker-input-form-control: map-deep-merge( + ( + breakpoint-down: 'sm', + mobile: ( + border-radius: clay-enable-rounded($input-border-radius-sm), + font-size: $input-font-size-sm, + height: $input-height-sm, + line-height: $input-line-height-sm, + padding-bottom: $input-padding-y-sm, + padding-left: $input-padding-x-sm, + padding-right: $input-padding-x-sm, + padding-top: $input-padding-y-sm, + ), + ), + $date-picker-input-form-control +); From bc1e2d7756a315230777dc7d752e8aa1210a67d4 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2023 15:26:33 -0700 Subject: [PATCH 3/9] feat(@clayui/css): Adds param where you can specify the mixin to use for clay-generate-media-breakpoints feat(@clayui/css): Convert mixins to use clay-generate-media-breakpoints where applicable - This allows us to generate media-breakpoint-up and media-breakpoint-down media queries without having to repeat an @each loop for each mixin --- .../clay-css/src/scss/mixins/_buttons.scss | 10 +++ .../src/scss/mixins/_dropdown-menu.scss | 10 +++ packages/clay-css/src/scss/mixins/_grid.scss | 41 ++++++++- .../src/scss/mixins/_input-groups.scss | 48 +++-------- .../clay-css/src/scss/mixins/_menubar.scss | 85 +++---------------- 5 files changed, 86 insertions(+), 108 deletions(-) diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss index c806169f1f..839f31ee04 100644 --- a/packages/clay-css/src/scss/mixins/_buttons.scss +++ b/packages/clay-css/src/scss/mixins/_buttons.scss @@ -991,6 +991,16 @@ .loading-animation { @extend %#{$loading-animation} !optional; } + + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-button-variant' + ); + } } } } diff --git a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss index 322faed2d7..04528e9674 100644 --- a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss +++ b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss @@ -206,6 +206,16 @@ .inline-scroller { @include clay-css(map-get($map, inline-scroller)); } + + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-dropdown-menu-variant' + ); + } } } } diff --git a/packages/clay-css/src/scss/mixins/_grid.scss b/packages/clay-css/src/scss/mixins/_grid.scss index d9eec99868..fd38aed60a 100644 --- a/packages/clay-css/src/scss/mixins/_grid.scss +++ b/packages/clay-css/src/scss/mixins/_grid.scss @@ -119,6 +119,13 @@ @mixin clay-row($map) { @include clay-css($map); + + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints($map, 'clay-css'); + } } @mixin clay-custom-grid-columns($map) { @@ -193,7 +200,7 @@ /// A mixin that generates media-breakpoint-{up|down} styles from a Sass map. /// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin -@mixin clay-generate-media-breakpoints($map) { +@mixin clay-generate-media-breakpoints($map, $mixin: 'clay-css') { @if (type-of($map) == 'map') { @if (map-get($map, media-breakpoint-up)) { $media-breakpoint-up: map-get($map, media-breakpoint-up); @@ -202,7 +209,19 @@ $breakpoint-up: map-get($media-breakpoint-up, $breakpoint); @include media-breakpoint-up($breakpoint) { - @include clay-css($breakpoint-up); + @if ($mixin == 'clay-css') { + @include clay-css($breakpoint-up); + } @else if ($mixin == 'clay-button-variant') { + @include clay-button-variant($breakpoint-up); + } @else if ($mixin == 'clay-input-group-variant') { + @include clay-input-group-variant($breakpoint-up); + } @else if ($mixin == 'clay-input-group-text-variant') { + @include clay-input-group-text-variant($breakpoint-up); + } @else if ($mixin == 'clay-dropdown-menu-variant') { + @include clay-dropdown-menu-variant($breakpoint-up); + } @else if ($mixin == 'clay-menubar-vertical-variant') { + @include clay-menubar-vertical-variant($breakpoint-up); + } } } } @@ -214,7 +233,23 @@ $breakpoint-down: map-get($media-breakpoint-down, $breakpoint); @include media-breakpoint-down($breakpoint) { - @include clay-css($breakpoint-down); + @if ($mixin == 'clay-css') { + @include clay-css($breakpoint-down); + } @else if ($mixin == 'clay-button-variant') { + @include clay-button-variant($breakpoint-down); + } @else if ($mixin == 'clay-input-group-variant') { + @include clay-input-group-variant($breakpoint-down); + } @else if ($mixin == 'clay-input-group-text-variant') { + @include clay-input-group-text-variant( + $breakpoint-down + ); + } @else if ($mixin == 'clay-dropdown-menu-variant') { + @include clay-dropdown-menu-variant($breakpoint-down); + } @else if ($mixin == 'clay-menubar-vertical-variant') { + @include clay-menubar-vertical-variant( + $breakpoint-down + ); + } } } } diff --git a/packages/clay-css/src/scss/mixins/_input-groups.scss b/packages/clay-css/src/scss/mixins/_input-groups.scss index 6a49564469..21538b4202 100644 --- a/packages/clay-css/src/scss/mixins/_input-groups.scss +++ b/packages/clay-css/src/scss/mixins/_input-groups.scss @@ -189,24 +189,14 @@ @include clay-css(map-deep-get($map, lexicon-icon)); } - @if (map-get($map, media-breakpoint-down)) { - @each $breakpoint - in map-keys(map-get($map, media-breakpoint-down)) - { - $media-breakpoint-down: map-deep-get( - $map, - media-breakpoint-down, - $breakpoint - ); + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); - @if ($breakpoint) { - @include media-breakpoint-down($breakpoint) { - @include clay-input-group-text-variant( - $media-breakpoint-down - ); - } - } - } + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-input-group-text-variant' + ); } } } @@ -495,24 +485,14 @@ @include clay-button-variant(map-deep-get($map, btn-unstyled)); } - @if (map-get($map, media-breakpoint-down)) { - @each $breakpoint - in map-keys(map-get($map, media-breakpoint-down)) - { - $media-breakpoint-down: map-deep-get( - $map, - media-breakpoint-down, - $breakpoint - ); + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); - @if ($breakpoint) { - @include media-breakpoint-down($breakpoint) { - @include clay-input-group-variant( - $media-breakpoint-down - ); - } - } - } + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-input-group-variant' + ); } } } diff --git a/packages/clay-css/src/scss/mixins/_menubar.scss b/packages/clay-css/src/scss/mixins/_menubar.scss index 65af8df967..05ef308ca1 100644 --- a/packages/clay-css/src/scss/mixins/_menubar.scss +++ b/packages/clay-css/src/scss/mixins/_menubar.scss @@ -379,44 +379,14 @@ } } - @if (map-get($map, media-breakpoint-down)) { - @each $breakpoint - in map-keys(map-get($map, media-breakpoint-down)) - { - $media-breakpoint-down: map-deep-get( - $map, - media-breakpoint-down, - $breakpoint - ); - - @if ($breakpoint) { - @include media-breakpoint-down($breakpoint) { - @include clay-menubar-vertical-variant( - $media-breakpoint-down - ); - } - } - } - } - - @if (map-get($map, media-breakpoint-up)) { - @each $breakpoint - in map-keys(map-get($map, media-breakpoint-up)) - { - $media-breakpoint-up: map-deep-get( - $map, - media-breakpoint-up, - $breakpoint - ); + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); - @if ($breakpoint) { - @include media-breakpoint-up($breakpoint) { - @include clay-menubar-vertical-variant( - $media-breakpoint-up - ); - } - } - } + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-menubar-vertical-variant' + ); } } @else { .menubar-collapse { @@ -972,41 +942,14 @@ } } - @if (map-get($map, media-breakpoint-down)) { - @each $breakpoint in map-keys(map-get($map, media-breakpoint-down)) - { - $media-breakpoint-down: map-deep-get( - $map, - media-breakpoint-down, - $breakpoint - ); + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); - @if ($breakpoint) { - @include media-breakpoint-down($breakpoint) { - @include clay-menubar-vertical-variant( - $media-breakpoint-down - ); - } - } - } - } - - @if (map-get($map, media-breakpoint-up)) { - @each $breakpoint in map-keys(map-get($map, media-breakpoint-up)) { - $media-breakpoint-up: map-deep-get( - $map, - media-breakpoint-up, - $breakpoint - ); - - @if ($breakpoint) { - @include media-breakpoint-up($breakpoint) { - @include clay-menubar-vertical-variant( - $media-breakpoint-up - ); - } - } - } + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-menubar-vertical-variant' + ); } } } From 25cc0c239335cb21e102c7d1023f622b3f5a2e31 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2023 15:31:01 -0700 Subject: [PATCH 4/9] feat(@clayui/css): Date Picker update to use newer media query pattern in variables --- .../scss/atlas/variables/_date-picker.scss | 11 -- .../src/scss/components/_date-picker.scss | 126 ++++++++------- .../src/scss/variables/_date-picker.scss | 143 +++++++++++------- .../clay-css/src/scss/variables/_time.scss | 1 + 4 files changed, 149 insertions(+), 132 deletions(-) diff --git a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss index a4c9d5f927..39eb7f51cc 100644 --- a/packages/clay-css/src/scss/atlas/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/atlas/variables/_date-picker.scss @@ -3,12 +3,6 @@ $date-picker-dropdown-menu: () !default; $date-picker-dropdown-menu: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - font-size: 0.75rem, - max-width: 264px, - max-height: 254px, - ), max-width: 352px, ), $date-picker-dropdown-menu @@ -42,11 +36,6 @@ $date-picker-nav-select: map-deep-merge( ( background-color: transparent, border-color: transparent, - breakpoint-down: 'sm', - mobile: ( - font-size: 0.75rem, - height: 1.5rem, - ), color: $secondary, font-size: $font-size-sm, font-weight: $font-weight-semi-bold, diff --git a/packages/clay-css/src/scss/components/_date-picker.scss b/packages/clay-css/src/scss/components/_date-picker.scss index 1fe8d2d836..74bdd55a74 100644 --- a/packages/clay-css/src/scss/components/_date-picker.scss +++ b/packages/clay-css/src/scss/components/_date-picker.scss @@ -1,20 +1,21 @@ .date-picker { + .input-group-item { + $date-picker-input-group-item: () !default; + $date-picker-input-group-item: map-deep-merge( + ( + margin-left: 0.125rem, + ), + $date-picker-input-group-item + ); + @include clay-input-group-item-variant($date-picker-input-group-item); + } + .input-group-text { @include clay-input-group-text-variant($date-picker-input-group-text); } .clay-time .form-control { - @include clay-css($date-picker-input-form-control); - - $breakpoint-down: map-get($date-picker-input-form-control, breakpoint-down); - - $mobile: setter(map-get($date-picker-calendar-header-container, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } - } + @include clay-form-control-variant($date-picker-input-form-control); } } @@ -71,42 +72,60 @@ .date-picker-calendar-header { @include clay-css($date-picker-calendar-header-container); - $breakpoint-down: map-get($date-picker-calendar-header-container, breakpoint-down); - - $mobile: setter(map-get($date-picker-calendar-header-container, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } + $_media-breakpoint-down: map-get( + $date-picker-calendar-header-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $date-picker-calendar-header-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $date-picker-calendar-header-container, + 'clay-css' + ); } } .date-picker-calendar-body { @include clay-css($date-picker-calendar-body-container); - $breakpoint-down: map-get($date-picker-calendar-body-container, breakpoint-down); - - $mobile: setter(map-get($date-picker-calendar-body-container, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } + $_media-breakpoint-down: map-get( + $date-picker-calendar-body-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $date-picker-calendar-body-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $date-picker-calendar-body-container, + 'clay-css' + ); } } .date-picker-calendar-footer { @include clay-css($date-picker-calendar-footer-container); - $breakpoint-down: map-get($date-picker-calendar-footer-container, breakpoint-down); - - $mobile: setter(map-get($date-picker-calendar-footer-container, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } + $_media-breakpoint-down: map-get( + $date-picker-calendar-footer-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $date-picker-calendar-footer-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $date-picker-calendar-footer-container, + 'clay-css' + ); } } @@ -118,31 +137,11 @@ .date-picker-row { @include clay-row($date-picker-row); - - $breakpoint-down: map-get($date-picker-row, breakpoint-down); - - $mobile: setter(map-get($date-picker-row, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } - } } .date-picker-col { @include clay-css($date-picker-col); - $breakpoint-down: map-get($date-picker-col, breakpoint-down); - - $mobile: setter(map-get($date-picker-col, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } - } - &.c-selected { @include clay-css(map-get($date-picker-col, c-selected)); @@ -164,20 +163,17 @@ &.c-selected-end { @include clay-css(map-get($date-picker-col, c-selected-end)); } + + $_media-breakpoint-down: map-get($date-picker-col, media-breakpoint-down); + $_media-breakpoint-up: map-get($date-picker-col, media-breakpoint-up); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints($date-picker-col); + } } .date-picker-days-row { @include clay-row($date-picker-days-row); - - $breakpoint-down: map-get($date-picker-days-row, breakpoint-down); - - $mobile: setter(map-get($date-picker-days-row, mobile), ()); - - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } - } } .date-picker-day { diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss index 14e2d97d98..5cea202933 100644 --- a/packages/clay-css/src/scss/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/variables/_date-picker.scss @@ -10,6 +10,13 @@ $date-picker-dropdown-menu: map-deep-merge( padding-right: 0, padding-top: 0, width: 100%, + media-breakpoint-down: ( + xs: ( + font-size: 0.75rem, + max-width: 264px, + max-height: 254px, + ), + ), ), $date-picker-dropdown-menu ); @@ -50,39 +57,53 @@ $date-picker-nav-btn: map-deep-merge( $date-picker-nav-btn-monospaced: () !default; $date-picker-nav-btn-monospaced: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - font-size: 0.75rem, - height: 1.375rem, - max-height: 1.375rem, - max-width: 1.375rem, - ), margin-bottom: 0, margin-left: 0.125rem, margin-right: 0.125rem, margin-top: 0, + media-breakpoint-down: ( + xs: ( + font-size: 0.75rem, + height: 1.375rem, + max-height: 1.375rem, + max-width: 1.375rem, + min-width: 1.375rem, + ), + ), ), $date-picker-nav-btn-monospaced ); $date-picker-nav-select: () !default; +$date-picker-nav-select: map-deep-merge( + ( + media-breakpoint-down: ( + xs: ( + font-size: 0.75rem, + height: 1.5rem, + ), + ), + ), + $date-picker-nav-select +); // Date Picker Row $date-picker-row: () !default; $date-picker-row: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - margin-bottom: 0.25rem, - margin-top: 0.25rem, - ), display: flex, justify-content: space-between, list-style: none, margin-bottom: 0.5rem, margin-top: 0.5rem, padding: 0, + media-breakpoint-down: ( + xs: ( + margin-bottom: 0.25rem, + margin-top: 0.25rem, + ), + ), ), $date-picker-row ); @@ -90,13 +111,9 @@ $date-picker-row: map-deep-merge( $date-picker-col: () !default; $date-picker-col: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - padding-left: 0.375rem, - padding-right: 0.375rem, - ), - padding-left: 0.5rem, - padding-right: 0.5rem, + display: flex, + flex-grow: 1, + justify-content: center, c-selected: ( background-image: linear-gradient($primary-l3, $primary-l3), background-repeat: no-repeat, @@ -124,12 +141,13 @@ $date-picker-col: map-deep-merge( $date-picker-days-row: () !default; $date-picker-days-row: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - margin-bottom: 0.25rem, - ), margin-bottom: 1rem, margin-top: 0, + media-breakpoint-down: ( + xs: ( + margin-bottom: 0.25rem, + ), + ), ), $date-picker-days-row ); @@ -160,17 +178,18 @@ $date-picker-calendar-container: map-merge( $date-picker-calendar-header-container: () !default; $date-picker-calendar-header-container: map-merge( ( - breakpoint-down: 'sm', - mobile: ( - padding-bottom: 0.25rem, - padding-left: 0.375rem, - padding-right: 0.375rem, - padding-top: 0.5rem, - ), padding-bottom: 1rem, padding-left: 1rem, padding-right: 1rem, padding-top: 1rem, + media-breakpoint-down: ( + xs: ( + padding-bottom: 0.25rem, + padding-left: 0.375rem, + padding-right: 0.375rem, + padding-top: 0.5rem, + ), + ), ), $date-picker-calendar-header-container ); @@ -178,15 +197,16 @@ $date-picker-calendar-header-container: map-merge( $date-picker-calendar-body-container: () !default; $date-picker-calendar-body-container: map-merge( ( - breakpoint-down: 'sm', - mobile: ( - padding-left: 0.375rem, - padding-right: 0.375rem, - padding-bottom: 0.25rem, - ), padding-left: 0.5rem, padding-right: 0.5rem, padding-bottom: 0.5rem, + media-breakpoint-down: ( + xs: ( + padding-left: 0.375rem, + padding-right: 0.375rem, + padding-bottom: 0.25rem, + ), + ), ), $date-picker-calendar-body-container ); @@ -194,11 +214,6 @@ $date-picker-calendar-body-container: map-merge( $date-picker-calendar-footer-container: () !default; $date-picker-calendar-footer-container: map-merge( ( - breakpoint-down: 'sm', - mobile: ( - padding-left: 0.75rem, - padding-right: 0.75rem, - ), border-color: $gray-400, border-style: solid, border-width: 1px 0 0 0, @@ -206,6 +221,12 @@ $date-picker-calendar-footer-container: map-merge( padding-left: 0.875rem, padding-right: 0.875rem, padding-top: 0.5rem, + media-breakpoint-down: ( + xs: ( + padding-left: 0.375rem, + padding-right: 0.375rem, + ), + ), ), $date-picker-calendar-footer-container ); @@ -219,11 +240,6 @@ $date-picker-calendar-item: map-deep-merge( background-color: setter(map-get($date-picker-calendar-item, bg) transparent), border-width: 0px, - breakpoint-down: 'sm', - mobile: ( - height: 1.5rem, - width: 1.5rem, - ), disabled-cursor: $disabled-cursor, display: inline-flex, flex-shrink: 0, @@ -242,6 +258,12 @@ $date-picker-calendar-item: map-deep-merge( vertical-align: middle, white-space: nowrap, width: 2rem, + media-breakpoint-down: ( + xs: ( + height: 1.5rem, + width: 1.5rem, + ), + ), ), $date-picker-calendar-item ); @@ -314,6 +336,13 @@ $date-picker-input-group-text: map-deep-merge( min-width: 2rem, padding-left: 0.25rem, padding-right: 0.25rem, + media-breakpoint-down: ( + xs: ( + font-size: inherit, + height: $input-height-sm, + min-width: 1.5rem, + ), + ), ), $date-picker-input-group-text ); @@ -321,16 +350,18 @@ $date-picker-input-group-text: map-deep-merge( $date-picker-input-form-control: () !default; $date-picker-input-form-control: map-deep-merge( ( - breakpoint-down: 'sm', - mobile: ( - border-radius: clay-enable-rounded($input-border-radius-sm), - font-size: $input-font-size-sm, - height: $input-height-sm, - line-height: $input-line-height-sm, - padding-bottom: $input-padding-y-sm, - padding-left: $input-padding-x-sm, - padding-right: $input-padding-x-sm, - padding-top: $input-padding-y-sm, + media-breakpoint-down: ( + xs: ( + border-radius: clay-enable-rounded($input-border-radius-sm), + font-size: $input-font-size-sm, + height: $input-height-sm, + line-height: $input-line-height-sm, + min-height: $input-height-sm, + padding-bottom: $input-padding-y-sm, + padding-left: $input-padding-x-sm, + padding-right: $input-padding-x-sm, + padding-top: $input-padding-y-sm, + ), ), ), $date-picker-input-form-control diff --git a/packages/clay-css/src/scss/variables/_time.scss b/packages/clay-css/src/scss/variables/_time.scss index cde7c9753f..bdf94d8f36 100644 --- a/packages/clay-css/src/scss/variables/_time.scss +++ b/packages/clay-css/src/scss/variables/_time.scss @@ -31,6 +31,7 @@ $clay-time-form-control-inset: () !default; $clay-time-form-control-inset: map-deep-merge( ( margin-bottom: 0, + margin-left: 0, margin-top: 0, text-align: center, width: 1.25rem, From 90d3d72a5f24d276db018aa3553d93ca00a20455 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 18 Aug 2023 16:09:09 -0700 Subject: [PATCH 5/9] feat(@clayui/css): Cadmin Date Picker update to use newer media query pattern in variables --- .../scss/cadmin/components/_date-picker.scss | 71 +++++++++- .../src/scss/cadmin/variables/_buttons.scss | 3 - .../scss/cadmin/variables/_date-picker.scss | 123 ++++++++++++++++-- .../src/scss/cadmin/variables/_time.scss | 1 + .../src/scss/components/_date-picker.scss | 7 - .../src/scss/variables/_date-picker.scss | 16 ++- 6 files changed, 192 insertions(+), 29 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/components/_date-picker.scss b/packages/clay-css/src/scss/cadmin/components/_date-picker.scss index d3f6d2c30a..fcdad29d84 100644 --- a/packages/clay-css/src/scss/cadmin/components/_date-picker.scss +++ b/packages/clay-css/src/scss/cadmin/components/_date-picker.scss @@ -1,4 +1,10 @@ .date-picker { + .input-group-item { + @include clay-input-group-item-variant( + $cadmin-date-picker-input-group-item + ); + } + .input-group-text { @include clay-input-group-text-variant( $cadmin-date-picker-input-group-text @@ -37,8 +43,8 @@ .date-picker-nav-item { align-items: center; display: flex; - padding-left: 4px; - padding-right: 4px; + padding-left: 2px; + padding-right: 2px; } .date-picker-nav-item-expand { @@ -58,14 +64,62 @@ .date-picker-calendar-header { @include clay-css($cadmin-date-picker-calendar-header-container); + + $_media-breakpoint-down: map-get( + $cadmin-date-picker-calendar-header-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $cadmin-date-picker-calendar-header-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $cadmin-date-picker-calendar-header-container, + 'clay-css' + ); + } } .date-picker-calendar-body { @include clay-css($cadmin-date-picker-calendar-body-container); + + $_media-breakpoint-down: map-get( + $cadmin-date-picker-calendar-body-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $cadmin-date-picker-calendar-body-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $cadmin-date-picker-calendar-body-container, + 'clay-css' + ); + } } .date-picker-calendar-footer { @include clay-css($cadmin-date-picker-calendar-footer-container); + + $_media-breakpoint-down: map-get( + $cadmin-date-picker-calendar-footer-container, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $cadmin-date-picker-calendar-footer-container, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $cadmin-date-picker-calendar-footer-container, + 'clay-css' + ); + } } .date-picker-calendar-item { @@ -125,6 +179,19 @@ @include clay-css($cadmin-_c-selected-end); } + + $_media-breakpoint-down: map-get( + $cadmin-date-picker-col, + media-breakpoint-down + ); + $_media-breakpoint-up: map-get( + $cadmin-date-picker-col, + media-breakpoint-up + ); + + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints($cadmin-date-picker-col); + } } .date-picker-days-row { diff --git a/packages/clay-css/src/scss/cadmin/variables/_buttons.scss b/packages/clay-css/src/scss/cadmin/variables/_buttons.scss index 2a69bf072f..703e68d7b6 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_buttons.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_buttons.scss @@ -105,9 +105,6 @@ $cadmin-btn: map-deep-merge( font-weight: $cadmin-btn-section-font-weight, line-height: $cadmin-btn-section-line-height, ), - lexicon-icon: ( - font-size: 16px, - ), ), $cadmin-btn ); diff --git a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss index 06edc2620a..846fbe9149 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss @@ -10,6 +10,13 @@ $cadmin-date-picker-dropdown-menu: map-deep-merge( padding-right: 0, padding-top: 0, width: 100%, + media-breakpoint-down: ( + xs: ( + font-size: 12px, + max-width: 264px, + max-height: 254px, + ), + ), ), $cadmin-date-picker-dropdown-menu ); @@ -20,8 +27,8 @@ $cadmin-date-picker-nav-row: () !default; $cadmin-date-picker-nav-row: map-deep-merge( ( display: flex, - margin-left: -0.125rem, - margin-right: -0.125rem, + margin-left: -2px, + margin-right: -2px, ), $cadmin-date-picker-nav-row ); @@ -56,9 +63,18 @@ $cadmin-date-picker-nav-btn-monospaced: () !default; $cadmin-date-picker-nav-btn-monospaced: map-deep-merge( ( margin-bottom: 0, - margin-left: 0.125rem, - margin-right: 0.125rem, + margin-left: 2px, + margin-right: 2px, margin-top: 0, + media-breakpoint-down: ( + xs: ( + font-size: 12px, + height: 24px, + max-height: 24px, + max-width: 24px, + min-width: 24px, + ), + ), ), $cadmin-date-picker-nav-btn-monospaced ); @@ -87,6 +103,12 @@ $cadmin-date-picker-nav-select: map-deep-merge( background-color: transparent, color: $cadmin-input-disabled-color, ), + media-breakpoint-down: ( + xs: ( + font-size: 12px, + height: 24px, + ), + ), ), $cadmin-date-picker-nav-select ); @@ -102,6 +124,12 @@ $cadmin-date-picker-row: map-deep-merge( margin-bottom: 8px, margin-top: 8px, padding: 0, + media-breakpoint-down: ( + xs: ( + margin-bottom: 4px, + margin-top: 4px, + ), + ), ), $cadmin-date-picker-row ); @@ -109,8 +137,9 @@ $cadmin-date-picker-row: map-deep-merge( $cadmin-date-picker-col: () !default; $cadmin-date-picker-col: map-deep-merge( ( - padding-left: 8px, - padding-right: 8px, + display: flex, + flex-grow: 1, + justify-content: center, c-selected: ( background-image: linear-gradient($cadmin-primary-l3, $cadmin-primary-l3), @@ -141,6 +170,11 @@ $cadmin-date-picker-days-row: map-deep-merge( ( margin-bottom: 16px, margin-top: 0, + media-breakpoint-down: ( + xs: ( + margin-bottom: 4px, + ), + ), ), $cadmin-date-picker-days-row ); @@ -175,6 +209,14 @@ $cadmin-date-picker-calendar-header-container: map-merge( padding-left: 16px, padding-right: 16px, padding-top: 16px, + media-breakpoint-down: ( + xs: ( + padding-bottom: 4px, + padding-left: 6px, + padding-right: 6px, + padding-top: 8px, + ), + ), ), $cadmin-date-picker-calendar-header-container ); @@ -182,9 +224,16 @@ $cadmin-date-picker-calendar-header-container: map-merge( $cadmin-date-picker-calendar-body-container: () !default; $cadmin-date-picker-calendar-body-container: map-merge( ( - padding-left: 0.5rem, - padding-right: 0.5rem, - padding-bottom: 0.5rem, + padding-left: 8px, + padding-right: 8px, + padding-bottom: 8px, + media-breakpoint-down: ( + xs: ( + padding-left: 6px, + padding-right: 6px, + padding-bottom: 4px, + ), + ), ), $cadmin-date-picker-calendar-body-container ); @@ -195,10 +244,16 @@ $cadmin-date-picker-calendar-footer-container: map-merge( border-color: $cadmin-gray-400, border-style: solid, border-width: 1px 0 0 0, - padding-bottom: 0.5rem, - padding-left: 0.875rem, - padding-right: 0.875rem, - padding-top: 0.5rem, + padding-bottom: 8px, + padding-left: 14px, + padding-right: 14px, + padding-top: 8px, + media-breakpoint-down: ( + xs: ( + padding-left: 6px, + padding-right: 6px, + ), + ), ), $cadmin-date-picker-calendar-footer-container ); @@ -230,6 +285,12 @@ $cadmin-date-picker-calendar-item: map-deep-merge( vertical-align: middle, white-space: nowrap, width: 32px, + media-breakpoint-down: ( + xs: ( + height: 24px, + width: 24px, + ), + ), ), $cadmin-date-picker-calendar-item ); @@ -290,6 +351,14 @@ $cadmin-date-picker-next-month-date: map-deep-merge( // Date Picker Input Group +$cadmin-date-picker-input-group-item: () !default; +$cadmin-date-picker-input-group-item: map-deep-merge( + ( + margin-left: 2px, + ), + $cadmin-date-picker-input-group-item +); + $cadmin-date-picker-input-group-text: () !default; $cadmin-date-picker-input-group-text: map-deep-merge( ( @@ -301,6 +370,34 @@ $cadmin-date-picker-input-group-text: map-deep-merge( min-width: 32px, padding-left: 4px, padding-right: 4px, + media-breakpoint-down: ( + xs: ( + font-size: inherit, + height: $cadmin-input-height-sm, + min-width: 24px, + ), + ), ), $cadmin-date-picker-input-group-text ); + +$date-picker-input-form-control: () !default; +$date-picker-input-form-control: map-deep-merge( + ( + media-breakpoint-down: ( + xs: ( + border-radius: + clay-enable-rounded($cadmin-input-border-radius-sm), + font-size: $cadmin-input-font-size-sm, + height: $cadmin-input-height-sm, + line-height: $cadmin-input-line-height-sm, + min-height: $cadmin-input-height-sm, + padding-bottom: $cadmin-input-padding-y-sm, + padding-left: $cadmin-input-padding-x-sm, + padding-right: $cadmin-input-padding-x-sm, + padding-top: $cadmin-input-padding-y-sm, + ), + ), + ), + $date-picker-input-form-control +); diff --git a/packages/clay-css/src/scss/cadmin/variables/_time.scss b/packages/clay-css/src/scss/cadmin/variables/_time.scss index ee3d7cbb8a..fd327f1404 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_time.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_time.scss @@ -35,6 +35,7 @@ $cadmin-clay-time-form-control-inset: () !default; $cadmin-clay-time-form-control-inset: map-deep-merge( ( margin-bottom: 0, + margin-left: 0, margin-top: 0, text-align: center, width: 20px, diff --git a/packages/clay-css/src/scss/components/_date-picker.scss b/packages/clay-css/src/scss/components/_date-picker.scss index 74bdd55a74..c81704b035 100644 --- a/packages/clay-css/src/scss/components/_date-picker.scss +++ b/packages/clay-css/src/scss/components/_date-picker.scss @@ -1,12 +1,5 @@ .date-picker { .input-group-item { - $date-picker-input-group-item: () !default; - $date-picker-input-group-item: map-deep-merge( - ( - margin-left: 0.125rem, - ), - $date-picker-input-group-item - ); @include clay-input-group-item-variant($date-picker-input-group-item); } diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss index 5cea202933..66d4a9b075 100644 --- a/packages/clay-css/src/scss/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/variables/_date-picker.scss @@ -64,10 +64,10 @@ $date-picker-nav-btn-monospaced: map-deep-merge( media-breakpoint-down: ( xs: ( font-size: 0.75rem, - height: 1.375rem, - max-height: 1.375rem, - max-width: 1.375rem, - min-width: 1.375rem, + height: 1.5rem, + max-height: 1.5rem, + max-width: 1.5rem, + min-width: 1.5rem, ), ), ), @@ -327,6 +327,14 @@ $date-picker-next-month-date: map-deep-merge( // Date Picker Input Group +$date-picker-input-group-item: () !default; +$date-picker-input-group-item: map-deep-merge( + ( + margin-left: 0.125rem, + ), + $date-picker-input-group-item +); + $date-picker-input-group-text: () !default; $date-picker-input-group-text: map-deep-merge( ( From dbd5aacaec56a45179bc4ad3422752bca9570c5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 24 Aug 2023 19:07:44 -0500 Subject: [PATCH 6/9] feat(@clayui/css): add `clay-generate-media-breakpoints` mixin to `clay-select-variant` --- packages/clay-css/src/scss/mixins/_forms.scss | 12 +++++++----- packages/clay-css/src/scss/mixins/_grid.scss | 4 ++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/clay-css/src/scss/mixins/_forms.scss b/packages/clay-css/src/scss/mixins/_forms.scss index bc77ba4382..a32b344b3a 100644 --- a/packages/clay-css/src/scss/mixins/_forms.scss +++ b/packages/clay-css/src/scss/mixins/_forms.scss @@ -919,17 +919,19 @@ ) ); - $breakpoint-down: map-get($map, breakpoint-down); + $_media-breakpoint-down: map-get($map, media-breakpoint-down); + $_media-breakpoint-up: map-get($map, media-breakpoint-up); $mobile: setter(map-get($map, mobile), ()); @if ($enabled) { @include clay-css($base); - @if ($breakpoint-down) { - @include media-breakpoint-down($breakpoint-down) { - @include clay-css($mobile); - } + @if ($_media-breakpoint-down) or ($_media-breakpoint-up) { + @include clay-generate-media-breakpoints( + $map, + 'clay-select-variant' + ); } &:hover, diff --git a/packages/clay-css/src/scss/mixins/_grid.scss b/packages/clay-css/src/scss/mixins/_grid.scss index fd38aed60a..c1862d0767 100644 --- a/packages/clay-css/src/scss/mixins/_grid.scss +++ b/packages/clay-css/src/scss/mixins/_grid.scss @@ -221,6 +221,8 @@ @include clay-dropdown-menu-variant($breakpoint-up); } @else if ($mixin == 'clay-menubar-vertical-variant') { @include clay-menubar-vertical-variant($breakpoint-up); + } @else if ($mixin == 'clay-select-variant') { + @include clay-select-variant($breakpoint-up); } } } @@ -249,6 +251,8 @@ @include clay-menubar-vertical-variant( $breakpoint-down ); + } @else if ($mixin == 'clay-select-variant') { + @include clay-select-variant($breakpoint-down); } } } From e5e16712c2568f812a6229278d529c76aa23022b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 24 Aug 2023 19:08:39 -0500 Subject: [PATCH 7/9] chore(@clayui/css): update menu size --- packages/clay-css/src/scss/cadmin/variables/_date-picker.scss | 4 +++- packages/clay-css/src/scss/variables/_date-picker.scss | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss index 846fbe9149..740af3cf38 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_date-picker.scss @@ -13,8 +13,9 @@ $cadmin-date-picker-dropdown-menu: map-deep-merge( media-breakpoint-down: ( xs: ( font-size: 12px, + margin: 0, + max-height: 255px, max-width: 264px, - max-height: 254px, ), ), ), @@ -252,6 +253,7 @@ $cadmin-date-picker-calendar-footer-container: map-merge( xs: ( padding-left: 6px, padding-right: 6px, + padding-top: 7px, ), ), ), diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss index 66d4a9b075..fa69ae4ef8 100644 --- a/packages/clay-css/src/scss/variables/_date-picker.scss +++ b/packages/clay-css/src/scss/variables/_date-picker.scss @@ -13,8 +13,9 @@ $date-picker-dropdown-menu: map-deep-merge( media-breakpoint-down: ( xs: ( font-size: 0.75rem, + margin: 0, + max-height: 255px, max-width: 264px, - max-height: 254px, ), ), ), @@ -225,6 +226,7 @@ $date-picker-calendar-footer-container: map-merge( xs: ( padding-left: 0.375rem, padding-right: 0.375rem, + padding-top: 0.4375rem, ), ), ), From 975d94fa44a87d227cef905fd06bbb850d8c3fff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 24 Aug 2023 19:29:37 -0500 Subject: [PATCH 8/9] chore(@clayui/date-picker): regen snapshot --- .../__snapshots__/BasicRendering.tsx.snap | 10 +++++----- .../IncrementalInteractions.tsx.snap | 12 ++++++------ .../Internationalization.tsx.snap | 18 +++++++++--------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap index dcfa87c0b8..e4d1561983 100644 --- a/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap +++ b/packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap @@ -60,7 +60,7 @@ exports[`BasicRendering renders by default 1`] = ` aria-hidden="true" aria-label="Choose date" aria-modal="true" - class="dropdown-menu date-picker-dropdown-menu" + class="dropdown-menu date-picker date-picker-dropdown-menu" data-testid="dropdown" id="clay-id-1" role="dialog" @@ -895,7 +895,7 @@ exports[`BasicRendering renders date picker with dropdown open 1`] = `