forked from appsmithorg/appsmith
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Add tag group component (appsmithorg#29387)
Fixes appsmithorg#29134 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced `TagGroup` and `Tag` components with features like label, description, error message, and tag removal options. - Added new stories for `TagGroup` to demonstrate various configurations and use cases. - **Enhancements** - Updated `Switch` component with improved validation logic. - Enhanced `TextArea` initialization to handle undefined default values more gracefully. - Added `validationState` property to `HelpText` and `Field` components to support form validation states. - **Style Updates** - Implemented new CSS styles for `TagGroup` and `Tag` components to improve UI consistency and interactivity. - **Documentation** - Expanded Storybook documentation with examples and usage guidelines for `TagGroup` and `Tag` components. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Loading branch information
Showing
17 changed files
with
1,831 additions
and
425 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 7 additions & 1 deletion
8
app/client/packages/design-system/headless/src/components/Field/HelpText.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
app/client/packages/design-system/widgets/src/components/TagGroup/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./src"; |
36 changes: 36 additions & 0 deletions
36
app/client/packages/design-system/widgets/src/components/TagGroup/src/Tag.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import clsx from "clsx"; | ||
| import React from "react"; | ||
| import { | ||
| Tag as HeadlessTag, | ||
| Button as HeadlessButton, | ||
| } from "react-aria-components"; | ||
| import { getTypographyClassName } from "@design-system/theming"; | ||
| import type { TagProps as HeadlessTagProps } from "react-aria-components"; | ||
|
|
||
| import styles from "./styles.module.css"; | ||
| import { CloseIcon } from "../../Modal/src/CloseIcon"; | ||
|
|
||
| function Tag({ children, ...props }: HeadlessTagProps) { | ||
| const textValue = typeof children === "string" ? children : undefined; | ||
|
|
||
| return ( | ||
| <HeadlessTag | ||
| textValue={textValue} | ||
| {...props} | ||
| className={clsx(styles["tag"], getTypographyClassName("footnote"))} | ||
| > | ||
| {({ allowsRemoving }) => ( | ||
| <> | ||
| <span>{children}</span> | ||
| {allowsRemoving && ( | ||
| <HeadlessButton slot="remove"> | ||
| <CloseIcon /> | ||
| </HeadlessButton> | ||
| )} | ||
| </> | ||
| )} | ||
| </HeadlessTag> | ||
| ); | ||
| } | ||
|
|
||
| export { Tag }; |
66 changes: 66 additions & 0 deletions
66
app/client/packages/design-system/widgets/src/components/TagGroup/src/TagGroup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import React from "react"; | ||
| import { | ||
| Label as HeadlessLabel, | ||
| TagGroup as HeadlessTagGroup, | ||
| TagList as HeadlessTagList, | ||
| Text as HeadlessText, | ||
| } from "react-aria-components"; | ||
| import type { | ||
| TagGroupProps as HeadlessTagGroupProps, | ||
| TagListProps as HeadlessTagListProps, | ||
| } from "react-aria-components"; | ||
|
|
||
| import { Text } from "../../Text"; | ||
| import styles from "./styles.module.css"; | ||
| import { getTypographyClassName } from "@design-system/theming"; | ||
|
|
||
| interface TagGroupProps<T> | ||
| extends Omit<HeadlessTagGroupProps, "children">, | ||
| Pick<HeadlessTagListProps<T>, "items" | "children" | "renderEmptyState"> { | ||
| label?: string; | ||
| description?: string; | ||
| errorMessage?: string; | ||
| } | ||
|
|
||
| function TagGroup<T extends object>(props: TagGroupProps<T>) { | ||
| const { | ||
| children, | ||
| description, | ||
| errorMessage, | ||
| items, | ||
| label, | ||
| renderEmptyState, | ||
| ...rest | ||
| } = props; | ||
|
|
||
| return ( | ||
| <HeadlessTagGroup {...rest} className={styles["tag-group"]}> | ||
| {Boolean(label) && <HeadlessLabel>{<Text>{label}</Text>}</HeadlessLabel>} | ||
| <HeadlessTagList | ||
| className={styles["tag-list"]} | ||
| items={items} | ||
| renderEmptyState={renderEmptyState} | ||
| > | ||
| {children} | ||
| </HeadlessTagList> | ||
| {Boolean(description) && ( | ||
| <HeadlessText | ||
| className={getTypographyClassName("footnote")} | ||
| slot="description" | ||
| > | ||
| {description} | ||
| </HeadlessText> | ||
| )} | ||
| {Boolean(errorMessage) && ( | ||
| <HeadlessText | ||
| className={getTypographyClassName("footnote")} | ||
| slot="errorMessage" | ||
| > | ||
| {errorMessage} | ||
| </HeadlessText> | ||
| )} | ||
| </HeadlessTagGroup> | ||
| ); | ||
| } | ||
|
|
||
| export { TagGroup }; |
2 changes: 2 additions & 0 deletions
2
app/client/packages/design-system/widgets/src/components/TagGroup/src/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { TagGroup } from "./TagGroup"; | ||
| export { Tag } from "./Tag"; |
106 changes: 106 additions & 0 deletions
106
app/client/packages/design-system/widgets/src/components/TagGroup/src/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| .tag-group { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--inner-spacing-2); | ||
|
|
||
| /** | ||
| * ---------------------------------------------------------------------------- | ||
| * ERROR MESSAGE | ||
| *----------------------------------------------------------------------------- | ||
| */ | ||
| [slot="errorMessage"] { | ||
| color: var(--color-fg-negative); | ||
| } | ||
| } | ||
|
|
||
| .tag-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: var(--inner-spacing-2); | ||
| } | ||
|
|
||
| .tag { | ||
| height: var(--sizing-6); | ||
| color: var(--color-fg); | ||
| background-color: var(--color-bg-neutral-subtle); | ||
| border-radius: var(--border-radius-1); | ||
| padding: 0 var(--inner-spacing-2); | ||
| outline: none; | ||
| cursor: default; | ||
| display: flex; | ||
| align-items: center; | ||
| transition: border-color 200ms; | ||
| overflow: hidden; | ||
|
|
||
| &:has([slot="remove"]) { | ||
| padding-inline-end: 0; | ||
| } | ||
|
|
||
| /** | ||
| * ---------------------------------------------------------------------------- | ||
| * HOVERED | ||
| *----------------------------------------------------------------------------- | ||
| */ | ||
| &[data-hovered] { | ||
| background-color: var(--color-bg-neutral-subtle-hover); | ||
| } | ||
|
|
||
| &[data-focus-visible] { | ||
| outline: 2px solid var(--color-bd-focus); | ||
| outline-offset: 2px; | ||
| } | ||
|
|
||
| /** | ||
| * ---------------------------------------------------------------------------- | ||
| * SELECTED TAG | ||
| *----------------------------------------------------------------------------- | ||
| */ | ||
| &[data-selected] { | ||
| border-color: var(--color-bd-neutral); | ||
| background: var(--color-bg-neutral); | ||
| color: var(--color-fg-on-neutral); | ||
| } | ||
|
|
||
| /** | ||
| * ---------------------------------------------------------------------------- | ||
| * REMOVE BUTTON | ||
| *----------------------------------------------------------------------------- | ||
| */ | ||
| [slot="remove"] { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: var(--sizing-6); | ||
| width: var(--sizing-6); | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| margin-inline-start: var(--inner-spacing-1); | ||
| color: var(--color-fg); | ||
| transition: color 200ms; | ||
| outline: none; | ||
| font-size: 0.95em; | ||
|
|
||
| &[data-hovered] { | ||
| background: var(--color-bg-neutral-subtle-hover); | ||
| } | ||
|
|
||
| svg { | ||
| width: 1em; | ||
| height: 1em; | ||
| } | ||
|
|
||
| &[data-hovered] { | ||
| color: var(--remove-button-color-hovered); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * ---------------------------------------------------------------------------- | ||
| * DISABLED TAG | ||
| *----------------------------------------------------------------------------- | ||
| */ | ||
| &[data-disabled] { | ||
| opacity: var(--opacity-disabled); | ||
| } | ||
| } |
Oops, something went wrong.