-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: update examples/stackflow-spa
- Loading branch information
Showing
6 changed files
with
81 additions
and
163 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
54 changes: 27 additions & 27 deletions
54
examples/stackflow-spa/src/design-system/ui/action-button.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 |
|---|---|---|
| @@ -1,56 +1,56 @@ | ||
| "use client"; | ||
|
|
||
| import "@seed-design/stylesheet/progressCircle.css"; | ||
| // TODO: we have to ensure load order between actionButton.css and progressCircle.css. should we bundle them together? | ||
| import "@seed-design/stylesheet/actionButton.css"; | ||
|
|
||
| import { ActionButton as SeedActionButton } from "@seed-design/react"; | ||
| import * as React from "react"; | ||
| import clsx from "clsx"; | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { actionButton, type ActionButtonVariantProps } from "@seed-design/recipe/actionButton"; | ||
|
|
||
| export interface ActionButtonProps extends ActionButtonVariantProps { | ||
| export interface ActionButtonProps extends SeedActionButton.RootProps { | ||
| prefixIcon?: React.ReactNode; | ||
|
|
||
| suffixIcon?: React.ReactNode; | ||
|
|
||
| /** | ||
| * @default false | ||
| */ | ||
| asChild?: boolean; | ||
| } | ||
|
|
||
| interface ReactActionButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | ||
| ActionButtonProps {} | ||
|
|
||
| /** | ||
| * @see https://v3.seed-design.io/docs/react/components/action-button | ||
| */ | ||
| export const ActionButton = React.forwardRef<HTMLButtonElement, ReactActionButtonProps>( | ||
| export const ActionButton = React.forwardRef< | ||
| React.ElementRef<typeof SeedActionButton.Root>, | ||
| ActionButtonProps | ||
| >( | ||
| ( | ||
| { | ||
| className, | ||
| variant = "brandSolid", | ||
| size = "medium", | ||
| children, | ||
| loading = false, | ||
| layout = "withText", | ||
| prefixIcon, | ||
| suffixIcon, | ||
| layout = "withText", | ||
| asChild = false, | ||
| children, | ||
| ...otherProps | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const Comp = asChild ? Slot : "button"; | ||
| const classNames = actionButton({ variant, layout, size }); | ||
| return ( | ||
| <Comp ref={ref} className={clsx(classNames.root, className)} {...otherProps}> | ||
| {prefixIcon && <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot>} | ||
| <SeedActionButton.Root ref={ref} loading={loading} layout={layout} {...otherProps}> | ||
| {layout === "withText" ? ( | ||
| <span className={classNames.label}>{children}</span> | ||
| <> | ||
| {prefixIcon && <SeedActionButton.PrefixIcon svg={prefixIcon} />} | ||
| <SeedActionButton.Label>{children}</SeedActionButton.Label> | ||
| {suffixIcon && <SeedActionButton.SuffixIcon svg={suffixIcon} />} | ||
| </> | ||
| ) : ( | ||
| <Slot className={classNames.icon}>{children}</Slot> | ||
| <SeedActionButton.Icon svg={children} /> | ||
| )} | ||
| {suffixIcon && <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>} | ||
| </Comp> | ||
| {loading ? <SeedActionButton.ProgressCircle /> : null} | ||
| </SeedActionButton.Root> | ||
| ); | ||
| }, | ||
| ); | ||
| ActionButton.displayName = "ActionButton"; | ||
|
|
||
| /** | ||
| * This file is generated snippet from the Seed Design. | ||
| * You can extend the functionality from this snippet if needed. | ||
| */ |
61 changes: 18 additions & 43 deletions
61
examples/stackflow-spa/src/design-system/ui/action-chip.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 |
|---|---|---|
| @@ -1,64 +1,39 @@ | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { | ||
| actionChip, | ||
| type ActionChipVariantProps, | ||
| } from "@seed-design/recipe/actionChip"; | ||
| import clsx from "clsx"; | ||
| "use client"; | ||
|
|
||
| import { ActionChip as SeedActionChip } from "@seed-design/react"; | ||
| import * as React from "react"; | ||
|
|
||
| import "@seed-design/stylesheet/actionChip.css"; | ||
|
|
||
| export interface ActionChipProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | ||
| ActionChipVariantProps { | ||
| export interface ActionChipProps extends SeedActionChip.RootProps { | ||
| prefixIcon?: React.ReactNode; | ||
|
|
||
| suffixIcon?: React.ReactNode; | ||
|
|
||
| count?: number; | ||
|
|
||
| asChild?: boolean; | ||
| } | ||
|
|
||
| export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>( | ||
| ( | ||
| { | ||
| className, | ||
| size = "medium", | ||
| layout = "withText", | ||
| children, | ||
| prefixIcon, | ||
| suffixIcon, | ||
| count, | ||
| asChild = false, | ||
| ...otherProps | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const Comp = asChild ? Slot : "button"; | ||
| const classNames = actionChip({ size, layout }); | ||
| ({ className, children, prefixIcon, suffixIcon, count, ...otherProps }, ref) => { | ||
| return ( | ||
| <Comp | ||
| ref={ref} | ||
| className={clsx(classNames.root, className)} | ||
| {...otherProps} | ||
| > | ||
| {layout === "withText" ? ( | ||
| <SeedActionChip.Root ref={ref} {...otherProps}> | ||
| {otherProps.layout === "withText" ? ( | ||
| <> | ||
| {prefixIcon && ( | ||
| <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot> | ||
| )} | ||
| <span className={classNames.label}>{children}</span> | ||
| {count && <span className={classNames.count}>{count}</span>} | ||
| {suffixIcon && ( | ||
| <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot> | ||
| )} | ||
| {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />} | ||
| <SeedActionChip.Label>{children}</SeedActionChip.Label> | ||
| {count && <SeedActionChip.Count>{count}</SeedActionChip.Count>} | ||
| {suffixIcon && <SeedActionChip.SuffixIcon svg={suffixIcon} />} | ||
| </> | ||
| ) : ( | ||
| <Slot className={classNames.icon}>{children}</Slot> | ||
| <SeedActionChip.Icon svg={children} /> | ||
| )} | ||
| </Comp> | ||
| </SeedActionChip.Root> | ||
| ); | ||
| }, | ||
| ); | ||
| ActionChip.displayName = "ActionChip"; | ||
|
|
||
| /** | ||
| * This file is generated snippet from the Seed Design. | ||
| * You can extend the functionality from this snippet if needed. | ||
| */ |
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