feat(FluidSelect): adds in FluidSelect component (#12290)

* feat(FluidSelect): scaffold out react files

* feat(FluidSelect): scaffold out sass files

* chore(FluidSelect): update snapshots, add initial tests

* chore(FluidSelect): clean up stories

* feat(FluidSelect): add styles, useContext hooks

* test(e2e): add e2e tests for FluidSelect

* fix(FluidSelect): fix disabled state

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

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;