Merge pull request #1758 from Shopify/disable-choicelist

[ChoiceList] Disable all choices at once

UNRELEASED.md

@@ -14,6 +14,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added support for disabling all choices in `ChoiceList` ([#1758](https://github.com/Shopify/polaris-react/pull/1758))
+
 ### Bug fixes
 
 - Fixed a regression introduced in #1247, where icons inside of `Link` would always be recolored to match the text color ([#1729](https://github.com/Shopify/polaris-react/pull/1729))

src/components/ChoiceList/ChoiceList.tsx

@@ -40,6 +40,8 @@ export interface BaseProps {
   titleHidden?: boolean;
   /** Display an error message */
   error?: Error;
+  /** Disable all choices **/
+  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}

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);
+      });
+    });
+  });
 });