Form: implement readonly state on Checkbox, Radio and Toggle inputs

element-hq · Oct 23, 2023 · cf24035 · cf24035
1 parent 7244fc8
commit cf24035
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 14 deletions.
diff --git a/src/components/Form/Controls/Checkbox/Checkbox.module.css b/src/components/Form/Controls/Checkbox/Checkbox.module.css
@@ -71,36 +71,49 @@ limitations under the License.
   background: var(--cpd-color-bg-canvas-disabled);
 }
 
+.input[readonly] {
+  pointer-events: none;
+}
+
+.input[readonly] + .ui {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
 .input[disabled]:checked + .ui {
   border-color: var(--cpd-color-bg-action-primary-disabled);
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
+.input[readonly]:checked + .ui {
+  color: var(--cpd-color-icon-secondary);
+}
+
 @media (hover) {
-  .input:not([disabled], :checked):hover + .ui {
+  .input:not([disabled], [readonly], :checked):hover + .ui {
     color: var(--cpd-color-icon-quaternary);
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 
-  .input:not([disabled]):checked:hover + .ui {
+  .input:not([disabled], [readonly]):checked:hover + .ui {
     border-color: var(--cpd-color-bg-action-primary-hovered);
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 
-  .input[data-invalid]:not([disabled]):checked:hover + .ui {
+  .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-.input[data-invalid]:not([disabled], :checked) + .ui {
+.input[data-invalid]:not([disabled], :checked, [readonly]) + .ui {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-.input[data-invalid]:not([disabled]):checked + .ui {
+.input[data-invalid]:not([disabled], [readonly]):checked + .ui {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
diff --git a/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx b/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx
@@ -95,6 +95,26 @@ export const DisabledChecked: Story = {
   },
 };
 
+export const ReadonlyUnchecked: Story = {
+  args: { readOnly: true },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2457-24843",
+    },
+  },
+};
+
+export const ReadonlyChecked: Story = {
+  args: { defaultChecked: true, readOnly: true },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2457-24844",
+    },
+  },
+};
+
 export const InvalidUnchecked: Story = {
   args: { invalid: true },
   parameters: {

diff --git a/src/components/Form/Controls/Radio/Radio.module.css b/src/components/Form/Controls/Radio/Radio.module.css
@@ -71,6 +71,15 @@ limitations under the License.
   outline-offset: 1px;
 }
 
+.input[readonly] {
+  pointer-events: none;
+}
+
+.input[readonly] + .ui {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
 .input[disabled] + .ui {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
@@ -81,34 +90,38 @@ limitations under the License.
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
+.input[readonly]:checked + .ui::after {
+  background-color: var(--cpd-color-icon-secondary);
+}
+
 @media (hover) {
-  .input:not([disabled], :checked):hover + .ui {
+  .input:not([disabled], [readonly], :checked):hover + .ui {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 
-  .input:not([disabled], :checked):hover + .ui::after {
+  .input:not([disabled], [readonly], :checked):hover + .ui::after {
     background: var(--cpd-color-icon-quaternary);
   }
 
-  .input:not([disabled]):checked:hover + .ui {
+  .input:not([disabled], [readonly]):checked:hover + .ui {
     border-color: var(--cpd-color-bg-action-primary-hovered);
     background: var(--cpd-color-bg-action-primary-hovered);
   }
 
-  .input[data-invalid]:not([disabled]):checked:hover + .ui {
+  .input[data-invalid]:not([disabled], [readonly]):checked:hover + .ui {
     border-color: var(--cpd-color-bg-critical-hovered);
     background: var(--cpd-color-bg-critical-hovered);
   }
 }
 
-.input[data-invalid]:not([disabled], :checked) + .ui {
+.input[data-invalid]:not([disabled], [readonly], :checked) + .ui {
   border-color: var(--cpd-color-border-critical-primary);
 }
 
-.input[data-invalid]:not([disabled]):checked + .ui {
+.input[data-invalid]:not([disabled], [readonly]):checked + .ui {
   background-color: var(--cpd-color-bg-critical-primary);
   border-color: var(--cpd-color-bg-critical-primary);
 }
diff --git a/src/components/Form/Controls/Radio/Radio.stories.tsx b/src/components/Form/Controls/Radio/Radio.stories.tsx
@@ -95,6 +95,26 @@ export const DisabledChecked: Story = {
   },
 };
 
+export const ReadonlyUnchecked: Story = {
+  args: { readOnly: true },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2448-2090",
+    },
+  },
+};
+
+export const ReadonlyChecked: Story = {
+  args: { defaultChecked: true, readOnly: true },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2448-2091",
+    },
+  },
+};
+
 export const InvalidUnchecked: Story = {
   args: { invalid: true },
   parameters: {

diff --git a/src/components/Form/Controls/Toggle/Toggle.module.css b/src/components/Form/Controls/Toggle/Toggle.module.css
@@ -51,7 +51,7 @@ limitations under the License.
   transition-property: background-color, border-color;
 }
 
-:checked + .ui {
+.input:checked + .ui {
   background: var(--cpd-color-bg-action-primary-rest);
   border-color: var(--cpd-color-bg-action-primary-rest);
 }
@@ -93,6 +93,19 @@ ring after a simple click */
   border-color: var(--cpd-color-bg-action-primary-hovered);
 }
 
+.input[readonly] {
+  pointer-events: none;
+}
+
+.input[readonly] + .ui {
+  border-color: var(--cpd-color-border-interactive-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.input[readonly] + .ui::after {
+  background: var(--cpd-color-icon-secondary);
+}
+
 .input[disabled] + .ui {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
@@ -102,6 +115,15 @@ ring after a simple click */
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
+.input[readonly]:checked + .ui {
+  border-color: var(--cpd-color-icon-secondary);
+  background: var(--cpd-color-icon-secondary);
+}
+
+.input[readonly]:checked + .ui::after {
+  background: var(--cpd-color-icon-on-solid-primary);
+}
+
 .input[disabled]:checked + .ui {
   background: var(--cpd-color-bg-action-primary-disabled);
   border-color: var(--cpd-color-bg-action-primary-disabled);
@@ -112,14 +134,14 @@ ring after a simple click */
 }
 
 @media (hover) {
-  .input:not(:checked, [disabled]):hover + .ui {
+  .input:not(:checked, [disabled], [readonly]):hover + .ui {
     border-color: var(--cpd-color-border-interactive-hovered);
 
     /** TODO: have the shadow in the design tokens */
     box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
   }
 }
 
-.input:not(:checked, [disabled]):active + .ui {
+.input:not(:checked, [disabled], [readonly]):active + .ui {
   border-color: var(--cpd-color-border-interactive-hovered);
 }
diff --git a/src/components/Form/Controls/Toggle/Toggle.stories.tsx b/src/components/Form/Controls/Toggle/Toggle.stories.tsx
@@ -78,6 +78,31 @@ export const DisabledChecked: Story = {
   },
 };
 
+export const ReadonlyUnchecked: Story = {
+  args: {
+    readOnly: true,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2457-26212",
+    },
+  },
+};
+
+export const ReadonlyChecked: Story = {
+  args: {
+    readOnly: true,
+    defaultChecked: true,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=2457-26215",
+    },
+  },
+};
+
 export const Focused: Story = {
   args: {
     autoFocus: true,