Merge pull request #156 from edx/mjloturco/pass-disabled-prop

Pass Disabled prop down in InputText
openedx · Mar 16, 2018 · 03de9b6 · 03de9b6
2 parents afc6b26 + 451a280
commit 03de9b6
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 13 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -4328,6 +4328,68 @@ exports[`Storyshots InputSelect basic usage 1`] = `
   <select
     aria-describedby="error-asInput1"
     className="form-control"
+    disabled={false}
+    id="asInput1"
+    name="fruits"
+    onBlur={[Function]}
+    onChange={[Function]}
+    type="select"
+    value="strawberry"
+  >
+    <option
+      value="apple"
+    >
+      apple
+    </option>
+    <option
+      value="orange"
+    >
+      orange
+    </option>
+    <option
+      value="strawberry"
+    >
+      strawberry
+    </option>
+    <option
+      value="banana"
+    >
+      banana
+    </option>
+  </select>
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
+exports[`Storyshots InputSelect disabled usage 1`] = `
+<div
+  className={
+    Array [
+      "form-group",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    Fruits
+  </label>
+  <select
+    aria-describedby="error-asInput1"
+    className="form-control"
+    disabled={true}
     id="asInput1"
     name="fruits"
     onBlur={[Function]}
@@ -4388,6 +4450,7 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
   <select
     aria-describedby="error-asInput1"
     className="form-control"
+    disabled={false}
     id="asInput1"
     name="new-england-states"
     onBlur={[Function]}
@@ -4458,6 +4521,7 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
   <select
     aria-describedby="error-asInput1"
     className="form-control"
+    disabled={false}
     id="asInput1"
     name="northeast-states"
     onBlur={[Function]}
@@ -4576,6 +4640,7 @@ exports[`Storyshots InputSelect with validation 1`] = `
   <select
     aria-describedby="error-asInput1"
     className="form-control"
+    disabled={false}
     id="asInput1"
     name="color"
     onBlur={[Function]}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "eslint-config-airbnb": "^16.0.0",
     "eslint-config-edx": "^4.0.1",
     "eslint-import-resolver-webpack": "^0.8.1",
-    "eslint-plugin-compat": "^2.1.0",
+    "eslint-plugin-compat": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^5.1.0",
     "eslint-plugin-react": "^7.1.0",
     "extract-text-webpack-plugin": "^3.0.1",

diff --git a/src/InputSelect/InputSelect.stories.jsx b/src/InputSelect/InputSelect.stories.jsx
@@ -90,4 +90,18 @@ storiesOf('InputSelect', module)
         return feedback;
       }}
     />
+  ))
+  .add('disabled usage', () => (
+    <InputSelect
+      name="fruits"
+      label="Fruits"
+      value="strawberry"
+      options={[
+        'apple',
+        'orange',
+        'strawberry',
+        'banana',
+      ]}
+      disabled
+    />
   ));
diff --git a/src/InputSelect/index.jsx b/src/InputSelect/index.jsx
@@ -50,6 +50,7 @@ class Select extends React.Component {
         onChange={props.onChange}
         onBlur={props.onBlur}
         ref={props.inputRef}
+        disabled={props.disabled}
       >
         {options}
       </select>