feat: readonly toggle (#12402)

* feat: readonly toggle * chore: remove unnecessary scss vars * fix: readonly cursor and text selection Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 14, 2022 · 4fd8c24 · 4fd8c24
1 parent 88243d4
commit 4fd8c24
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8457,6 +8457,9 @@ Map {
       "onToggle": Object {
         "type": "func",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "size": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
@@ -111,6 +111,19 @@ describe('Toggle', () => {
         'true'
       );
     });
+
+    it('does not change value when readonly', () => {
+      const onClick = jest.fn();
+      const onToggle = jest.fn();
+      wrapper.rerender(
+        <Toggle {...props} onClick={onClick} onToggle={onToggle} readOnly />
+      );
+
+      expect(onClick).not.toHaveBeenCalled();
+      userEvent.click(wrapper.getByRole('switch'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onToggle).not.toHaveBeenCalled();
+    });
   });
 
   describe('emits events as expected', () => {

diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js
@@ -22,6 +22,7 @@ export function Toggle({
   labelText,
   onClick,
   onToggle,
+  readOnly,
   size = 'md',
   toggled,
   ...other
@@ -34,8 +35,9 @@ export function Toggle({
   });
 
   function handleClick(e) {
-    setChecked(!checked);
-
+    if (!readOnly) {
+      setChecked(!checked);
+    }
     if (onClick) {
       onClick(e);
     }
@@ -48,6 +50,7 @@ export function Toggle({
     `${prefix}--toggle`,
     {
       [`${prefix}--toggle--disabled`]: disabled,
+      [`${prefix}--toggle--readonly`]: readOnly,
     },
     className
   );
@@ -151,6 +154,11 @@ Toggle.propTypes = {
    */
   onToggle: PropTypes.func,
 
+  /**
+   * Whether the toggle should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
    */

diff --git a/packages/styles/scss/components/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
@@ -126,6 +126,10 @@
     visibility: visible;
   }
 
+  // ----------------------------------------
+  // disabled
+  // ----------------------------------------
+
   .#{$prefix}--toggle--disabled .#{$prefix}--toggle__appearance {
     cursor: not-allowed;
   }
@@ -147,6 +151,35 @@
     fill: button.$button-disabled;
   }
 
+  // ----------------------------------------
+  // readonly
+  // ----------------------------------------
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__appearance {
+    cursor: default;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__switch {
+    border: 1px solid $icon-disabled;
+    background-color: transparent;
+
+    &::before {
+      top: rem(2px);
+      left: rem(2px);
+      background-color: $text-primary;
+    }
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
+    top: rem(5px);
+    right: rem(4px);
+    fill: $background;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
+    cursor: text;
+    user-select: text;
+  }
+
   // HCM
 
   .#{$prefix}--toggle__switch,