LearnNewsExamplesServices
Frontmatter
id3998
titlebutton.Base: UI variations
stateClosed
labels
enhancement
assignees[]
createdAtFeb 6, 2023, 4:59 PM
updatedAtFeb 6, 2023, 10:49 PM
githubUrlhttps://github.com/neomjs/neo/issues/3998
authormxmrtns
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 6, 2023, 10:49 PM

button.Base: UI variations

Closed v8.1.0 enhancement
mxmrtns
mxmrtns commented on Feb 6, 2023, 4:59 PM

Following up on #3996

In order to cater for different UI needs, I suggest splitting up the CSS variables for buttons into 'Base'(values that should be the same across all different button types) and 'UI Variants' like Primary or Secondary.

Base

  • border-radius
  • font-family
  • font-size
  • button-outline-focus
  • [...] anything that should stay the same across the different UI button types

Primary

  • button-secondary-background-color
  • button-secondary-text-color
  • button-secondary-border-color
  • [...] anything that should be changeable for each UI variation
:hover
  • button-secondary-background-color-hover
  • button-secondary-text-color-hover
  • button-secondary-border-colour-hover
:active
  • button-secondary-background-color-active
  • button-secondary-text-color-active
  • button-secondary-border-color-active
Disabled
  • button-secondary-background-color-disabled
  • button-secondary-text-color-active-disabled
  • button-secondary-border-color-active-disabled

The same variable structure would be needed for the following UI button types:

  • Secondary
  • Tertiary
  • Ghost
mxmrtns added the enhancement label on Feb 6, 2023, 4:59 PM
tobiu referenced in commit db156ed - "#3998 border-color for secondary & tertiary uis" on Feb 6, 2023, 8:15 PM
tobiu referenced in commit dff2b5c - "#3998 renamed active button styles to better follow our naming convention" on Feb 6, 2023, 8:30 PM
tobiu referenced in commit 6adc883 - "#3998 active background-color, border-color & text color for secondary & tertiary uis" on Feb 6, 2023, 8:51 PM
tobiu referenced in commit 21850f4 - "#3998 glyph-color-active for primary, secondary & tertiary uis" on Feb 6, 2023, 8:59 PM
tobiu referenced in commit 2ba64fe - "#3998 background-color-hover for secondary & tertiary uis" on Feb 6, 2023, 9:06 PM
tobiu referenced in commit e16a4fb - "#3998 refactoring: button-hover-background-color => button-background-color-hover" on Feb 6, 2023, 9:09 PM
tobiu referenced in commit 32b159a - "#3998 refactoring: button-hover-border-color => button-border-color-hover" on Feb 6, 2023, 9:12 PM
tobiu referenced in commit 6e9c89f - "#3998 refactoring: button-hover-border-color => button-border-color-hover" on Feb 6, 2023, 9:12 PM
tobiu referenced in commit 13b3850 - "#3998 refactoring: button-hover-color => button-text-color-hover" on Feb 6, 2023, 9:18 PM
tobiu referenced in commit 4d9869a - "#3998 border-color-hover for secondary & tertiary uis" on Feb 6, 2023, 9:23 PM
tobiu referenced in commit 907e957 - "#3998 glyph-color-hover for primar, secondary & tertiary uis" on Feb 6, 2023, 9:29 PM
tobiu referenced in commit 72ac702 - "#3998 text-color-hover secondary & tertiary uis, adjusted the src file" on Feb 6, 2023, 9:43 PM
tobiu referenced in commit ef0f5f6 - "#3998 background-color-disabled for secondary & tertiary uis" on Feb 6, 2023, 9:58 PM
tobiu referenced in commit 8f13e26 - "#3998 border-color-disabled for secondary & tertiary uis" on Feb 6, 2023, 10:02 PM
tobiu referenced in commit be5c187 - "#3998 glyph-color-disabled for secondary & tertiary uis" on Feb 6, 2023, 10:09 PM
tobiu referenced in commit 577a1f6 - "#3998 text-color-disabled for secondary & tertiary uis" on Feb 6, 2023, 10:15 PM
tobiu referenced in commit ffcfe41 - "#3998 opacity-disabled for secondary & tertiary uis" on Feb 6, 2023, 10:21 PM
tobiu referenced in commit 2834e07 - "#3998 button.Base: scss src => refactored the items order" on Feb 6, 2023, 10:26 PM
tobiu referenced in commit ee6d12e - "#3998 ripple-background-color for secondary & tertiary uis" on Feb 6, 2023, 10:33 PM
tobiu
tobiu Feb 6, 2023, 10:49 PM

Hi Max,

this took quite a while. Let us create a follow up ticket for the ghost ui.

we most likely also need pressed states for our different button uis: https://m2.material.io/design/interaction/states.html#usage

also a follow up ticket if needed. Let's do a quick call tomorrow.

tobiu closed this issue on Feb 6, 2023, 10:49 PM