feat(FluidTextInput): create unstable__FluidTextInput component (#1…

…1971) * feat(FluidTextInput): create FluidTextInput component * test(snapshot): update snapshots * chore(fluid-input-text): update fluid input text styles * chore(test): add test stories * style(FluidTextInput): adjust tooltip styles, add test story * test(FluidTextInput): add e2e tests * refactor(TextInput): move fluid text input styles to own file * refactor(FluidTextInput): use isFluid context * test(FluidTextInput): add component API tests * chore(FluidTextInput): export under unstable prefix * test(FluidTextInput): update snapshot * chore(FluidTextInput): remove test story Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Sep 1, 2022 · 58b30d3 · 58b30d3
1 parent 3a4f61d
commit 58b30d3
Show file tree

Hide file tree

Showing 13 changed files with 793 additions and 11 deletions.
diff --git a/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js b/e2e/components/FluidTextInput/FluidTextInput-test.e2e.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('FluidTextInput', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid text input @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidTextInput',
+          id: 'experimental-unstable-fluidtextinput--default',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidTextInput',
+      id: 'experimental-unstable-fluidtextinput--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidTextInput');
+  });
+});
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9165,6 +9165,71 @@ Map {
       },
     },
   },
+  "unstable__FluidTextInput" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "defaultValue": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "id": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "labelText": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "onClick": Object {
+        "type": "func",
+      },
+      "placeholder": Object {
+        "type": "string",
+      },
+      "value": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+  },
   "unstable_useContextMenu" => Object {},
   "unstable_useFeatureFlag" => Object {},
   "unstable_useFeatureFlags" => Object {},

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -229,6 +229,7 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__FluidTextInput",
         "unstable_useContextMenu",
         "unstable_useFeatureFlag",
         "unstable_useFeatureFlags",

diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.js b/packages/react/src/components/FluidTextInput/FluidTextInput.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import TextInput from '../TextInput';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+function FluidTextInput({ className, ...other }) {
+  const prefix = usePrefix();
+  const classNames = classnames(`${prefix}--text-input--fluid`, className);
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <TextInput className={classNames} {...other} />
+    </FormContext.Provider>
+  );
+}
+
+FluidTextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+export default FluidTextInput;
diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import FluidTextInput from '../FluidTextInput';
+import {
+  ToggletipLabel,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+} from '../Toggletip';
+import { Information } from '@carbon/icons-react';
+import './test.scss';
+
+export default {
+  title: 'Experimental/unstable__FluidTextInput',
+  component: FluidTextInput,
+};
+
+export const Default = () => (
+  <FluidTextInput labelText="Label" placeholder="Placeholder text" />
+);
+
+const ToggleTip = (
+  <>
+    <ToggletipLabel>Label</ToggletipLabel>
+    <Toggletip align="top-left">
+      <ToggletipButton label="Show information">
+        <Information />
+      </ToggletipButton>
+      <ToggletipContent>
+        <p>Additional field information here.</p>
+      </ToggletipContent>
+    </Toggletip>
+  </>
+);
+
+export const DefaultWithTooltip = () => (
+  <FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
+);
+
+export const Playground = (args) => (
+  <div style={{ width: args.playgroundWidth }}>
+    <FluidTextInput {...args} />
+  </div>
+);
+
+Playground.argTypes = {
+  playgroundWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+    defaultValue: 300,
+  },
+  className: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'test-class',
+  },
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Placeholder text',
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue:
+      'Error message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Label',
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue:
+      'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  value: {
+    control: {
+      type: 'text',
+    },
+  },
+};