feat(InputGroup): add disabled prop

This prop disables all nested fields.
kiwicom · Aug 18, 2021 · 61a7f01 · 61a7f01
1 parent c7e35e1
commit 61a7f01
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 1 deletion.
diff --git a/packages/orbit-components/src/InputGroup/InputGroup.stories.js b/packages/orbit-components/src/InputGroup/InputGroup.stories.js
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
-import { text, array, select } from "@storybook/addon-knobs";
+import { text, array, select, boolean } from "@storybook/addon-knobs";
 
 import InputField from "../InputField";
 import Select from "../Select";
@@ -191,6 +191,20 @@ WithError.story = {
   },
 };
 
+export const Disabled = (): React.Node => {
+  const disabled = boolean("Disabled", true);
+  return (
+    <InputGroup disabled={disabled} label="Disabled">
+      <InputField placeholder="a" maxLength={11} />
+      <InputField placeholder="b" maxLength={11} />
+    </InputGroup>
+  );
+};
+
+Disabled.story = {
+  name: "Disabled",
+};
+
 export const Playground = (): React.Node => {
   const label = text("Label", "Phone number");
   const flex = array("Flex", ["1 0 200px", "1 1 100%", "1 0 150px", "0 1 50%"]);

diff --git a/packages/orbit-components/src/InputGroup/README.md b/packages/orbit-components/src/InputGroup/README.md
@@ -26,6 +26,7 @@ Table below contains all types of the props available in InputGroup component.
 | **children** | `React.Node`                |              | The content of the InputGroup, normally **InputField** or **Select**.                                                                                          |
 | dataTest     | `string`                    |              | Optional prop for testing purposes.                                                                                                                            |
 | error        | `React.Node`                |              | The error to display beneath the InputGroup. [See Functional specs](#functional-specs)                                                                         |
+| disabled     | `boolean`                   |              | Whether to disable all nested fields.                                                                                                                          |
 | flex         | `string` or `Array<string>` | `"0 1 auto"` | The flex attribute(s) for children of the InputGroup. [See Functional specs](#functional-specs)                                                                |
 | help         | `React.Node`                |              | The help to display beneath the InputGroup.                                                                                                                    |
 | label        | `Translation`               |              | The label for the InputGroup. [See Functional specs](#functional-specs)                                                                                        |

diff --git a/packages/orbit-components/src/InputGroup/__tests__/index.test.js b/packages/orbit-components/src/InputGroup/__tests__/index.test.js
@@ -75,4 +75,12 @@ describe("InputGroup", () => {
     fireEvent.blur(input);
     expect(onBlur).toHaveBeenCalled();
   });
+  it("should be able to disable children", () => {
+    render(
+      <InputGroup disabled>
+        <InputField />
+      </InputGroup>,
+    );
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
 });
diff --git a/packages/orbit-components/src/InputGroup/index.d.ts b/packages/orbit-components/src/InputGroup/index.d.ts
@@ -17,6 +17,7 @@ interface Props extends Common.Global, Common.SpaceAfter {
   readonly help?: React.ReactNode;
   readonly children: React.ReactNode;
   readonly error?: React.ReactNode;
+  readonly disabled?: boolean;
   readonly onChange?: Event;
   readonly onFocus?: Event;
   readonly onBlur?: Event;

diff --git a/packages/orbit-components/src/InputGroup/index.js b/packages/orbit-components/src/InputGroup/index.js
@@ -172,6 +172,7 @@ const InputGroup = ({
   size = SIZE_OPTIONS.NORMAL,
   help,
   error,
+  disabled,
   dataTest,
   spaceAfter,
   onFocus,
@@ -241,6 +242,7 @@ const InputGroup = ({
           return (
             <StyledChild flex={childFlex}>
               {React.cloneElement(item, {
+                disabled: item.props.disabled || disabled,
                 size,
                 label: undefined,
                 help: undefined,

diff --git a/packages/orbit-components/src/InputGroup/index.js.flow b/packages/orbit-components/src/InputGroup/index.js.flow
@@ -16,6 +16,7 @@ export type Props = {|
   +help?: React.Node,
   +children: React.Node,
   +error?: React.Node,
+  +disabled?: boolean,
   +onChange?: (
     ev: SyntheticInputEvent<HTMLInputElement> | SyntheticInputEvent<HTMLSelectElement>,
   ) => void | Promise<any>,