From 4aa36fda2fb4aecadb7bcbf7e41a03780eef5f10 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Wed, 12 Jun 2024 10:31:49 +0300 Subject: [PATCH 1/3] refactor(Date Picker): use CSS logical properties instead of physical values --- .../_storybook/bq-date-picker.stories.tsx | 4 ++-- .../date-picker/scss/bq-date-picker.scss | 24 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx b/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx index 860fd5547..6e3420e9b 100644 --- a/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx +++ b/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx @@ -146,8 +146,8 @@ const Template = (args: Args) => { ? html` ` diff --git a/packages/beeq/src/components/date-picker/scss/bq-date-picker.scss b/packages/beeq/src/components/date-picker/scss/bq-date-picker.scss index 1623bf7ad..2808ab88a 100644 --- a/packages/beeq/src/components/date-picker/scss/bq-date-picker.scss +++ b/packages/beeq/src/components/date-picker/scss/bq-date-picker.scss @@ -5,7 +5,7 @@ @import './bq-date-picker.variables'; :host { - @apply block w-full; + @apply block is-full; } /* -------------------------------------------------------------------------- */ @@ -13,7 +13,7 @@ /* -------------------------------------------------------------------------- */ .bq-date-picker__label { - @apply mb-[--bq-date-picker--label-margin-bottom] flex flex-grow items-center gap-[--bq-date-picker--gap]; + @apply flex flex-grow items-center gap-[--bq-date-picker--gap] m-be-[--bq-date-picker--label-margin-bottom]; @apply text-[length:--bq-date-picker--label-text-size] text-[color:--bq-date-picker--label-text-color]; } @@ -22,11 +22,11 @@ /* -------------------------------------------------------------------------- */ .bq-date-picker__control { - @apply flex w-full items-center transition-[border-color,box-shadow]; + @apply flex items-center transition-[border-color,box-shadow] is-full; // Border @apply rounded-[--bq-date-picker--border-radius] border-[length:--bq-date-picker--border-width] border-[color:--bq-date-picker--border-color]; // Padding - @apply py-[--bq-date-picker--paddingY] pe-[--bq-date-picker--padding-end] ps-[--bq-date-picker--padding-start]; + @apply pe-[--bq-date-picker--padding-end] ps-[--bq-date-picker--padding-start] p-b-[--bq-date-picker--paddingY]; // Text @apply select-none text-[length:--bq-date-picker--text-size] text-[color:--bq-date-picker--text-color] placeholder:text-[color:--bq-date-picker--text-placeholder-color]; // Hover @@ -93,7 +93,7 @@ .bq-date-picker__control--input { @apply flex-auto cursor-[inherit] select-none appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit]; - @apply m-0 min-h-[--bq-date-picker--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none; + @apply border-none min-bs-[--bq-date-picker--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none; } /* -------------------------------------------------------------------------- */ @@ -107,7 +107,7 @@ --bq-ring-offset-width: initial; --bq-ring-color-focus: initial; - @apply h-auto rounded-xs border-none p-0; + @apply rounded-xs border-none bs-auto p-b-0 p-i-0; } /* -------------------------------------------------------------------------- */ @@ -148,16 +148,16 @@ calendar-multi { } &::part(heading) { - @apply px-xs py-xs2; + @apply p-b-xs2 p-i-xs; } &::part(button) { - @apply rounded-s border-0 bg-transparent p-xs2 transition-colors duration-200; + @apply rounded-s border-0 bg-transparent transition-colors duration-200 p-b-xs2 p-i-xs2; @apply focus-visible:focus hover:bg-hover-ui-primary; } &::part(container) { - @apply bg-[--bq-date-picker--background-color] p-0; + @apply bg-[--bq-date-picker--background-color] p-b-0 p-i-0; } } @@ -166,7 +166,7 @@ calendar-month { --color-accent: var(--bq-ui--brand); &::part(button) { - @apply flex items-center justify-center rounded-s bg-transparent p-0 font-default text-text-primary transition-colors duration-200 ease-in-out; + @apply flex items-center justify-center rounded-s bg-transparent font-default text-text-primary transition-colors duration-200 ease-in-out p-b-0 p-i-0; @apply size-[--bq-date-picker--day-size] focus-visible:focus hover:bg-hover-bg-secondary; } @@ -179,7 +179,7 @@ calendar-month { } &::part(selected) { - @apply rounded-s text-[color:var(--bq-text--alt)]; + @apply rounded-s text-[color:--bq-text--alt]; } &::part(range-inner) { @@ -193,7 +193,7 @@ calendar-month { } &::part(today selected) { - @apply text-[color:var(--bq-text--alt)]; + @apply text-[color:--bq-text--alt]; } &::part(today range-inner) { From d059b5413f34228243b0bc34acaee1114febd6e5 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Thu, 20 Jun 2024 18:27:59 +0300 Subject: [PATCH 2/3] refactor(Date Picker): small update --- packages/beeq/src/components/date-picker/bq-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/date-picker/bq-date-picker.tsx b/packages/beeq/src/components/date-picker/bq-date-picker.tsx index 829de371f..333fc9779 100644 --- a/packages/beeq/src/components/date-picker/bq-date-picker.tsx +++ b/packages/beeq/src/components/date-picker/bq-date-picker.tsx @@ -485,7 +485,7 @@ export class BqDatePicker { {/* Select date picker dropdown */} Date: Mon, 22 Jul 2024 12:06:54 +0300 Subject: [PATCH 3/3] fix(Date picker): wrong utility to the bq-dropdown under the hood --- packages/beeq/src/components/date-picker/bq-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/date-picker/bq-date-picker.tsx b/packages/beeq/src/components/date-picker/bq-date-picker.tsx index 333fc9779..bcf9d196b 100644 --- a/packages/beeq/src/components/date-picker/bq-date-picker.tsx +++ b/packages/beeq/src/components/date-picker/bq-date-picker.tsx @@ -485,7 +485,7 @@ export class BqDatePicker { {/* Select date picker dropdown */}