[ChoiceList] Disable all choices at once

Shopify · Jun 28, 2019 · 8a26d2e · 8a26d2e
1 parent 22bb8e8
commit 8a26d2e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/components/ChoiceList/ChoiceList.tsx b/src/components/ChoiceList/ChoiceList.tsx
@@ -40,6 +40,8 @@ export interface BaseProps {
   titleHidden?: boolean;
   /** Display an error message */
   error?: Error;
+  /** Disable all radio buttons **/
+  disabled?: boolean;
   /** Callback when the selected choices change */
   onChange?(selected: string[], name: string): void;
 }
@@ -57,6 +59,7 @@ function ChoiceList({
   selected,
   onChange = noop,
   error,
+  disabled = false,
   name = getUniqueID(),
 }: CombinedProps) {
   // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
@@ -75,7 +78,7 @@ function ChoiceList({
   ) : null;
 
   const choicesMarkup = choices.map((choice) => {
-    const {value, label, helpText, disabled} = choice;
+    const {value, label, helpText, disabled: choiceDisabled} = choice;
 
     function handleChange(checked: boolean) {
       onChange(
@@ -98,7 +101,7 @@ function ChoiceList({
           name={finalName}
           value={value}
           label={label}
-          disabled={disabled}
+          disabled={choiceDisabled || disabled}
           checked={choiceIsSelected(choice, selected)}
           helpText={helpText}
           onChange={handleChange}

diff --git a/src/components/ChoiceList/tests/ChoiceList.test.tsx b/src/components/ChoiceList/tests/ChoiceList.test.tsx
@@ -9,6 +9,7 @@ describe('<ChoiceList />', () => {
     label: string;
     value: string;
     helpText?: React.ReactNode;
+    disabled?: boolean;
     renderChildren?(): React.ReactNode;
   })[];
 
@@ -366,4 +367,28 @@ describe('<ChoiceList />', () => {
       expect(element.find(InlineError)).toHaveLength(0);
     });
   });
+
+  describe('disabled', () => {
+    it('disables choices', () => {
+      const choiceElements = shallowWithAppProvider(
+        <ChoiceList selected={[]} choices={choices} disabled />,
+      ).find(RadioButton);
+
+      choiceElements.forEach((choiceElement) => {
+        expect(choiceElement.prop('disabled')).toBe(true);
+      });
+    });
+
+    it('preserves disabled choices', () => {
+      choices = [choices[0], choices[1], {...choices[2], disabled: true}];
+
+      const choiceElements = shallowWithAppProvider(
+        <ChoiceList selected={[]} choices={choices} disabled />,
+      ).find(RadioButton);
+
+      choiceElements.forEach((choiceElement) => {
+        expect(choiceElement.prop('disabled')).toBe(true);
+      });
+    });
+  });
 });