refactor(Input): use CSS logical properties instead of physical values

Endava · Jun 20, 2024 · d37a0c4 · d37a0c4
1 parent 33b2214
commit d37a0c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/beeq/src/components/input/_storybook/bq-input.stories.tsx b/packages/beeq/src/components/input/_storybook/bq-input.stories.tsx
@@ -96,7 +96,7 @@ const Template = (args: Args) => {
   const label = !args.optionalLabel
     ? labelTemplate
     : html`
-        <div slot="label" class="flex flex-1">
+        <div slot="label" class="flex flex-1 items-center">
           ${labelTemplate}
           <span class="text-text-secondary">Optional</span>
         </div>
@@ -105,7 +105,7 @@ const Template = (args: Args) => {
     ? html`
         <style>
           bq-input {
-            width: 75vw;
+            inline-size: 75vw;
           }
         </style>
       `

diff --git a/packages/beeq/src/components/input/scss/bq-input.scss b/packages/beeq/src/components/input/scss/bq-input.scss
@@ -5,20 +5,20 @@
 @import './bq-input.variables';
 
 :host {
-  @apply block w-full;
+  @apply block is-full;
 }
 
 /* -------------------------------------------------------------------------- */
 /*                            Label and Helper text                           */
 /* -------------------------------------------------------------------------- */
 
 .bq-input--label {
-  @apply mb-[--bq-input--label-margin-bottom] flex flex-grow items-center gap-[--var(--bq-input--gap-label)];
+  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];
   @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];
 }
 
 .bq-input--helper-text {
-  @apply mt-[--bq-input--helper-margin-top] text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color];
+  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];
 }
 
 .bq-input--helper-text.validation-error {
@@ -38,11 +38,11 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-input--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-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];
   // Padding
-  @apply py-[--bq-input--paddingY] pe-[--bq-input--padding-end] ps-[--bq-input--padding-start];
+  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];
   // Text
   @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];
   // Hover
@@ -110,7 +110,7 @@
 
 .bq-input--control__input {
   @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
-  @apply m-0 min-h-[--bq-input--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none;
+  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none;
 
   box-shadow: none;
   font-weight: inherit;
@@ -127,7 +127,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;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -136,7 +136,7 @@
 
 .bq-input--control__prefix,
 .bq-input--control__suffix {
-  @apply pointer-events-none flex items-center text-[color:var(--bq-input--text-color)];
+  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];
 }
 
 .bq-input--control__prefix {
@@ -185,5 +185,5 @@ bq-icon,
 .bq-input--control__input::-webkit-datetime-edit-second-field,
 .bq-input--control__input::-webkit-datetime-edit-millisecond-field,
 .bq-input--control__input::-webkit-datetime-edit-meridiem-field {
-  @apply p-0;
+  @apply p-b-0 p-i-0;
 }