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

#1158)
Endava · Jul 23, 2024 · a7852b1 · a7852b1
1 parent 398d92f
commit a7852b1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -3525,6 +3525,9 @@ declare namespace LocalJSX {
         "type"?: TStatusType;
     }
     interface BqStepItem {
+        /**
+          * Callback handler emitted when the step item is clicked
+         */
         "onBqClick"?: (event: BqStepItemCustomEvent<{ target: HTMLBqStepItemElement; value: string }>) => void;
         /**
           * It defines prefix size

diff --git a/packages/beeq/src/components/step-item/bq-step-item.tsx b/packages/beeq/src/components/step-item/bq-step-item.tsx
@@ -53,18 +53,20 @@ export class BqStepItem {
   // Events section
   // Requires JSDocs for public API documentation
   // ==============================================
+
+  /** Callback handler emitted when the step item is clicked */
   @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;
 
   // Component lifecycle events
   // Ordered by their natural call order
   // =====================================
 
-  componentWillLoad() {
+  connectedCallback() {
     this.checkPropValues();
   }
 
   componentDidLoad() {
-    this.checkPropValues();
+    this.handleIconPrefix();
   }
 
   // Listeners
@@ -119,7 +121,7 @@ export class BqStepItem {
           {/* TITLE */}
           <div
             class={{
-              'bq-step-item__content--title pr-xs3 text-m leading-regular text-text-primary': true,
+              'bq-step-item__content--title pe-xs3 text-m leading-regular text-text-primary': true,
               'pointer-events-none': this.isDisabled,
               'text-text-brand': this.isCurrent,
             }}

diff --git a/packages/beeq/src/components/step-item/readme.md b/packages/beeq/src/components/step-item/readme.md
@@ -16,9 +16,9 @@
 
 ## Events
 
-| Event     | Description | Type                                                             |
-| --------- | ----------- | ---------------------------------------------------------------- |
-| `bqClick` |             | `CustomEvent<{ target: HTMLBqStepItemElement; value: string; }>` |
+| Event     | Description                                            | Type                                                             |
+| --------- | ------------------------------------------------------ | ---------------------------------------------------------------- |
+| `bqClick` | Callback handler emitted when the step item is clicked | `CustomEvent<{ target: HTMLBqStepItemElement; value: string; }>` |
 
 
 ## Shadow Parts

diff --git a/packages/beeq/src/components/step-item/scss/bq-step-item.scss b/packages/beeq/src/components/step-item/scss/bq-step-item.scss
@@ -43,7 +43,7 @@
 
 .bq-step-item__prefix.numeric {
   @apply flex items-center justify-center rounded-full;
-  @apply h-[--bq-step-item--prefix-num-size] w-[--bq-step-item--prefix-num-size] bg-[--bq-step-item--prefix-num-bg-color];
+  @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];
   @apply text-m font-semibold leading-regular;
 
   &.small {

diff --git a/packages/beeq/src/components/steps/bq-steps.tsx b/packages/beeq/src/components/steps/bq-steps.tsx
@@ -104,7 +104,7 @@ export class BqSteps {
   // ===================================
 
   render() {
-    const dividerPaddingTop = this.size === 'small' ? 'pt-s' : 'pt-m';
+    const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';
 
     return (
       <div
@@ -114,9 +114,9 @@ export class BqSteps {
       >
         <slot />
         <bq-divider
-          class={`absolute left-0 right-0 -z-10 px-s ${dividerPaddingTop}`}
+          class={`absolute -z-10 inset-ie-0 inset-is-0 p-i-s ${dividerPaddingTop}`}
           stroke-color={this.dividerColor}
-          exportparts="base: divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end"
+          exportparts="base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end"
         />
       </div>
     );