refactor(Checkbox): use CSS logical properties instead of physical va…

…lues (#1105)
Endava · Jun 20, 2024 · 8f6cb3f · 8f6cb3f
1 parent 38e9117
commit 8f6cb3f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -2569,7 +2569,7 @@ declare namespace LocalJSX {
          */
         "onBqBlur"?: (event: BqCheckboxCustomEvent<HTMLBqCheckboxElement>) => void;
         /**
-          * Handler to be called when the chebkbox state changes
+          * Handler to be called when the checkbox state changes
          */
         "onBqChange"?: (event: BqCheckboxCustomEvent<{ checked: boolean }>) => void;
         /**

diff --git a/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.stories.tsx b/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.stories.tsx
@@ -128,7 +128,7 @@ export const Indeterminate: Story = {
           <bq-checkbox value="all" name="all-interests" background-on-hover @bqChange=${allCheckboxChange}>
             Interests
           </bq-checkbox>
-          <div style="display: flex; flex-direction: column; margin-left: 24px;">
+          <div style="display: flex; flex-direction: column; margin-inline-start: 24px;">
             <bq-checkbox value="music" name="interest" background-on-hover @bqChange=${interestCheckboxChange}>
               Music
             </bq-checkbox>

diff --git a/packages/beeq/src/components/checkbox/bq-checkbox.tsx b/packages/beeq/src/components/checkbox/bq-checkbox.tsx
@@ -74,7 +74,7 @@ export class BqCheckbox {
   // Requires JSDocs for public API documentation
   // ==============================================
 
-  /** Handler to be called when the chebkbox state changes */
+  /** Handler to be called when the checkbox state changes */
   @Event() bqChange: EventEmitter<{ checked: boolean }>;
 
   /** Handler to be called when the checkbox gets focus */
@@ -178,12 +178,12 @@ export class BqCheckbox {
         part="base"
       >
         <div
-          class="bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3"
+          class="bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3"
           part="control"
         >
           <input
             type="checkbox"
-            class="bq-checkbox__input pointer-events-none absolute m-0 p-0 opacity-0"
+            class="bq-checkbox__input pointer-events-none absolute opacity-0 m-b-0 m-i-0 p-b-0 p-i-0"
             name={!isNil(this.name) ? this.name : undefined}
             checked={this.checked}
             disabled={this.disabled}
@@ -201,7 +201,7 @@ export class BqCheckbox {
             tabindex="0"
           />
           <span
-            class="bq-checkbox__checkbox relative box-border flex h-full w-[var(--bq-checkbox--size)] items-center justify-center"
+            class="bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]"
             part="checkbox"
           >
             {/*
@@ -211,7 +211,7 @@ export class BqCheckbox {
             {this.checked && (
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="absolute h-full w-full text-neutral-white"
+                class="absolute text-neutral-white bs-full is-full"
                 viewBox="0 0 256 256"
               >
                 <path fill="none" d="M0 0h256v256H0z" />
@@ -228,7 +228,7 @@ export class BqCheckbox {
             {!this.checked && this.indeterminate && (
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="absolute h-full w-full text-neutral-white"
+                class="absolute text-neutral-white bs-full is-full"
                 viewBox="0 0 256 256"
                 fill="currentColor"
               >

diff --git a/packages/beeq/src/components/checkbox/readme.md b/packages/beeq/src/components/checkbox/readme.md
@@ -24,7 +24,7 @@
 | Event      | Description                                          | Type                                 |
 | ---------- | ---------------------------------------------------- | ------------------------------------ |
 | `bqBlur`   | Handler to be called when the checkbox loses focus   | `CustomEvent<HTMLBqCheckboxElement>` |
-| `bqChange` | Handler to be called when the chebkbox state changes | `CustomEvent<{ checked: boolean; }>` |
+| `bqChange` | Handler to be called when the checkbox state changes | `CustomEvent<{ checked: boolean; }>` |
 | `bqFocus`  | Handler to be called when the checkbox gets focus    | `CustomEvent<HTMLBqCheckboxElement>` |
 
 

diff --git a/packages/beeq/src/components/checkbox/scss/bq-checkbox.scss b/packages/beeq/src/components/checkbox/scss/bq-checkbox.scss
@@ -9,7 +9,7 @@
 }
 
 .bq-checkbox {
-  @apply box-border inline-flex cursor-pointer select-none rounded-s p-xs transition-colors duration-300 ease-in-out;
+  @apply box-border inline-flex cursor-pointer select-none rounded-s transition-colors duration-300 ease-in-out p-b-xs p-i-xs;
 
   // Default hover state
   &:not(.is-checked),
@@ -66,7 +66,7 @@
 
 // Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)
 .bq-checkbox__checkbox {
-  @apply rounded-[var(--bq-checkbox--border-radius)] border-[length:var(--bq-checkbox--border-width)] border-solid border-icon-primary;
+  @apply rounded-[--bq-checkbox--border-radius] border-[length:--bq-checkbox--border-width] border-solid border-icon-primary;
 }
 
 .bq-checkbox__checkbox,