feat(styles): add Display Only Mode for Checkbox [ci visual]

SAP · Jul 11, 2023 · 8659014 · 8659014
1 parent 9ec9edc
commit 8659014
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 1 deletion.
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
@@ -139,7 +139,7 @@
         }
 
         //set the indeterminate state of checkbox - tristate for checkbox examples
-        var triStateCheckboxes = ['Ai4ez613', 'Ai4ez613i1', 'Ai4ez613i2', 'Ai4ez613i3', 'Ai4ez613i4', 'Ai4ez613i5', 'Ai4ez613i6', 'Ai4ez613i7', 'Ai4ez643', 'Ai4ez613c', 'Ai4ez643c', 'Ai4ez1', 'Ai4ez613i6cc'];
+        var triStateCheckboxes = ['Ai4ez613', 'Ai4ez613i1', 'Ai4ez613i2', 'Ai4ez613i3', 'Ai4ez613i4', 'Ai4ez613i5', 'Ai4ez613i6', 'Ai4ez613i7', 'Ai4ez643', 'Ai4ez613c', 'Ai4ez643c', 'Ai4ez1', 'Ai4ez613i6cc', 'Ai4ez614ldo'];
         for (var i = 0; i < triStateCheckboxes.length; i++) {
             const triStateCheckbox = document.getElementById(triStateCheckboxes[i]);
             if (triStateCheckbox) {

diff --git a/packages/styles/src/checkbox.scss b/packages/styles/src/checkbox.scss
@@ -199,6 +199,61 @@ $blockCheckmark: #{$fd-namespace}-checkbox__checkmark;
     }
   }
 
+  &.is-display {
+    @include fd-checkbox-label() {
+      --fdCheckbox_Check_Mark_Color: var(--sapTextColor);
+
+      gap: 0.5rem;
+
+      @include fd-hover() {
+        .#{$blockCheckmark} {
+          --fdCheckbox_Check_Mark_Color: var(--sapTextColor);
+          --fdCheckbox_Hover_Background_Color: transparent;
+        }
+      }
+    }
+
+    @include fd-checkbox-label-before() {
+      --fdCheckbox_Background_Color: transparent;
+      --fdCheckbox_Dimensions: 1rem;
+
+      border: none;
+
+      &::before {
+        @include fd-flex-center();
+        @include fd-set-width(1rem);
+        @include fd-set-height(1rem);
+
+        content: "\e19a";
+        font-size: 1rem;
+      }
+    }
+
+    &:checked {
+      @include fd-checkbox-label-before() {
+        &::before {
+          content: "\e03f";
+          font-size: 1rem;
+        }
+      }
+    }
+
+    &:indeterminate {
+      @include fd-checkbox-label-before() {
+        &::before {
+          content: "\e295";
+          font-size: 1rem;
+        }
+
+        &::after {
+          content: "";
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+
   @include fd-focus() {
     @include fd-checkbox-label() {
       @include fd-form-radio-focus(var(--fdCheckbox_Focus_Outline_Offset), var(--fdCheckbox_Padding), var(--fdCheckbox_Outline_Border_Radius));

diff --git a/packages/styles/stories/Components/Forms/checkbox/checkbox.stories.js b/packages/styles/stories/Components/Forms/checkbox/checkbox.stories.js
@@ -451,4 +451,51 @@ TextTruncation.parameters = {
         `
     }
   }
+};
+
+export const DisplayOnly = () => `
+${localStyles}
+<fieldset class="fd-fieldset">
+    <legend class="fd-fieldset__legend">Display Only</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="checkbox" class="fd-checkbox is-display" id="Ai4ez611lwdo">
+            <label class="fd-checkbox__label" for="Ai4ez611lwdo" style="max-width: 400px;">
+                <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
+                <div class="fd-checkbox__label-container">
+                    <span class="fd-checkbox__text">Unchecked Icon</span>
+                </div>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="checkbox" class="fd-checkbox is-display" id="Ai4ez612lwdo" checked>
+            <label class="fd-checkbox__label" for="Ai4ez612lwdo" style="max-width: 400px;">
+                <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
+                <div class="fd-checkbox__label-container">
+                    <span class="fd-checkbox__text">Checked Icon</span>
+                </div>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="checkbox" class="fd-checkbox is-display" id="Ai4ez614ldo">
+            <label class="fd-checkbox__label" for="Ai4ez614ldo" style="max-width: 400px;">
+                <span class="fd-checkbox__checkmark" aria-hidden="true"></span>
+                <div class="fd-checkbox__label-container">
+                    <span class="fd-checkbox__text">Tri-state</span>
+                </div>
+            </label>
+        </div>
+    </div>
+</fieldset>
+`;
+DisplayOnly.parameters = {
+  docs: {
+    story: {
+      iframeHeight: 330
+    },
+    description: {
+      story: `In the Display Only Mode, the checkbox is replaced by two icons to represent the checked and unchecked states. The control becomes a simple icon. <br>Add the <code>.is-display</code> modifier class to <code>.fd-checkbox</code> for Display Only Mode.
+        `
+    }
+  }
 };
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -7550,6 +7550,50 @@ exports[`Check stories > Components/Forms/Checkbox > Story Default > Should matc
 "
 `;
 
+exports[`Check stories > Components/Forms/Checkbox > Story DisplayOnly > Should match snapshot 1`] = `
+"
+
+<style>
+    .checkbox-example-container > fieldset {
+        max-width: 100%;
+    }
+</style>
+
+<fieldset class=\\"fd-fieldset\\">
+    <legend class=\\"fd-fieldset__legend\\">Display Only</legend>
+    <div class=\\"fd-form-group\\">
+        <div class=\\"fd-form-item\\">
+            <input type=\\"checkbox\\" class=\\"fd-checkbox is-display\\" id=\\"Ai4ez611lwdo\\">
+            <label class=\\"fd-checkbox__label\\" for=\\"Ai4ez611lwdo\\" style=\\"max-width: 400px;\\">
+                <span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span>
+                <div class=\\"fd-checkbox__label-container\\">
+                    <span class=\\"fd-checkbox__text\\">Unchecked Icon</span>
+                </div>
+            </label>
+        </div>
+        <div class=\\"fd-form-item\\">
+            <input type=\\"checkbox\\" class=\\"fd-checkbox is-display\\" id=\\"Ai4ez612lwdo\\" checked>
+            <label class=\\"fd-checkbox__label\\" for=\\"Ai4ez612lwdo\\" style=\\"max-width: 400px;\\">
+                <span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span>
+                <div class=\\"fd-checkbox__label-container\\">
+                    <span class=\\"fd-checkbox__text\\">Checked Icon</span>
+                </div>
+            </label>
+        </div>
+        <div class=\\"fd-form-item\\">
+            <input type=\\"checkbox\\" class=\\"fd-checkbox is-display\\" id=\\"Ai4ez614ldo\\">
+            <label class=\\"fd-checkbox__label\\" for=\\"Ai4ez614ldo\\" style=\\"max-width: 400px;\\">
+                <span class=\\"fd-checkbox__checkmark\\" aria-hidden=\\"true\\"></span>
+                <div class=\\"fd-checkbox__label-container\\">
+                    <span class=\\"fd-checkbox__text\\">Tri-state</span>
+                </div>
+            </label>
+        </div>
+    </div>
+</fieldset>
+"
+`;
+
 exports[`Check stories > Components/Forms/Checkbox > Story Inline > Should match snapshot 1`] = `
 "<fieldset class=\\"fd-fieldset\\">
     <legend class=\\"fd-fieldset__legend\\">Inline checkboxes</legend>