From 5e9d42efb45168687f94f4e626062bffe412c4ad Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 6 Oct 2022 08:49:08 -0400 Subject: [PATCH] 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 --- .../FluidDropdown/FluidDropdown-test.e2e.js | 37 +++ .../fluid-dropdown/_fluid-dropdown.scss | 9 + .../components/fluid-dropdown/_index.scss | 9 + .../fluid-list-box/_fluid-list-box.scss | 9 + .../components/fluid-list-box/_index.scss | 9 + .../fluid-text-area/_fluid-text-area.scss | 9 + .../components/fluid-text-area/_index.scss | 9 + .../fluid-text-input/_fluid-text-input.scss | 9 + .../components/fluid-text-input/_index.scss | 9 + .../fluid-dropdown/_fluid-dropdown.scss | 9 + .../components/fluid-dropdown/_index.scss | 9 + .../fluid-list-box/_fluid-list-box.scss | 9 + .../components/fluid-list-box/_index.scss | 9 + .../fluid-text-area/_fluid-text-area.scss | 9 + .../components/fluid-text-area/_index.scss | 9 + .../fluid-text-input/_fluid-text-input.scss | 9 + .../components/fluid-text-input/_index.scss | 9 + .../__snapshots__/PublicAPI-test.js.snap | 112 +++++++++ .../fluid-dropdown/_fluid-dropdown.scss | 9 + .../components/fluid-dropdown/_index.scss | 9 + .../fluid-list-box/_fluid-list-box.scss | 9 + .../components/fluid-list-box/_index.scss | 9 + .../fluid-text-area/_fluid-text-area.scss | 9 + .../components/fluid-text-area/_index.scss | 9 + .../fluid-text-input/_fluid-text-input.scss | 9 + .../components/fluid-text-input/_index.scss | 9 + packages/react/src/__tests__/index-test.js | 3 + .../react/src/components/Dropdown/Dropdown.js | 25 +- .../FluidDropdown/FluidDropdown.Skeleton.js | 38 +++ .../components/FluidDropdown/FluidDropdown.js | 147 ++++++++++++ .../FluidDropdown/FluidDropdown.stories.js | 180 +++++++++++++++ .../__tests__/FluidDropdown-test.js | 163 +++++++++++++ .../src/components/FluidDropdown/index.js | 10 + .../src/components/FluidTextArea/index.js | 1 + .../react/src/components/ListBox/ListBox.js | 6 +- packages/react/src/index.js | 9 +- .../__snapshots__/styles-test.js.snap | 40 ++++ packages/styles/files.js | 8 + packages/styles/scss/components/_index.scss | 4 +- .../fluid-dropdown/_fluid-dropdown.scss | 22 ++ .../components/fluid-dropdown/_index.scss | 11 + .../fluid-list-box/_fluid-list-box.scss | 217 ++++++++++++++++++ .../components/fluid-list-box/_index.scss | 11 + 43 files changed, 1252 insertions(+), 8 deletions(-) create mode 100644 e2e/components/FluidDropdown/FluidDropdown-test.e2e.js create mode 100644 packages/carbon-components-react/scss/components/fluid-dropdown/_fluid-dropdown.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-dropdown/_index.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-list-box/_fluid-list-box.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-list-box/_index.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-text-area/_fluid-text-area.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-text-area/_index.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-text-input/_fluid-text-input.scss create mode 100644 packages/carbon-components-react/scss/components/fluid-text-input/_index.scss create mode 100644 packages/carbon-components/scss/components/fluid-dropdown/_fluid-dropdown.scss create mode 100644 packages/carbon-components/scss/components/fluid-dropdown/_index.scss create mode 100644 packages/carbon-components/scss/components/fluid-list-box/_fluid-list-box.scss create mode 100644 packages/carbon-components/scss/components/fluid-list-box/_index.scss create mode 100644 packages/carbon-components/scss/components/fluid-text-area/_fluid-text-area.scss create mode 100644 packages/carbon-components/scss/components/fluid-text-area/_index.scss create mode 100644 packages/carbon-components/scss/components/fluid-text-input/_fluid-text-input.scss create mode 100644 packages/carbon-components/scss/components/fluid-text-input/_index.scss create mode 100644 packages/react/scss/components/fluid-dropdown/_fluid-dropdown.scss create mode 100644 packages/react/scss/components/fluid-dropdown/_index.scss create mode 100644 packages/react/scss/components/fluid-list-box/_fluid-list-box.scss create mode 100644 packages/react/scss/components/fluid-list-box/_index.scss create mode 100644 packages/react/scss/components/fluid-text-area/_fluid-text-area.scss create mode 100644 packages/react/scss/components/fluid-text-area/_index.scss create mode 100644 packages/react/scss/components/fluid-text-input/_fluid-text-input.scss create mode 100644 packages/react/scss/components/fluid-text-input/_index.scss create mode 100644 packages/react/src/components/FluidDropdown/FluidDropdown.Skeleton.js create mode 100644 packages/react/src/components/FluidDropdown/FluidDropdown.js create mode 100644 packages/react/src/components/FluidDropdown/FluidDropdown.stories.js create mode 100644 packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js create mode 100644 packages/react/src/components/FluidDropdown/index.js create mode 100644 packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss create mode 100644 packages/styles/scss/components/fluid-dropdown/_index.scss create mode 100644 packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss create mode 100644 packages/styles/scss/components/fluid-list-box/_index.scss diff --git a/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js b/e2e/components/FluidDropdown/FluidDropdown-test.e2e.js new file mode 100644 index 000000000000..b6a7b7a10001 --- /dev/null +++ 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 new file mode 100644 index 000000000000..22af2eade97a --- /dev/null +++ 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 new file mode 100644 index 000000000000..56944b0d1bd5 --- /dev/null +++ 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 new file mode 100644 index 000000000000..99b76d067c99 --- /dev/null +++ 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 new file mode 100644 index 000000000000..88a27713081b --- /dev/null +++ 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 new file mode 100644 index 000000000000..5d4e9a7d4086 --- /dev/null +++ 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 new file mode 100644 index 000000000000..0c30bb68fafd --- /dev/null +++ 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 new file mode 100644 index 000000000000..f450e5231f73 --- /dev/null +++ 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 new file mode 100644 index 000000000000..16b3537dac28 --- /dev/null +++ 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 new file mode 100644 index 000000000000..dbb6ceb75d37 --- /dev/null +++ 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 new file mode 100644 index 000000000000..e5faa6dcbc4a --- /dev/null +++ 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 new file mode 100644 index 000000000000..c08e188d178f --- /dev/null +++ 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 new file mode 100644 index 000000000000..3c6489ca6835 --- /dev/null +++ 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 new file mode 100644 index 000000000000..4d10f344230c --- /dev/null +++ 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 new file mode 100644 index 000000000000..0c2b1b35619d --- /dev/null +++ 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 new file mode 100644 index 000000000000..d1acb5a14cf1 --- /dev/null +++ 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 new file mode 100644 index 000000000000..32086b04ad9b --- /dev/null +++ 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 index af55896fcdfe..b078a5b06886 100644 --- 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 new file mode 100644 index 000000000000..d279e569a1e5 --- /dev/null +++ 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 new file mode 100644 index 000000000000..1607e31f628a --- /dev/null +++ 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 new file mode 100644 index 000000000000..2ddb96bbbaea --- /dev/null +++ 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 new file mode 100644 index 000000000000..65e7bac5b91c --- /dev/null +++ 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 new file mode 100644 index 000000000000..5a1e12e99d8f --- /dev/null +++ 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 new file mode 100644 index 000000000000..3b0885070549 --- /dev/null +++ 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 new file mode 100644 index 000000000000..d40e6532ff96 --- /dev/null +++ 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'; diff --git a/packages/react/scss/components/fluid-text-input/_index.scss b/packages/react/scss/components/fluid-text-input/_index.scss new file mode 100644 index 000000000000..05a1585af267 --- /dev/null +++ b/packages/react/scss/components/fluid-text-input/_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-input'; diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index e1e8b48ed04e..856fc691e02f 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -227,7 +227,10 @@ describe('Carbon Components React', () => { "unstable_Pagination", "unstable_Text", "unstable_TextDirection", + "unstable__FluidDropdown", + "unstable__FluidDropdownSkeleton", "unstable__FluidTextArea", + "unstable__FluidTextAreaSkeleton", "unstable__FluidTextInput", "unstable__FluidTextInputSkeleton", "unstable_useContextMenu", diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index 3dbc84bc5c41..f034e61f0c7b 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -1,11 +1,11 @@ /** - * Copyright IBM Corp. 2016, 2018 + * 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 React, { useRef } from 'react'; +import React, { useRef, useContext, useState } from 'react'; import { useSelect } from 'downshift'; import cx from 'classnames'; import PropTypes from 'prop-types'; @@ -18,6 +18,7 @@ import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox'; import mergeRefs from '../../tools/mergeRefs'; import { useFeatureFlag } from '../FeatureFlags'; import { usePrefix } from '../../internal/usePrefix'; +import { FormContext } from '../FluidForm'; const defaultItemToString = (item) => { if (typeof item === 'string') { @@ -59,6 +60,7 @@ const Dropdown = React.forwardRef(function Dropdown( ref ) { const prefix = usePrefix(); + const { isFluid } = useContext(FormContext); const selectProps = { ...downshiftProps, items, @@ -87,6 +89,8 @@ const Dropdown = React.forwardRef(function Dropdown( const enabled = useFeatureFlag('enable-v11-release'); + const [isFocused, setIsFocused] = useState(false); + const className = cx( `${prefix}--dropdown`, [enabled ? null : containerClassName], @@ -120,17 +124,22 @@ const Dropdown = React.forwardRef(function Dropdown( [`${prefix}--list-box__wrapper--inline`]: inline, [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid, [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid, + [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid, + [`${prefix}--list-box__wrapper--fluid--focus`]: + isFluid && isFocused && !isOpen, } ); // needs to be Capitalized for react to render it correctly const ItemToElement = itemToElement; const toggleButtonProps = getToggleButtonProps(); - const helper = helperText ? ( -
{helperText}
- ) : null; + const helper = + helperText && !isFluid ? ( +
{helperText}
+ ) : null; function onSelectedItemChange({ selectedItem }) { + setIsFocused(false); if (onChange) { onChange({ selectedItem }); } @@ -138,6 +147,10 @@ const Dropdown = React.forwardRef(function Dropdown( const menuItemOptionRefs = useRef(items.map((_) => React.createRef())); + const handleFocus = (evt) => { + setIsFocused(evt.type === 'focus' ? true : false); + }; + return (
{titleText && ( @@ -146,6 +159,8 @@ const Dropdown = React.forwardRef(function Dropdown( )} { + const prefix = usePrefix(); + const wrapperClasses = cx( + className, + `${prefix}--skeleton`, + `${prefix}--list-box` + ); + + return ( +
+
+ +
+
+
+ ); +}; + +FluidDropdownSkeleton.propTypes = { + /** + * Specify an optional className to add. + */ + className: PropTypes.string, +}; + +export default FluidDropdownSkeleton; diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.js b/packages/react/src/components/FluidDropdown/FluidDropdown.js new file mode 100644 index 000000000000..52c3d2deca62 --- /dev/null +++ b/packages/react/src/components/FluidDropdown/FluidDropdown.js @@ -0,0 +1,147 @@ +/** + * 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 Dropdown from '../Dropdown'; +import { usePrefix } from '../../internal/usePrefix'; +import { FormContext } from '../FluidForm/FormContext'; + +const FluidDropdown = React.forwardRef(function FluidDropdown( + { className, isCondensed, ...other }, + ref +) { + const prefix = usePrefix(); + const classNames = classnames( + `${prefix}--list-box__wrapper--fluid`, + className, + { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed } + ); + + return ( + + + + ); +}); + +FluidDropdown.propTypes = { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className: PropTypes.string, + + /** + * Specify the direction of the dropdown. Can be either top or bottom. + */ + direction: PropTypes.oneOf(['top', 'bottom']), + + /** + * Specify whether the `` should be disabled + */ + disabled: PropTypes.bool, + + /** + * Specify a custom `id` for the `` + */ + id: PropTypes.string.isRequired, + + /** + * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings) + * from their collection that are pre-selected + */ + initialSelectedItem: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.number, + ]), + + /** + * Specify if the currently selected value is invalid. + */ + invalid: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText: PropTypes.node, + + /** + * Specify if the `FluidDropdown` should render its menu items in condensed mode + */ + isCondensed: PropTypes.bool, + + /** + * Function to render items as custom components instead of strings. + * Defaults to null and is overridden by a getter + */ + itemToElement: PropTypes.func, + + /** + * Helper function passed to downshift that allows the library to render a + * given item to a string label. By default, it extracts the `label` field + * from a given item to serve as the item label in the list. + */ + itemToString: PropTypes.func, + + /** + * We try to stay as generic as possible here to allow individuals to pass + * in a collection of whatever kind of data structure they prefer + */ + items: PropTypes.array.isRequired, + + /** + * Generic `label` that will be used as the textual representation of what + * this field is for + */ + label: PropTypes.node.isRequired, + + /** + * `onChange` is a utility for this controlled component to communicate to a + * consuming component what kind of internal state changes are occurring. + */ + onChange: PropTypes.func, + + /** + * An optional callback to render the currently selected item as a react element instead of only + * as a string. + */ + renderSelectedItem: PropTypes.func, + + /** + * In the case you want to control the dropdown selection entirely. + */ + selectedItem: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.number, + ]), + + /** + * Provide the title text that will be read by a screen reader when + * visiting this control + */ + titleText: PropTypes.node, + + /** + * Callback function for translating ListBoxMenuIcon SVG title + */ + translateWithId: 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 FluidDropdown; diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js new file mode 100644 index 000000000000..f747737cf06f --- /dev/null +++ b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js @@ -0,0 +1,180 @@ +/** + * 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 React from 'react'; +import { FluidDropdown, FluidDropdownSkeleton } from '../FluidDropdown'; +import { + ToggletipLabel, + Toggletip, + ToggletipButton, + ToggletipContent, +} from '../Toggletip'; +import { Information } from '@carbon/icons-react'; + +export default { + title: 'Experimental/unstable__FluidDropdown', + component: FluidDropdown, +}; + +const items = [ + { + id: 'option-0', + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + id: 'option-1', + text: 'Option 1', + }, + { + id: 'option-2', + text: 'Option 2', + }, + { + id: 'option-3', + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + id: 'option-4', + text: 'Option 4', + }, + { + id: 'option-5', + text: 'Option 5', + }, +]; + +const ToggleTip = ( + <> + Label + + + + + +

Additional field information here.

+ + + +); + +export const Default = () => ( +
+ (item ? item.text : '')} + /> +
+); + +export const Condensed = () => ( +
+ (item ? item.text : '')} + /> +
+); + +export const Playground = (args) => ( +
+ (item ? item.text : '')} + {...args} + /> +
+ (item ? item.text : '')} + /> +
+); + +export const Skeleton = () => ( +
+ +
+); + +Playground.argTypes = { + playgroundWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + defaultValue: 400, + }, + className: { + control: { + type: 'text', + }, + defaultValue: 'test-class', + }, + isCondensed: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + disabled: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + 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.', + }, + label: { + control: { + type: 'text', + }, + defaultValue: 'Choose an option', + }, + titleText: { + 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.', + }, +}; diff --git a/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js new file mode 100644 index 000000000000..dc7202a4a7d9 --- /dev/null +++ b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js @@ -0,0 +1,163 @@ +/** + * 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 { render, screen, cleanup } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { + assertMenuOpen, + assertMenuClosed, + openMenu, + generateItems, + generateGenericItem, +} from '../../ListBox/test-helpers'; +import FluidDropdown from '../FluidDropdown'; + +const prefix = 'cds'; + +describe('FluidDropdown', () => { + let mockProps; + beforeEach(() => { + mockProps = { + id: 'test-fluiddropdown', + items: generateItems(5, generateGenericItem), + onChange: jest.fn(), + label: 'input', + placeholder: 'Filter...', + type: 'default', + }; + }); + + it('should initially render with the menu not open', () => { + render(); + assertMenuClosed(); + }); + + it('should let the user open the menu by clicking on the control', () => { + render(); + openMenu(); + assertMenuOpen(mockProps); + }); + + it('should render with strings as items', () => { + render(); + openMenu(); + + expect(screen.getByText('zar')).toBeInTheDocument(); + expect(screen.getByText('doz')).toBeInTheDocument(); + }); + + it('should render custom item components', () => { + const itemToElement = jest.fn((item) => { + return
{item.label}
; + }); + + render(); + openMenu(); + + expect(itemToElement).toHaveBeenCalled(); + }); + + it('should render selectedItem as an element', () => { + render( + ( +
+ {selectedItem.label} +
+ )} + /> + ); + // custom element should be rendered for the selected item + expect( + document.querySelector('#a-custom-element-for-selected-item') + ).toBeDefined(); + // the title should use the normal itemToString method + + expect(screen.getByText('Item 1')).toBeInTheDocument(); + }); + + describe('title', () => { + it('renders a title', () => { + render(); + expect(screen.getByText('Email Input')).toBeInTheDocument(); + }); + + it('has the expected classes', () => { + render(); + expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`); + }); + }); + + it('should let the user select an option by clicking on the option node', () => { + render(); + openMenu(); + + userEvent.click(screen.getByText('Item 0')); + expect(mockProps.onChange).toHaveBeenCalledTimes(1); + expect(mockProps.onChange).toHaveBeenCalledWith({ + selectedItem: mockProps.items[0], + }); + assertMenuClosed(); + + mockProps.onChange.mockClear(); + + openMenu(); + userEvent.click(screen.getByText('Item 1')); + + expect(mockProps.onChange).toHaveBeenCalledTimes(1); + expect(mockProps.onChange).toHaveBeenCalledWith({ + selectedItem: mockProps.items[1], + }); + }); + + describe('should display initially selected item found in `initialSelectedItem`', () => { + it('using an object type for the `initialSelectedItem` prop', () => { + render( + + ); + + expect(screen.getByText(mockProps.items[0].label)).toBeInTheDocument(); + }); + + it('using a string type for the `initialSelectedItem` prop', () => { + // Replace the 'items' property in mockProps with a list of strings + mockProps = { + ...mockProps, + items: ['1', '2', '3'], + }; + + render( + + ); + + expect(screen.getByText(mockProps.items[1])).toBeInTheDocument(); + }); + }); + + describe('Component API', () => { + afterEach(cleanup); + + it('should accept a `ref` for the underlying button element', () => { + const ref = React.createRef(); + render(); + expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox'); + }); + }); +}); diff --git a/packages/react/src/components/FluidDropdown/index.js b/packages/react/src/components/FluidDropdown/index.js new file mode 100644 index 000000000000..769ddac0c568 --- /dev/null +++ b/packages/react/src/components/FluidDropdown/index.js @@ -0,0 +1,10 @@ +/** + * 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. + */ + +export default from './FluidDropdown'; +export FluidDropdown from './FluidDropdown'; +export { default as FluidDropdownSkeleton } from './FluidDropdown.Skeleton'; diff --git a/packages/react/src/components/FluidTextArea/index.js b/packages/react/src/components/FluidTextArea/index.js index 08b713378247..fece410e3bab 100644 --- a/packages/react/src/components/FluidTextArea/index.js +++ b/packages/react/src/components/FluidTextArea/index.js @@ -7,3 +7,4 @@ export default from './FluidTextArea'; export FluidTextArea from './FluidTextArea'; +export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton'; diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js index 4db149e9494a..371cbb399590 100644 --- a/packages/react/src/components/ListBox/ListBox.js +++ b/packages/react/src/components/ListBox/ListBox.js @@ -6,7 +6,7 @@ */ import cx from 'classnames'; -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { ListBoxType, ListBoxSize } from './ListBoxPropTypes'; import { usePrefix } from '../../internal/usePrefix'; @@ -15,6 +15,7 @@ import ListBoxMenu from './ListBoxMenu'; import ListBoxMenuIcon from './ListBoxMenuIcon'; import ListBoxMenuItem from './ListBoxMenuItem'; import ListBoxSelection from './ListBoxSelection'; +import { FormContext } from '../FluidForm'; const handleOnKeyDown = (event) => { if (event.keyCode === 27) { @@ -49,6 +50,7 @@ const ListBox = React.forwardRef(function ListBox( ref ) { const prefix = usePrefix(); + const { isFluid } = useContext(FormContext); const showWarning = !invalid && warn; const className = cx({ @@ -59,6 +61,7 @@ const ListBox = React.forwardRef(function ListBox( [`${prefix}--list-box--disabled`]: disabled, [`${prefix}--list-box--light`]: light, [`${prefix}--list-box--expanded`]: isOpen, + [`${prefix}--list-box--invalid`]: invalid, [`${prefix}--list-box--warning`]: showWarning, }); return ( @@ -73,6 +76,7 @@ const ListBox = React.forwardRef(function ListBox( data-invalid={invalid || undefined}> {children}
+ {isFluid &&
} {invalid ? (
{invalidText}
) : null} diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 9ac80544d1c2..8a6fc7082c96 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -211,11 +211,18 @@ export { useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, } from './components/FeatureFlags'; +export { + FluidDropdown as unstable__FluidDropdown, + FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, +} from './components/FluidDropdown'; +export { + FluidTextArea as unstable__FluidTextArea, + FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, +} from './components/FluidTextArea'; export { FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, } from './components/FluidTextInput'; -export { FluidTextArea as unstable__FluidTextArea } from './components/FluidTextArea'; export { Heading, Section } from './components/Heading'; export { IconButton } from './components/IconButton'; export { Layer, useLayer } from './components/Layer'; diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap index 7ef7292bff9a..0583da3f270b 100644 --- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap +++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap @@ -262,6 +262,46 @@ Array [ "importPath": "@carbon/styles/scss/components/form", "relativePath": "scss/components/form", }, + Object { + "filepath": "scss/components/fluid-dropdown/_fluid-dropdown.scss", + "importPath": "@carbon/styles/scss/components/fluid-dropdown/fluid-dropdown", + "relativePath": "scss/components/fluid-dropdown/fluid-dropdown", + }, + Object { + "filepath": "scss/components/fluid-dropdown/_index.scss", + "importPath": "@carbon/styles/scss/components/fluid-dropdown", + "relativePath": "scss/components/fluid-dropdown", + }, + Object { + "filepath": "scss/components/fluid-list-box/_fluid-list-box.scss", + "importPath": "@carbon/styles/scss/components/fluid-list-box/fluid-list-box", + "relativePath": "scss/components/fluid-list-box/fluid-list-box", + }, + Object { + "filepath": "scss/components/fluid-list-box/_index.scss", + "importPath": "@carbon/styles/scss/components/fluid-list-box", + "relativePath": "scss/components/fluid-list-box", + }, + Object { + "filepath": "scss/components/fluid-text-area/_fluid-text-area.scss", + "importPath": "@carbon/styles/scss/components/fluid-text-area/fluid-text-area", + "relativePath": "scss/components/fluid-text-area/fluid-text-area", + }, + Object { + "filepath": "scss/components/fluid-text-area/_index.scss", + "importPath": "@carbon/styles/scss/components/fluid-text-area", + "relativePath": "scss/components/fluid-text-area", + }, + Object { + "filepath": "scss/components/fluid-text-input/_fluid-text-input.scss", + "importPath": "@carbon/styles/scss/components/fluid-text-input/fluid-text-input", + "relativePath": "scss/components/fluid-text-input/fluid-text-input", + }, + Object { + "filepath": "scss/components/fluid-text-input/_index.scss", + "importPath": "@carbon/styles/scss/components/fluid-text-input", + "relativePath": "scss/components/fluid-text-input", + }, Object { "filepath": "scss/components/inline-loading/_index.scss", "importPath": "@carbon/styles/scss/components/inline-loading", diff --git a/packages/styles/files.js b/packages/styles/files.js index d78916cbafa1..2d75d67dd640 100644 --- a/packages/styles/files.js +++ b/packages/styles/files.js @@ -71,6 +71,14 @@ const files = [ 'scss/components/file-uploader/_index.scss', 'scss/components/form/_form.scss', 'scss/components/form/_index.scss', + 'scss/components/fluid-dropdown/_fluid-dropdown.scss', + 'scss/components/fluid-dropdown/_index.scss', + 'scss/components/fluid-list-box/_fluid-list-box.scss', + 'scss/components/fluid-list-box/_index.scss', + 'scss/components/fluid-text-area/_fluid-text-area.scss', + 'scss/components/fluid-text-area/_index.scss', + 'scss/components/fluid-text-input/_fluid-text-input.scss', + 'scss/components/fluid-text-input/_index.scss', 'scss/components/inline-loading/_index.scss', 'scss/components/inline-loading/_inline-loading.scss', 'scss/components/link/_index.scss', diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index de787864d5a6..5992543d7791 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -22,8 +22,10 @@ @use 'date-picker'; @use 'dropdown'; @use 'file-uploader'; -@use 'fluid-text-input'; +@use 'fluid-dropdown'; +@use 'fluid-list-box'; @use 'fluid-text-area'; +@use 'fluid-text-input'; @use 'form'; @use 'inline-loading'; @use 'link'; diff --git a/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss b/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss new file mode 100644 index 000000000000..661581644f7f --- /dev/null +++ b/packages/styles/scss/components/fluid-dropdown/_fluid-dropdown.scss @@ -0,0 +1,22 @@ +// +// 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. +// + +//----------------------------- +// Fluid Dropdown +//----------------------------- +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../dropdown'; +@use '../fluid-list-box'; + +@mixin fluid-dropdown { + // Style overrides can be added here as needed +} diff --git a/packages/styles/scss/components/fluid-dropdown/_index.scss b/packages/styles/scss/components/fluid-dropdown/_index.scss new file mode 100644 index 000000000000..04cb62c8b22c --- /dev/null +++ b/packages/styles/scss/components/fluid-dropdown/_index.scss @@ -0,0 +1,11 @@ +// +// 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. +// + +@forward 'fluid-dropdown'; +@use 'fluid-dropdown'; + +@include fluid-dropdown.fluid-dropdown; diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss new file mode 100644 index 000000000000..0ff72b94b074 --- /dev/null +++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss @@ -0,0 +1,217 @@ +// +// 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. +// + +//----------------------------- +// Fluid List-box +//----------------------------- +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../utilities/convert' as *; +@use '../../utilities/focus-outline' as *; +@use '../../utilities/skeleton' as *; + +@mixin fluid-list-box { + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper { + position: relative; + height: 100%; + background: $field; + transition: background-color $duration-fast-01 motion(standard, productive), + outline $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box { + min-height: rem(64px); + padding: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--label { + position: absolute; + z-index: 1; + top: rem(13px); + left: $spacing-05; + display: flex; + height: rem(16px); + align-items: center; + margin: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field { + padding-top: rem(33px); + padding-bottom: rem(13px); + padding-left: $spacing-05; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon { + width: 1rem; + height: 1rem; + } + + .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed) + .#{$prefix}--list-box__menu-item { + height: $spacing-10; + } + + .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed) + .#{$prefix}--list-box__menu-item__selected-icon { + top: rem(20px); + } + + // Disabled styles + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-label { + color: $text-disabled; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-button { + cursor: not-allowed; + pointer-events: none; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--label--disabled + .#{$prefix}--toggletip-button + svg { + fill: $icon-disabled; + } + + // Focus styles + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus { + @include focus-outline('outline'); + + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field:focus { + outline: none; + outline-offset: 0; + } + + // Invalid / Warning styles + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) { + @include focus-outline('invalid'); + + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus + .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid) { + border-bottom: 1px solid transparent; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box, + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box__field:focus { + outline: none; + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:focus-within { + outline-offset: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box, + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning { + border-bottom: 1px solid transparent; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--form-requirement, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + ~ .#{$prefix}--form-requirement { + padding: rem(8px) 4rem rem(8px) $spacing-05; + margin-top: 0; + } + + .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid + .#{$prefix}--list-box__invalid-icon, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + .#{$prefix}--list-box__invalid-icon { + top: rem(81px); + right: $spacing-05; + pointer-events: none; + } + + // Error + Warning divider + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__divider { + display: none; + transition: border-color $duration-fast-01 motion(standard, productive); + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--invalid + ~ .#{$prefix}--list-box__divider, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning + ~ .#{$prefix}--list-box__divider { + display: block; + border: none; + border-bottom: 1px solid $border-subtle; + margin: 0 1rem; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--invalid:hover + ~ .#{$prefix}--list-box__divider, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--warning:hover + ~ .#{$prefix}--list-box__divider { + border-color: transparent; + } + + // direction - top + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--list-box--up + .#{$prefix}--list-box__menu { + bottom: $spacing-10; + } + + // Skeleton styles + .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton { + border-bottom: 1px solid $skeleton-element; + background: $skeleton-background; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--skeleton + .#{$prefix}--list-box__field { + position: absolute; + bottom: rem(13px); + left: $spacing-05; + width: 50%; + height: $spacing-05; + padding: 0; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--skeleton + .#{$prefix}--list-box__label { + position: absolute; + top: rem(13px); + left: $spacing-05; + width: 25%; + height: $spacing-05; + } + + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--skeleton + .#{$prefix}--list-box__field, + .#{$prefix}--list-box__wrapper--fluid + .#{$prefix}--skeleton + .#{$prefix}--list-box__label { + animation: 3000ms ease-in-out skeleton infinite; + background: $skeleton-element; + } +} diff --git a/packages/styles/scss/components/fluid-list-box/_index.scss b/packages/styles/scss/components/fluid-list-box/_index.scss new file mode 100644 index 000000000000..15be2eee1b5e --- /dev/null +++ b/packages/styles/scss/components/fluid-list-box/_index.scss @@ -0,0 +1,11 @@ +// +// 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. +// + +@forward 'fluid-list-box'; +@use 'fluid-list-box'; + +@include fluid-list-box.fluid-list-box;