Button: Simplify focus styles application including `box-shadow`
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Jun 11 2022, 3:02 AM

Description

Goal

Currently we're repeating the focus styles several times over the different Button types and actions (neutral/progressive/destructive).

Not only do we repeat the code, it has been also an invitation to mix up focus styles:
We're currently feature for example the primary only box-shadow with white inset on the normal progressive button, where we shouldn't use the primary ones.

Current wrong implementation:

.cdx-button--type-normal.cdx-button--action-progressive:enabled:focus {
    border-color: #36c;
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}

Criteria for Done

DRY up focus code in Button component
Fix setting of normal progressive/destructive buttons to use base focus only

Details

Subject	Repo	Branch	Lines +/-
[POC] Limit focus styles to non-primary buttons only	design/codex	main	+1 -1
Button, styles: Reorder and cleanup focus styles	design/codex	main	+38 -57
Button, styles: Removing default button `:active` selector	design/codex	main	+1 -5

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		• STH	T302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
Invalid		None	T302025 Upgrade Codex to Beta version
Resolved		Volker_E	T293127 [EPIC] Design System Foundation: Design and define design tokens
Resolved		None	T314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
Resolved		bmartinezcalvo	T295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
Resolved		Volker_E	T296995 Define the system's color palette
Resolved		Volker_E	T297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
Resolved		Volker_E	T305236 Create visited red link color token
Resolved		Volker_E	T313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
Resolved		ldelench_wmf	T322833 Update Yellow 600 for warning color
Resolved		Volker_E	T324449 Add new colors used in Message component and update border colors to the darkest tone
Resolved		• EUdoh-WMF	T322960 Define `accent-color` design token
Resolved		Sarai-WMDE	T296998 [Epic] Define the system's typographic styles and scale
Resolved		• DAbad	T305920 Define the system's sans, serif and monospace typefaces
Resolved		Volker_E	T305947 Define the system's typographic scale (font sizes and line-heights)
Resolved		bmartinezcalvo	T321470 Use the system's typographic scale tokens (font size and line-heights)
Resolved		• KieranMcCann	T303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
Open		None	T331612 Document internationalization limitations of Figma font selection in Typography guidelines
Duplicate		None	T309158 Update Wikimedia Design Style Guide with typeface choices
Resolved		Volker_E	T313693 Implement system typeface choices in Codex tokens
Resolved		• DAbad	T318023 Define the system's typographic styles on text decoration
Resolved		Volker_E	T322707 Provide `tab-size` option and decision token
Resolved		• DAbad	T322811 Provide (legacy) font families as Codex tokens
Resolved		Sarai-WMDE	T297000 Define the design system's size and spacing scale
Resolved		Catrope	T324367 Enable Codex tokens to work with different font sizes
Open		None	T326900 Vertical centering issues of text/multiline text and icons in several components
Resolved		ovasileva	T328053 Verify impact of Design Systems Team's Codex Update on Web properties
Resolved	BUG REPORT	Volker_E	T329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
Resolved		Volker_E	T297001 Define the system's opacities
Resolved		Volker_E	T305084 Add 0.3 opacity
Resolved		Volker_E	T297003 Define the system's box shadow styles
Resolved		Volker_E	T310409 Button: Simplify focus styles application including `box-shadow`
Resolved		Sarai-WMDE	T297007 Define the system's iconography
Resolved		Volker_E	T300562 Define Border tokens
Resolved		bmartinezcalvo	T302181 Define the system's cursors
Resolved		Catrope	T304443 Document Motion tokens (animations and transitions)
Resolved		• DAbad	T303522 Decide on CSS breakpoints for the design system
Resolved		Volker_E	T322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Volker_E created this task.Jun 11 2022, 3:02 AM

Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptJun 11 2022, 3:02 AM

Volker_E renamed this task from Simplify Button focus styles including `box-shadow` to Button: Simplify focus styles application including `box-shadow`.Jun 11 2022, 3:18 AM

Volker_E updated the task description. (Show Details)

Change 804686 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Button, styles: Reorder and cleanup focus styles

https://gerrit.wikimedia.org/r/804686

gerritbot added a project: Patch-For-Review.Jun 11 2022, 4:47 AM

Change 804688 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Button, styles: Removing default button `:active` selector

https://gerrit.wikimedia.org/r/804688

Change 804686 merged by jenkins-bot:

[design/codex@main] Button, styles: Reorder and cleanup focus styles

https://gerrit.wikimedia.org/r/804686

Change 804688 merged by jenkins-bot:

[design/codex@main] Button, styles: Removing default button `:active` selector

https://gerrit.wikimedia.org/r/804688

Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Jun 18 2022, 2:41 AM

Volker_E mentioned this in T311035: Checkbox, ToggleSwitch: Simplify state style hierarchy.Jun 21 2022, 6:37 AM

Volker_E moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.Jun 21 2022, 8:10 AM

Marking as "Stalled" & moving back to "Needs Refinement" - please provide an update if this task is still in progress.

ldelench_wmf moved this task from Inbox to Needs Refinement on the Design-System-Team board.Aug 14 2022, 10:58 PM

@Volker_E is this task finished, or does more work need to be done here?

Change 831172 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] [POC] Limit focus styles to non-primary buttons only

https://gerrit.wikimedia.org/r/831172

@Catrope just putting the POC there for completion to not duplicate focus styles on primary buttons.
But in my opinion the real improvements have been fulfilled on task.

Change 831172 abandoned by VolkerE:

[design/codex@main] [POC] Limit focus styles to non-primary buttons only

Reason:

Just for completion on task

https://gerrit.wikimedia.org/r/831172

Volker_E closed this task as Resolved.Sep 10 2022, 5:02 AM

Volker_E removed a project: Patch-For-Review.