From f48df4be59dc8394f5874c00538b33af6116deef Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Thu, 12 Sep 2024 15:00:01 +0300 Subject: [PATCH 1/6] chore: refactor wds input component --- .../components/Checkbox/src/styles.module.css | 10 ++ .../src/components/ComboBox/src/ComboBox.tsx | 59 ++++------- .../components/ComboBox/src/ListBoxItem.tsx | 15 --- .../components/ComboBox/src/styles.module.css | 98 +++++++------------ .../ComboBox/stories/ComboBox.stories.tsx | 2 +- .../ErrorMessage/src/ErrorMessage.tsx | 21 ---- .../src/components/ErrorMessage/src/index.ts | 1 - .../ErrorMessage/src/styles.module.css | 3 - .../src/components/ErrorMessage/src/types.ts | 3 - .../index.ts | 0 .../FieldDescription/src/FieldDescription.tsx | 16 +++ .../components/FieldDescription/src/index.ts | 2 + .../FieldDescription/src/styles.module.css | 4 + .../components/FieldDescription/src/types.ts | 6 ++ .../components/{Label => FieldError}/index.ts | 0 .../components/FieldError/src/FieldError.tsx | 18 ++++ .../src/components/FieldError/src/index.ts | 2 + .../FieldError/src/styles.module.css | 4 + .../src/components/FieldError/src/types.ts | 6 ++ .../src/components/FieldLabel/index.ts | 1 + .../src/FieldLabel.tsx} | 2 +- .../src/components/FieldLabel/src/index.ts | 1 + .../src/styles.module.css | 0 .../{Label => FieldLabel}/src/types.ts | 0 .../src/components/FieldListPopover/index.ts | 1 + .../FieldListPopover/src/FieldListPopover.tsx | 36 +++++++ .../components/FieldListPopover/src/index.ts | 2 + .../FieldListPopover/src/styles.module.css | 12 +++ .../components/FieldListPopover/src/types.ts | 13 +++ .../widgets/src/components/Label/src/index.ts | 1 - .../components/RadioGroup/src/RadioGroup.tsx | 8 +- .../src/components/Select/src/ListBoxItem.tsx | 15 --- .../src/components/Select/src/Select.tsx | 47 +++------ .../components/Select/src/styles.module.css | 26 ----- .../src/components/Select/src/types.ts | 13 +-- .../Select/stories/Select.stories.tsx | 2 +- .../ToggleGroup/src/ToggleGroup.tsx | 11 ++- .../design-system/widgets/src/index.ts | 7 +- .../src/styles/src/list-item.module.css | 4 +- .../widgets/src/testing/ComplexForm.tsx | 25 +++++ 40 files changed, 247 insertions(+), 250 deletions(-) delete mode 100644 app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx delete mode 100644 app/client/packages/design-system/widgets/src/components/ErrorMessage/src/ErrorMessage.tsx delete mode 100644 app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts delete mode 100644 app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css delete mode 100644 app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts rename app/client/packages/design-system/widgets/src/components/{ErrorMessage => FieldDescription}/index.ts (100%) create mode 100644 app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx create mode 100644 app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts create mode 100644 app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css create mode 100644 app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts rename app/client/packages/design-system/widgets/src/components/{Label => FieldError}/index.ts (100%) create mode 100644 app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx create mode 100644 app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts create mode 100644 app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css create mode 100644 app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts create mode 100644 app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts rename app/client/packages/design-system/widgets/src/components/{Label/src/Label.tsx => FieldLabel/src/FieldLabel.tsx} (95%) create mode 100644 app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts rename app/client/packages/design-system/widgets/src/components/{Label => FieldLabel}/src/styles.module.css (100%) rename app/client/packages/design-system/widgets/src/components/{Label => FieldLabel}/src/types.ts (100%) create mode 100644 app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts create mode 100644 app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx create mode 100644 app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts create mode 100644 app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css create mode 100644 app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts delete mode 100644 app/client/packages/design-system/widgets/src/components/Label/src/index.ts delete mode 100644 app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css index d7e2fa8503d2..e1dcf5c3ed00 100644 --- a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css @@ -96,11 +96,21 @@ --checkbox-bg-color: var(--color-bd-negative); } + &[data-invalid][data-selected="true"] [data-icon] { + --checkbox-border-color: var(--color-bg-negative); + --checkbox-bg-color: var(--color-bg-negative); + } + &[data-hovered][data-invalid] [data-icon] { --checkbox-border-color: var(--color-bd-negative-hover); --checkbox-bg-color: var(--color-bd-negative-hover); } + &[data-hovered][data-selected="true"] [data-icon] { + --checkbox-border-color: var(--color-bg-negative-hover); + --checkbox-bg-color: var(--color-bg-negative-hover); + } + /** * ---------------------------------------------------------------------------- * DISABLED diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx index 3e97b4720730..85abdf7b695a 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ComboBox.tsx @@ -1,14 +1,12 @@ -import { Button, Icon, Label, Popover, Text } from "@appsmith/wds"; -import { getTypographyClassName } from "@appsmith/wds-theming"; -import clsx from "clsx"; -import React from "react"; import { FieldError, - ComboBox as HeadlessCombobox, - Input, - ListBox, -} from "react-aria-components"; -import { ListBoxItem } from "./ListBoxItem"; + FieldDescription, + FieldLabel, + FieldListPopover, + Button, +} from "@appsmith/wds"; +import React from "react"; +import { ComboBox as HeadlessCombobox, Input } from "react-aria-components"; import styles from "./styles.module.css"; import type { ComboBoxProps } from "./types"; @@ -26,11 +24,6 @@ export const ComboBox = (props: ComboBoxProps) => { ...rest } = props; - // place Popover in the root theme provider to get access to the CSS tokens - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; - return ( { > {({ isInvalid }) => ( <> - diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx deleted file mode 100644 index 663456933b35..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/ListBoxItem.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components"; -import clsx from "clsx"; -import { getTypographyClassName } from "@appsmith/wds-theming"; -import { listItemStyles } from "@appsmith/wds"; -import type { ListBoxItemProps } from "react-aria-components"; - -export const ListBoxItem = (props: ListBoxItemProps) => { - return ( - - ); -}; diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css index 097d68b00369..291a95ad125f 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/src/styles.module.css @@ -5,85 +5,57 @@ } .inputWrapper { - display: flex; - flex-direction: row; - align-items: center; -} - -.input { - display: flex; - flex: 1; position: relative; - padding: 0; - border: none; + display: flex; align-items: center; + gap: var(--inner-spacing-1); border-radius: var(--border-radius-elevation-3); background-color: var(--color-bg-neutral-subtle); + flex: 1; max-inline-size: 100%; - padding-inline-start: var(--inner-spacing-2); - padding-inline-end: calc(var(--inner-spacing-3) + var(--icon-size-2)); - padding-block: var(--inner-spacing-3); - box-shadow: inset 0 0 0 var(--border-width-1) - var(--color-bd-on-neutral-subtle); - cursor: pointer; -} - -.formField[data-invalid] .textField { - box-shadow: 0 0 0 var(--border-width-1) var(--color-bd-negative); + isolation: isolate; + box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle); } -.formField[data-size="small"] .textField { - padding-block: var(--inner-spacing-2); -} - -.textField[data-focus-visible] { - box-shadow: - 0 0 0 2px var(--color-bg), - 0 0 0 4px var(--color-bd-focus); +.input { + border: 0; + background-color: transparent; + font-family: inherit; + flex-grow: 1; + color: var(--color-fg); + text-overflow: ellipsis; + max-inline-size: 100%; + width: 100%; + box-sizing: content-box; + padding-block: var(--inner-spacing-1); + padding-inline-start: var(--inner-spacing-2); } -.textField[data-hovered] { +.inputWrapper:has([data-hovered]) { background-color: var(--color-bg-neutral-subtle-hover); - box-shadow: inset 0 0 0 var(--border-width-1) - var(--color-bd-on-neutral-subtle-hover); -} - -.textField [data-icon] { - position: absolute; - right: var(--inner-spacing-2); -} - -.necessityIndicator { - color: var(--color-fg-negative); - margin-inline-start: var(--inner-spacing-1); + box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-subtle-hover); } -.errorText { - margin-block-start: var(--inner-spacing-3); - color: var(--color-fg-negative); +.inputWrapper:has([data-focused]) { + background-color: transparent; + box-shadow: none; } -.description { - margin-block-start: var(--inner-spacing-3); - color: var(--color-fg-neutral); -} - -.fieldValue { - text-align: left; - flex: 1; -} - -.fieldValue [data-icon] { - display: none; +.inputWrapper:has([data-focused]):before { + content: ""; + left: 0; + width: 100%; + height: 100%; + position: absolute; + box-shadow: 0 0 0 2px var(--color-bd-focus); + border-radius: var(--border-radius-elevation-3); + z-index: -1; } -.listBox { - min-inline-size: var(--trigger-width); +.inputWrapper:has([data-invalid]) { + box-shadow: 0 0 0 1px var(--color-bd-negative); } -/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */ -.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) { - padding-inline-start: calc( - var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2) - ); +.inputWrapper:has([data-invalid][data-hovered]) { + box-shadow: 0 0 0 1px var(--color-bd-negative-hover); } diff --git a/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx b/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx index b08d1836ba16..ee88f335bc23 100644 --- a/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/ComboBox/stories/ComboBox.stories.tsx @@ -56,7 +56,7 @@ export const Validation: Story = { alert("Form submitted"); }} > - + { - const { text } = props; - - if (!Boolean(text)) return null; - - return ( - - {text} - - ); -}; diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts deleted file mode 100644 index 435effc80d21..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ErrorMessage"; diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css deleted file mode 100644 index 4725547b2440..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.errorMessage { - margin-block-start: var(--inner-spacing-2); -} diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts b/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts deleted file mode 100644 index e150723ebcaa..000000000000 --- a/app/client/packages/design-system/widgets/src/components/ErrorMessage/src/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface ErrorMessageProps { - text?: string; -} diff --git a/app/client/packages/design-system/widgets/src/components/ErrorMessage/index.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/index.ts similarity index 100% rename from app/client/packages/design-system/widgets/src/components/ErrorMessage/index.ts rename to app/client/packages/design-system/widgets/src/components/FieldDescription/index.ts diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx new file mode 100644 index 000000000000..68a040adaf1d --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/FieldDescription.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Text } from "../../Text"; +import styles from "./styles.module.css"; +import type { FieldDescriptionProps } from "./types"; + +export const FieldDescription = (props: FieldDescriptionProps) => { + const { description, isInvalid } = props; + + if (!Boolean(description) || Boolean(isInvalid)) return null; + + return ( + + {description} + + ); +}; diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts new file mode 100644 index 000000000000..2c6b2d3578df --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/index.ts @@ -0,0 +1,2 @@ +export * from "./FieldDescription"; +export type { FieldDescriptionProps } from "./types"; diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css new file mode 100644 index 000000000000..66f4818bdacb --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/styles.module.css @@ -0,0 +1,4 @@ +.description { + margin-block-start: var(--inner-spacing-3); + color: var(--color-fg-neutral); +} diff --git a/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts new file mode 100644 index 000000000000..733ea6b20b87 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldDescription/src/types.ts @@ -0,0 +1,6 @@ +export interface FieldDescriptionProps { + /** The content to display as the description. */ + description?: string; + /** Whether the input value is invalid. */ + isInvalid?: boolean; +} diff --git a/app/client/packages/design-system/widgets/src/components/Label/index.ts b/app/client/packages/design-system/widgets/src/components/FieldError/index.ts similarity index 100% rename from app/client/packages/design-system/widgets/src/components/Label/index.ts rename to app/client/packages/design-system/widgets/src/components/FieldError/index.ts diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx b/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx new file mode 100644 index 000000000000..6b62b21869e0 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/FieldError.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { getTypographyClassName } from "@appsmith/wds-theming"; +import clsx from "clsx"; +import { FieldError as HeadlessFieldError } from "react-aria-components"; +import styles from "./styles.module.css"; +import type { FieldErrorProps } from "./types"; + +export const FieldError = (props: FieldErrorProps) => { + const { errorMessage } = props; + + return ( + + {errorMessage} + + ); +}; diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts new file mode 100644 index 000000000000..f8de15b13fb0 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/index.ts @@ -0,0 +1,2 @@ +export * from "./FieldError"; +export type { FieldErrorProps } from "./types"; diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css new file mode 100644 index 000000000000..bb2636b64de8 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/styles.module.css @@ -0,0 +1,4 @@ +.errorText { + margin-block-start: var(--inner-spacing-3); + color: var(--color-fg-negative); +} diff --git a/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts new file mode 100644 index 000000000000..67de97f9072a --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldError/src/types.ts @@ -0,0 +1,6 @@ +import type { ValidationResult } from "react-aria-components"; + +export interface FieldErrorProps { + /** The content to display as the error message. */ + errorMessage?: string | ((validation: ValidationResult) => string); +} diff --git a/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts new file mode 100644 index 000000000000..3bd16e178a03 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/index.ts @@ -0,0 +1 @@ +export * from "./src"; diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx similarity index 95% rename from app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx index 0724a86324d3..18ce87eee192 100644 --- a/app/client/packages/design-system/widgets/src/components/Label/src/Label.tsx +++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx @@ -5,7 +5,7 @@ import { Label as HeadlessLabel } from "react-aria-components"; import styles from "./styles.module.css"; import type { LabelProps } from "./types"; -export const Label = (props: LabelProps) => { +export const FieldLabel = (props: LabelProps) => { const { className, contextualHelp, isDisabled, isRequired, text, ...rest } = props; diff --git a/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts new file mode 100644 index 000000000000..8f55bdf616e5 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/index.ts @@ -0,0 +1 @@ +export * from "./FieldLabel"; diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/styles.module.css similarity index 100% rename from app/client/packages/design-system/widgets/src/components/Label/src/styles.module.css rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/styles.module.css diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldLabel/src/types.ts similarity index 100% rename from app/client/packages/design-system/widgets/src/components/Label/src/types.ts rename to app/client/packages/design-system/widgets/src/components/FieldLabel/src/types.ts diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts new file mode 100644 index 000000000000..3bd16e178a03 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/index.ts @@ -0,0 +1 @@ +export * from "./src"; diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx new file mode 100644 index 000000000000..d9d7921a8278 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/FieldListPopover.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import clsx from "clsx"; +import { getTypographyClassName } from "@appsmith/wds-theming"; +import { listItemStyles, Popover, Icon } from "@appsmith/wds"; +import { ListBox, ListBoxItem } from "react-aria-components"; +import styles from "./styles.module.css"; +import type { FieldListPopoverProps } from "./types"; + +export const FieldListPopover = (props: FieldListPopoverProps) => { + const { items } = props; + + // place Popover in the root theme provider to get access to the CSS tokens + const root = document.body.querySelector( + "[data-theme-provider]", + ) as HTMLButtonElement; + + return ( + + + {(item) => ( + + {item.icon && } + {item.label} + + )} + + + ); +}; diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts new file mode 100644 index 000000000000..be087d853eb9 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/index.ts @@ -0,0 +1,2 @@ +export * from "./FieldListPopover"; +export type { FieldListPopoverProps, FieldListPopoverItem } from "./types"; diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css new file mode 100644 index 000000000000..1a64e6b8425a --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/styles.module.css @@ -0,0 +1,12 @@ +.listBox { + min-inline-size: var(--trigger-width); + max-height: inherit; + overflow-y: auto; +} + +/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */ +.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) { + padding-inline-start: calc( + var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2) + ); +} diff --git a/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts new file mode 100644 index 000000000000..3c98ccf204a5 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/FieldListPopover/src/types.ts @@ -0,0 +1,13 @@ +import type { Key } from "@react-types/shared"; +import type { IconProps } from "@appsmith/wds"; + +export interface FieldListPopoverProps { + /** Item objects in the collection. */ + items: FieldListPopoverItem[]; +} + +export interface FieldListPopoverItem { + id: Key; + label: string; + icon?: IconProps["name"]; +} diff --git a/app/client/packages/design-system/widgets/src/components/Label/src/index.ts b/app/client/packages/design-system/widgets/src/components/Label/src/index.ts deleted file mode 100644 index e0a468a2d250..000000000000 --- a/app/client/packages/design-system/widgets/src/components/Label/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Label"; diff --git a/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx b/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx index c1b301db2471..a06bceee6c3d 100644 --- a/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx +++ b/app/client/packages/design-system/widgets/src/components/RadioGroup/src/RadioGroup.tsx @@ -1,11 +1,11 @@ import React, { forwardRef, useRef } from "react"; import { RadioGroup as HeadlessRadioGroup, Radio } from "react-aria-components"; import { - Label, + FieldLabel, Flex, Text, - ErrorMessage, useGroupOrientation, + FieldError, } from "@appsmith/wds"; import styles from "./styles.module.css"; import type { ForwardedRef } from "react"; @@ -37,7 +37,7 @@ const _RadioGroup = ( ref={ref} {...rest} > - - + ); }; diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx deleted file mode 100644 index 663456933b35..000000000000 --- a/app/client/packages/design-system/widgets/src/components/Select/src/ListBoxItem.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import { ListBoxItem as HeadlessListBoxItem } from "react-aria-components"; -import clsx from "clsx"; -import { getTypographyClassName } from "@appsmith/wds-theming"; -import { listItemStyles } from "@appsmith/wds"; -import type { ListBoxItemProps } from "react-aria-components"; - -export const ListBoxItem = (props: ListBoxItemProps) => { - return ( - - ); -}; diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx index 4a7b3c7342c0..092c31243454 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/src/Select.tsx @@ -1,15 +1,19 @@ -import { Icon, Label, Popover, Spinner, Text } from "@appsmith/wds"; +import React, { useRef } from "react"; +import { + FieldDescription, + FieldError, + Icon, + FieldLabel, + Spinner, + FieldListPopover, +} from "@appsmith/wds"; import { getTypographyClassName } from "@appsmith/wds-theming"; import clsx from "clsx"; -import React, { useRef } from "react"; import { Button, - FieldError, Select as HeadlessSelect, - ListBox, SelectValue, } from "react-aria-components"; -import { ListBoxItem } from "./ListBoxItem"; import styles from "./styles.module.css"; import type { SelectProps } from "./types"; @@ -27,11 +31,6 @@ export const Select = (props: SelectProps) => { } = props; const triggerRef = useRef(null); - // place Popover in the root theme provider to get access to the CSS tokens - const root = document.body.querySelector( - "[data-theme-provider]", - ) as HTMLButtonElement; - return ( { > {({ isInvalid }) => ( <> - diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css index 10412f1d14a5..0f560127d6fc 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Select/src/styles.module.css @@ -47,21 +47,6 @@ right: var(--inner-spacing-1); } -.necessityIndicator { - color: var(--color-fg-negative); - margin-inline-start: var(--inner-spacing-1); -} - -.errorText { - margin-block-start: var(--inner-spacing-3); - color: var(--color-fg-negative); -} - -.description { - margin-block-start: var(--inner-spacing-3); - color: var(--color-fg-neutral); -} - .fieldValue { text-align: left; flex: 1; @@ -74,14 +59,3 @@ .fieldValue [data-icon] { display: none; } - -.listBox { - min-inline-size: var(--trigger-width); -} - -/** If at least one select item has an icon, we need to add extra padding for items that doesn't have an icon. */ -.listBox:has([data-icon]) [role="option"]:not(:has([data-icon])) { - padding-inline-start: calc( - var(--icon-size-2) + var(--inner-spacing-3) + var(--inner-spacing-2) - ); -} diff --git a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts index 4e88e56cac31..27201d88aba5 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Select/src/types.ts @@ -1,14 +1,13 @@ -import type { Key } from "@react-types/shared"; import type { SelectProps as SpectrumSelectProps, ValidationResult, } from "react-aria-components"; -import type { IconProps, SIZES } from "@appsmith/wds"; +import type { SIZES, FieldListPopoverItem } from "@appsmith/wds"; export interface SelectProps - extends Omit, "slot"> { + extends Omit, "slot"> { /** Item objects in the collection. */ - items: SelectItem[]; + items: FieldListPopoverItem[]; /** The content to display as the label. */ label?: string; /** The content to display as the description. */ @@ -25,9 +24,3 @@ export interface SelectProps /** A ContextualHelp element to place next to the label. */ contextualHelp?: string; } - -export interface SelectItem { - id: Key; - label: string; - icon?: IconProps["name"]; -} diff --git a/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx b/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx index 3f65975cf764..95d507425c06 100644 --- a/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/Select/stories/Select.stories.tsx @@ -61,7 +61,7 @@ export const Validation: Story = { alert("Form submitted"); }} > - +