Overview:
Develop a versatile button component based on the provided design system. This button will support multiple styles, states, and features, ensuring flexibility and consistency across different UI implementations.
Requirements:
Button Properties:
Color Properties:
is-alert (Boolean): Enables alert-specific styling (info, warning, success, error). Not to be used for general call-to-actions.
is-brand (Boolean): Toggles brand-specific styling using the nebula brand color. Defaults to greyscale if is-alert and is-brand are false.
alert-type (String): Specifies alert type (success, error, warning, info, none).
Visibility Properties:
has-icon (Boolean): Determines if the button includes an icon.
has-text (Boolean): Determines if the button includes text.
Version Styling:
is-primary (Boolean): For primary actions; uses a filled style.
is-secondary (Boolean): For secondary actions; uses an outlined style.
is-tertiary (Boolean): For minimal actions; uses a ghost style, suitable for subtle interactions.
state (String): Represents button state (default, hover, active, disabled).
icon-type (String): Icon type (e.g., arrow-right-circle).
button-text (String): Text displayed on the button.
Styling Specifications:
Color Styles:
Greyscale, Brand, Warning, Info, Error, Success.
Each style supports primary, secondary, and tertiary variants.
Dynamic states: default, hover, active, disabled.
Theme Compatibility:
Supports light/dark mode.
Adapts to the current theme and background settings.
Behavior:
Fully accessible (ARIA roles for state and action indicators).
Dynamic resizing and responsiveness.
Icon support with flexible placement.
Additional Notes:
Color Alias Layering:
Base Token: primary-colors → #676767
Semantic Token: status/semantic element → grey
Component Token: btn/surface/grey/tertiary → applied to the button’s surface.
State Token: btn/hover/surface/grey/tertiary → changes the surface color on hover.
Spacing Alias Layering:
-Base Token: num-fixed → 4px (A global static value, used as the fundamental unit for spacing across all components.)
-Semantic Token: scale-ui → defines specific padding or margins for ui components (Adapts num-fixed values into scalable sizes: small, base, large, depending on the component's size requirements.)
-Component Token: btn/default/space → p-x, p-y (Applies the scale-ui values specifically to button padding (p-x, p-y) to ensure consistent spacing in the default button state.)
-Dynamic Token: btn/responsive/space → adjusts padding dynamically (Ensures padding (p-x, p-y) adapts proportionally to responsive states (small, base, large) across different screen sizes and interaction states (e.g., hover, active).)
Feature description
Overview: Develop a versatile button component based on the provided design system. This button will support multiple styles, states, and features, ensuring flexibility and consistency across different UI implementations.
Requirements:
Button Properties:
Color Properties:
Visibility Properties:
Version Styling:
Composition Properties:
Styling Specifications:
Color Styles:
Theme Compatibility:
Behavior:
Additional Notes:
Color Alias Layering:
Spacing Alias Layering: -Base Token: num-fixed → 4px (A global static value, used as the fundamental unit for spacing across all components.) -Semantic Token: scale-ui → defines specific padding or margins for ui components (Adapts num-fixed values into scalable sizes: small, base, large, depending on the component's size requirements.) -Component Token: btn/default/space → p-x, p-y (Applies the scale-ui values specifically to button padding (p-x, p-y) to ensure consistent spacing in the default button state.) -Dynamic Token: btn/responsive/space → adjusts padding dynamically (Ensures padding (p-x, p-y) adapts proportionally to responsive states (small, base, large) across different screen sizes and interaction states (e.g., hover, active).)
Design Reference: Component: https://www.figma.com/design/EwzuhhvTulvFRMvhTD5VAh/DL-Universal-Design-System?node-id=14747-13363&t=wtGcKj1RQyD0O3Af-4
Prototype: https://www.figma.com/proto/EwzuhhvTulvFRMvhTD5VAh/DL-Universal-Design-System?node-id=16161-19051&node-type=frame&t=qfsizVFFsrZubysr-1&scaling=min-zoom&content-scaling=fixed&page-id=11487%3A38324&starting-point-node-id=11488%3A71572
Affected component/components
Button
Additional Context
@dbradham Creating an issue for the button update.
Before submitting