feat(FluidDropdown): implement FluidDropdown (#12128)

* feat(FluidDropdown): initial creation and styles * feat(FluidDropdown): add condensed, warning styles * docs(FluidDropdown): update PropType definitions * test(FluidDropdown): add e2e, api tests * chore(snapshot): update snapshots * refactor(FluidDropdown): move styles to fluid-list-box to share styles * feat(FluidDropdownSkeleton): add skeleton styles * chore(storybook): set same size for all stories * chore(export): add scss export for new fluid components to react package * fix(FluidDropdown): update divider styles
carbon-design-system · Oct 6, 2022 · 5e9d42e · 5e9d42e
1 parent b854ef4
commit 5e9d42e
Show file tree

Hide file tree

Showing 43 changed files with 1,252 additions and 8 deletions.
diff --git a/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js b/e2e/components/FluidDropdown/FluidDropdown-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('FluidDropdown', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid dropdown @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidDropdown',
+          id: 'experimental-unstable-fluiddropdown--default',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidDropdown',
+      id: 'experimental-unstable-fluiddropdown--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidDropdown');
+  });
+});
diff --git a/packages/carbon-components-react/scss/components/fluid-dropdown/_fluid-dropdown.scss b/packages/carbon-components-react/scss/components/fluid-dropdown/_fluid-dropdown.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-dropdown/fluid-dropdown';
diff --git a/packages/carbon-components-react/scss/components/fluid-dropdown/_index.scss b/packages/carbon-components-react/scss/components/fluid-dropdown/_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-dropdown';
diff --git a/packages/carbon-components-react/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/carbon-components-react/scss/components/fluid-list-box/_fluid-list-box.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-list-box/fluid-list-box';
diff --git a/packages/carbon-components-react/scss/components/fluid-list-box/_index.scss b/packages/carbon-components-react/scss/components/fluid-list-box/_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-list-box';
diff --git a/packages/carbon-components-react/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/carbon-components-react/scss/components/fluid-text-area/_fluid-text-area.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-text-area/fluid-text-area';
diff --git a/packages/carbon-components-react/scss/components/fluid-text-area/_index.scss b/packages/carbon-components-react/scss/components/fluid-text-area/_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-text-area';
diff --git a/packages/carbon-components-react/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/carbon-components-react/scss/components/fluid-text-input/_fluid-text-input.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-text-input/fluid-text-input';
diff --git a/packages/carbon-components-react/scss/components/fluid-text-input/_index.scss b/packages/carbon-components-react/scss/components/fluid-text-input/_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-text-input';
diff --git a/packages/carbon-components/scss/components/fluid-dropdown/_fluid-dropdown.scss b/packages/carbon-components/scss/components/fluid-dropdown/_fluid-dropdown.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-dropdown/fluid-dropdown';
diff --git a/packages/carbon-components/scss/components/fluid-dropdown/_index.scss b/packages/carbon-components/scss/components/fluid-dropdown/_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-dropdown';
diff --git a/packages/carbon-components/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/carbon-components/scss/components/fluid-list-box/_fluid-list-box.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-list-box/fluid-list-box';
diff --git a/packages/carbon-components/scss/components/fluid-list-box/_index.scss b/packages/carbon-components/scss/components/fluid-list-box/_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-list-box';
diff --git a/packages/carbon-components/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/carbon-components/scss/components/fluid-text-area/_fluid-text-area.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-text-area/fluid-text-area';
diff --git a/packages/carbon-components/scss/components/fluid-text-area/_index.scss b/packages/carbon-components/scss/components/fluid-text-area/_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-text-area';
diff --git a/packages/carbon-components/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/carbon-components/scss/components/fluid-text-input/_fluid-text-input.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-text-input/fluid-text-input';
diff --git a/packages/carbon-components/scss/components/fluid-text-input/_index.scss b/packages/carbon-components/scss/components/fluid-text-input/_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-text-input';
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9129,6 +9129,111 @@ Map {
       },
     },
   },
+  "unstable__FluidDropdown" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "direction": Object {
+        "args": Array [
+          Array [
+            "top",
+            "bottom",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "id": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "initialSelectedItem": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "object",
+            },
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "isCondensed": Object {
+        "type": "bool",
+      },
+      "itemToElement": Object {
+        "type": "func",
+      },
+      "itemToString": Object {
+        "type": "func",
+      },
+      "items": Object {
+        "isRequired": true,
+        "type": "array",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "renderSelectedItem": Object {
+        "type": "func",
+      },
+      "selectedItem": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "object",
+            },
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "number",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "titleText": Object {
+        "type": "node",
+      },
+      "translateWithId": Object {
+        "type": "func",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+    "render": [Function],
+  },
+  "unstable__FluidDropdownSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__FluidTextArea" => Object {
     "propTypes": Object {
       "className": Object {
@@ -9208,6 +9313,13 @@ Map {
       },
     },
   },
+  "unstable__FluidTextAreaSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__FluidTextInput" => Object {
     "propTypes": Object {
       "className": Object {

diff --git a/packages/react/scss/components/fluid-dropdown/_fluid-dropdown.scss b/packages/react/scss/components/fluid-dropdown/_fluid-dropdown.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-dropdown/fluid-dropdown';
diff --git a/packages/react/scss/components/fluid-dropdown/_index.scss b/packages/react/scss/components/fluid-dropdown/_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-dropdown';
diff --git a/packages/react/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/react/scss/components/fluid-list-box/_fluid-list-box.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-list-box/fluid-list-box';
diff --git a/packages/react/scss/components/fluid-list-box/_index.scss b/packages/react/scss/components/fluid-list-box/_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-list-box';
diff --git a/packages/react/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/react/scss/components/fluid-text-area/_fluid-text-area.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-text-area/fluid-text-area';
diff --git a/packages/react/scss/components/fluid-text-area/_index.scss b/packages/react/scss/components/fluid-text-area/_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-text-area';
diff --git a/packages/react/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/react/scss/components/fluid-text-input/_fluid-text-input.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-text-input/fluid-text-input';