✨ feat(switch): update style of checkbox variant (#1462)

* Create PR for #1453 * feat(checkbox): add check icon for selected state * update base images * chore: fix a11y test --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]> Co-authored-by: hirsch88 <[email protected]>
baloise · Sep 16, 2024 · 8b1f94a · 8b1f94a
1 parent 6531a07
commit 8b1f94a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 0 deletions.
diff --git a/.changeset/nervous-peaches-smash.md b/.changeset/nervous-peaches-smash.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**checkbox**: add check icon for selected state
diff --git a/.../visual/bal-checkbox.visual.cy.ts/checkbox-long-label-select-button-desktop.png b/.../visual/bal-checkbox.visual.cy.ts/checkbox-long-label-select-button-desktop.png
diff --git a/...ess/snapshots/base/visual/bal-checkbox.visual.cy.ts/checkbox-switch-desktop.png b/...ess/snapshots/base/visual/bal-checkbox.visual.cy.ts/checkbox-switch-desktop.png
diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox.tsx b/packages/core/src/components/bal-checkbox/bal-checkbox.tsx
@@ -418,6 +418,7 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
     const block = BEM.block('radio-checkbox')
     const inputEl = block.element('input')
     const labelEl = block.element('label')
+    const iconEl = block.element('icon')
     const labelTextEl = labelEl.element('text')
 
     const focused = this.focused && this.buttonTabindex !== -1
@@ -501,6 +502,17 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
             {...labelAttributes}
             data-testid="bal-checkbox-label"
           >
+            {this.interface === 'switch' ? (
+              <bal-icon
+                class={{ ...iconEl.class() }}
+                name="check"
+                color="white"
+                size="x-small"
+                aria-hidden="true"
+              ></bal-icon>
+            ) : (
+              ''
+            )}
             <span
               class={{
                 ...labelTextEl.class(),

diff --git a/packages/core/src/components/bal-checkbox/radio-checkbox.sass b/packages/core/src/components/bal-checkbox/radio-checkbox.sass
@@ -347,6 +347,7 @@ bal-radio .bal-radio-checkbox__label
       left: 0.25rem
       width: 1rem
       height: 1rem
+      z-index: 2
       margin-top: 0.25rem
       transform: translate3d(0, 0, 0)
       transition: left 0.25s ease-out, background 0.25s ease-out
@@ -409,3 +410,13 @@ bal-radio .bal-radio-checkbox__label
       background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before)
     .bal-radio-checkbox__label::after
       background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after)
+
+//
+// swicth check icon when selected
++block(radio-checkbox)
+  +element(icon)
+    position: absolute !important
+    left: 5.5px
+    z-index: 1
+    +modifier(hidden)
+      display: none !important