feat(FluidSelect): adds in FluidSelect component

e2e/components/FluidSelect/FluidSelect-test.e2e.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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('FluidSelect', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid select @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidSelect',
+          id: 'experimental-unstable-fluidselect--default',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidSelect',
+      id: 'experimental-unstable-fluidselect--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidSelect');
+  });
+});

packages/carbon-components-react/scss/components/fluid-select/_fluid-select.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select/fluid-select';

packages/carbon-components-react/scss/components/fluid-select/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select';

packages/carbon-components/scss/components/fluid-select/_fluid-select.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select/fluid-select';

packages/carbon-components/scss/components/fluid-select/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select';

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9308,6 +9308,53 @@ Map {
       },
     },
   },
+  "unstable__FluidSelect" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "defaultValue": Object {
+        "type": "any",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "id": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "labelText": Object {
+        "type": "node",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+    "render": [Function],
+  },
+  "unstable__FluidSelectSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__FluidTextArea" => Object {
     "propTypes": Object {
       "className": Object {

packages/react/scss/components/fluid-select/_fluid-select.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select/fluid-select';

packages/react/scss/components/fluid-select/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-select';

packages/react/src/__tests__/index-test.js

@@ -231,6 +231,8 @@ describe('Carbon Components React', () => {
         "unstable_TextDirection",
         "unstable__FluidDropdown",
         "unstable__FluidDropdownSkeleton",
+        "unstable__FluidSelect",
+        "unstable__FluidSelectSkeleton",
         "unstable__FluidTextArea",
         "unstable__FluidTextAreaSkeleton",
         "unstable__FluidTextInput",

packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+
+const FluidSelectSkeleton = ({ className, ...rest }) => {
+  const prefix = usePrefix();
+  const wrapperClasses = cx(
+    className,
+    `${prefix}--skeleton`,
+    `${prefix}--list-box`
+  );
+
+  return (
+    <div className={`${prefix}--list-box__wrapper--fluid`}>
+      <div className={wrapperClasses} {...rest}>
+        <span className={`${prefix}--list-box__label`} />
+        <div className={`${prefix}--list-box__field`} />
+      </div>
+    </div>
+  );
+};
+
+FluidSelectSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+};
+
+export default FluidSelectSkeleton;

packages/react/src/components/FluidSelect/FluidSelect.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 Select from '../Select';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+const FluidSelect = React.forwardRef(function FluidSelect(
+  { className, children, ...other },
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(`${prefix}--select--fluid`, className);
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <Select ref={ref} className={classNames} {...other}>
+        {children}
+      </Select>
+    </FormContext.Provider>
+  );
+});
+
+FluidSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes.any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * 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 FluidSelect;