Skip to content

Button, Project Solar - focus style updates (HDS-5666) #3388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations
Choose a base branch
from
Draft

Button, Project Solar - focus style updates (HDS-5666) #3388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f408f2
HDS-5666 Test modifications to Primary button focus styles to standar…
KristinLBradley Nov 25, 2025
b769996
HDS-5666 Refactor Button focus styles to use border color and box-sha…
KristinLBradley Nov 25, 2025
fda477f
HDS-5666 Style Promary Button focus style to visually match original
KristinLBradley Nov 25, 2025
7b70bad
HDS-5666 test outline for focus rings vs. box-shadow
KristinLBradley Dec 2, 2025
ddad66b
HDS-5666 Use pseudo element focus on dropdown-toggle-icon in Advanced…
KristinLBradley Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/components/src/styles/components/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,11 @@
.hds-accordion-item__button--parent-contains-interactive {
@include hds-button();

&:focus,
&.mock-focus {
@include hds-button-state-focus();
}
// TODO: not needed if outline is used for the focus ring
// &:focus,
// &.mock-focus {
// @include hds-button-state-focus();
// }

// `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
@include hds-button-color-secondary();
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/styles/components/advanced-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,9 +433,15 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
box-shadow: var(--token-elevation-low-box-shadow);
}

// Use pseudo element for focus ring to allow offset position to be partially inside the button
Copy link
Contributor Author

@KristinLBradley KristinLBradley Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use of pseudo-elements for focus on AdvancedTable child components can be re-examined at a later time, as it seems to necessitate visual design changes.

@include hds-focus-ring-with-pseudo-element($radius: inherit);

&:focus,
&.mock-focus,
.hds-dropdown-toggle-icon--is-open {
// Override outline used on regular hds-dropdown-toggle-icon
outline: none;

&::before {
top: 0;
right: 0;
Expand Down
9 changes: 5 additions & 4 deletions packages/components/src/styles/components/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,11 @@
}
}

&:focus,
&.mock-focus {
@include hds-button-state-focus();
}
// TODO: not needed if outline is used for the focus ring
// &:focus,
// &.mock-focus {
// @include hds-button-state-focus();
// }
}

.hds-button__icon {
Expand Down
19 changes: 11 additions & 8 deletions packages/components/src/styles/components/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,14 @@

&:focus,
&.mock-focus {
@include hds-button-state-focus();
// @include hds-button-state-focus();

border-color: var(--token-color-focus-action-internal);
outline: 3px solid var(--token-color-focus-action-external);

&::before {
border-color: var(--token-color-focus-action-external);
}
// &::before {
// border-color: var(--token-color-focus-action-external);
// }
}

&:active,
Expand Down Expand Up @@ -119,10 +121,11 @@
.hds-dropdown-toggle-button {
@include hds-button();

&:focus,
&.mock-focus {
@include hds-button-state-focus();
}
// TODO: not needed if outline is used for the focus ring
// &:focus,
// &.mock-focus {
// @include hds-button-state-focus();
// }

&:disabled,
&.mock-disabled,
Expand Down
88 changes: 26 additions & 62 deletions packages/components/src/styles/mixins/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,10 @@ $hds-button-sizes: ("small", "medium", "large");
cursor: not-allowed;
}

@mixin hds-button-state-focus() {
box-shadow: none;

&::before {
// the position absolute of an element is computed from the inside of the border of the container
// so we have to take in account the border width of the pseudo-element container itself
$shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width)));
$radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width));
position: absolute;
top: $shift;
right: $shift;
bottom: $shift;
left: $shift;
z-index: -1;
border: var(--token-button-focus-border-width) solid transparent;
border-radius: $radius;
content: "";
}
}
// TODO: not needed if outline is used for the focus ring
// @mixin hds-button-state-focus() {
// box-shadow: none;
// }

@mixin hds-button-color-primary() {
color: var(--token-button-foreground-color-primary-default);
Expand All @@ -76,20 +61,16 @@ $hds-button-sizes: ("small", "medium", "large");
color: var(--token-button-foreground-color-primary-focus);
background-color: var(--token-button-surface-color-primary-focus);
border-color: var(--token-button-border-color-primary-focus-internal);

&::before {
// the position absolute of an element is computed from the inside of the border of the container
// so we have to take in account the border width of the pseudo-element container itself
// plus for the primary button we want to have a 2px gap between the button and the focus
$shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
$radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
top: $shift;
right: $shift;
bottom: $shift;
left: $shift;
border-color: var(--token-button-border-color-primary-focus-external);
border-radius: $radius;
}
// border-color: #fff; // TEST: add greater contrast & standardize with other variants (remove outline-offset)

// TEST: Replacement of pseudo-element-based focus ring
// Test: outline instead of box-shadow
outline: 3px solid var(--token-color-focus-action-external);
outline-offset: 2px; // non-standard (other Button variants don't use)
// box-shadow: 0 0 0 3px var(--token-color-focus-action-external); // standardized w/ other variants
// box-shadow:
// 0 0 0 2px #fff,
// 0 0 0 5px var(--token-color-focus-action-external); // similar to original style using pseudo-element
}

&:active,
Expand All @@ -98,10 +79,6 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-primary-active);
border-color: var(--token-button-border-color-primary-active);
box-shadow: none;

&::before {
border-color: transparent;
}
}
}

Expand All @@ -125,9 +102,10 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-secondary-focus);
border-color: var(--token-button-border-color-secondary-focus-internal);

&::before {
border-color: var(--token-button-border-color-secondary-focus-external);
}
// TEST: Replacement of pseudo-element-based focus ring
// Test: outline instead of box-shadow
outline: 3px solid var(--token-button-border-color-secondary-focus-external);
// box-shadow: 0 0 0 3px var(--token-button-border-color-secondary-focus-external);
}

&:active,
Expand All @@ -136,10 +114,6 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-secondary-active);
border-color: var(--token-button-border-color-secondary-active);
box-shadow: none;

&::before {
border-color: transparent;
}
}
}

Expand All @@ -162,9 +136,10 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-tertiary-focus);
border-color: var(--token-button-border-color-tertiary-focus-internal);

&::before {
border-color: var(--token-button-border-color-tertiary-focus-external);
}
// TEST: Replacement of pseudo-element-based focus ring
// Test: outline instead of box-shadow
outline: 3px solid var(--token-button-border-color-tertiary-focus-external);
// box-shadow: 0 0 0 3px var(--token-button-border-color-tertiary-focus-external);
}

&:active,
Expand All @@ -173,10 +148,6 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-tertiary-active);
border-color: var(--token-button-border-color-tertiary-active);
box-shadow: none;

&::before {
border-color: transparent;
}
}

//
Expand All @@ -195,10 +166,6 @@ $hds-button-sizes: ("small", "medium", "large");
&.mock-disabled:hover {
background-color: transparent;
border-color: transparent;

&::before {
border-color: transparent;
}
}
}

Expand All @@ -222,9 +189,10 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-critical-focus);
border-color: var(--token-button-border-color-critical-focus-internal);

&::before {
border-color: var(--token-button-border-color-critical-focus-external);
}
// TEST: Replacement of pseudo-element-based focus ring
// Test: outline instead of box-shadow
outline: 3px solid var(--token-button-border-color-critical-focus-external);
// box-shadow: 0 0 0 3px var(--token-button-border-color-critical-focus-external);
}

&:active,
Expand All @@ -233,10 +201,6 @@ $hds-button-sizes: ("small", "medium", "large");
background-color: var(--token-button-surface-color-critical-active);
border-color: var(--token-button-border-color-critical-active);
box-shadow: none;

&::before {
border-color: transparent;
}
}
}

Expand Down
Loading