Page MenuHomePhabricator

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

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

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
ResolvedVolker_E
Resolved EUdoh-WMF
ResolvedSarai-WMDE
ResolvedDAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
ResolvedDAbad
ResolvedVolker_E
ResolvedDAbad
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
ResolvedDAbad
ResolvedVolker_E

Event Timeline

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

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

ldelench_wmf changed the task status from Open to Stalled.Aug 14 2022, 10:58 PM

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

@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 removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E added a project: CSS.