[FEATURE] UI customization part 2 component primitives - #213
Conversation
… primitives Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
3de4fac to
8dcf2da
Compare
Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
zhuje
changed the title
zhuje
changed the title
|
|
||
| /* ---- Color tokens (scoped per data-color) ---- */ | ||
| .ps-Button[data-color='primary'] { | ||
| --btn-bg: var(--perses-status-icon-primary); |
There was a problem hiding this comment.
Why are we coupling icon colors with button colors?
There was a problem hiding this comment.
Updated semantics.css with new tokens to clarify the naming e.g., --perses-status-solid-primary: var(--perses-color-blue-400);
| const classes = ['ps-Alert', className].filter(Boolean).join(' '); | ||
|
|
||
| return ( | ||
| <div role="alert" className={classes} data-severity={severity} {...rest}> |
There was a problem hiding this comment.
If this spread is at the end it means all the properties we set are overridable. Maybe role and data-severity which is needed for applying the tokens should not be overridable
There was a problem hiding this comment.
Got it. Moved {...rest} to the beginning.
| const classes = ['ps-Button', className].filter(Boolean).join(' '); | ||
|
|
||
| return ( | ||
| <BaseButton className={classes} data-variant={variant} data-color={color} data-size={size} {...rest}> |
There was a problem hiding this comment.
same here, all properties become overridable
There was a problem hiding this comment.
Updated. Moved {...rest} to the beginning.
| children, | ||
| ...rest | ||
| }: ButtonProps): React.ReactElement { | ||
| const classes = ['ps-Button', className].filter(Boolean).join(' '); |
There was a problem hiding this comment.
we could use clsx instead of duplicating this pattern
There was a problem hiding this comment.
Installed and utilized clsx.
| className, | ||
| children, | ||
| ...rest | ||
| }: ButtonProps): React.ReactElement { |
There was a problem hiding this comment.
checking the forwardRef I think we need to keep it for React 18 compatibility, as React 19 didn't drop it yet.
There was a problem hiding this comment.
Okay, restoredforwardRef
Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
2 participants
Description
Create the Button and Alert component primitives as part of this initiative: UI Customization (perses/perses#3570).
Screenshots
Figures below show screenshots from Ladle for Button and Alert
Checklist
[<catalog_entry>] <commit message>naming convention using one of thefollowing
catalog_entryvalues:FEATURE,ENHANCEMENT,BUGFIX,BREAKINGCHANGE,DOC,IGNORE.UI Changes
See e2e docs for more details. Common issues include: