feat: align mdk button styles with moria#13
Conversation
Update core button API and styles to match moria specs, and refresh demo layout to show normal, disabled, and hover states in a 4x3 grid.
| }, | ||
| ref, | ||
| ) => { | ||
| const resolvedVariant = variant ?? (danger ? 'danger' : (color ?? 'secondary')) |
There was a problem hiding this comment.
What happens in this case?
<Button variant="primary" danger color="ghost" />
Is this an acceptable use of a button? I feel we should design around having minimal overlap between props and avoid boolean props in the overlap as much as possible.
There was a problem hiding this comment.
updated to prefer a single source of truth: removed danger/color in favor of variant.
| color?: ButtonColor | ||
| } & React.ButtonHTMLAttributes<HTMLButtonElement> | ||
|
|
||
| function sizeToSize(size?: string): ButtonSize { |
There was a problem hiding this comment.
What do you think about using ES6+ features and creating a sizeMap here instead?
There was a problem hiding this comment.
Refactored sizeToSize to use a sizeMap and added a safe fallback to md.
packages/core/src/styles.scss
Outdated
| --mdk-button-radius: 0px; | ||
| --mdk-button-font-size: 14px; | ||
| --mdk-button-line-height: 22px; | ||
| --mdk-button-font-weight: 600; | ||
| --mdk-button-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04); |
There was a problem hiding this comment.
I think we don’t need to mention the word “button” here and can use it somewhere else later if needed
There was a problem hiding this comment.
updated removing button prefix and wired the new names through the button styles:
Remove danger/color props in favor of variant-only usage, and update size mapping and docs to match the new API.
Rename core tokens to remove button-specific prefixes and update button styles to reference the new variables.
robdll
requested review from
arif-dewi,
boris91,
efr-nox,
eskawl,
eugeneglova and
habrahamyanbf
7 participants
Update core button API and styles to match moria specs, and refresh demo layout to show normal, disabled, and hover states in a 4x3 grid.