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
KristinLBradley wants to merge 7 commits into
base: project-solar/phase-1-main-feature-branch
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
7 commits
Select commit Hold shift + click to select a range
c78c9aa
HDS-5666 Test modifications to Primary button focus styles to standar…
KristinLBradley Nov 25, 2025
0608ac3
HDS-5666 Refactor Button focus styles to use border color and box-sha…
KristinLBradley Nov 25, 2025
21b23c3
HDS-5666 Style Promary Button focus style to visually match original
KristinLBradley Nov 25, 2025
3200321
HDS-5666 test outline for focus rings vs. box-shadow
KristinLBradley Dec 2, 2025
911df9f
HDS-5666 Use pseudo element focus on dropdown-toggle-icon in Advanced…
KristinLBradley Dec 2, 2025
67f7a36
HDS-5666 Add outline color for CodeBlock CopyButton focus state
KristinLBradley Dec 3, 2025
6b42070
HDS-5666 Add comment explaining purpose of pseudo element for Accordi…
KristinLBradley Dec 3, 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
10 changes: 6 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 @@ -138,6 +138,7 @@

// entire toggle area is interactive
.hds-accordion-item__button--parent-does-not-contain-interactive {
// Pseudo element is used to make entire AccordionItemToggle area interactive (vs. just its nested button) and to style the focus ring accordingly
@include hds-focus-ring-with-pseudo-element(
$top: var(--hds-accordion-item-focus-ring-offset),
$right: var(--hds-accordion-item-focus-ring-offset),
Expand All @@ -159,10 +160,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
5 changes: 1 addition & 4 deletions packages/components/src/styles/components/code-block/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,7 @@ $hds-code-block-code-footer-height: 48px;
color: var(--hds-code-block-color-foreground-primary);
background-color: var(--hds-code-block-color-surface-faint);
border-color: var(--hds-code-block-color-focus-action-internal);

&::before {
border-color: var(--hds-code-block-color-focus-action-external);
}
outline-color: var(--hds-code-block-color-focus-action-external);
}

.hds-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
23 changes: 3 additions & 20 deletions packages/components/src/styles/mixins/_interactive-dark-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:

// Used to apply dark theme to interactive elements such as Button & Dropdown
@mixin hds-interactive-dark-theme($add-visible-border: true, $is-within-side-nav: false) {
// Override token used in focus ring mixin
--token-focus-ring-action-box-shadow: #{$hds-interactive-dark-theme-focus-ring-action-box-shadow};

// Default:
border: 1px solid transparent;
cursor: pointer;
Expand Down Expand Up @@ -59,25 +56,11 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:
// Focus:
&:focus,
&.mock-focus {
@include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);

color: var(--token-color-foreground-high-contrast);
background-color: var(--token-color-palette-neutral-700);

@if ($add-visible-border) {
border-color: $hds-interactive-dark-theme-color-focus-action-internal;
}

// focus ring:
&::before {
color: var(--token-color-foreground-high-contrast);
border: none;
}
}

// override style removing the focus style
&:focus:focus:not(:focus-visible)::before {
box-shadow: $hds-interactive-dark-theme-focus-ring-action-box-shadow;
border-color: $hds-interactive-dark-theme-color-focus-action-internal;
outline: 3px solid #{$hds-interactive-dark-theme-color-focus-action-external};
outline-offset: 0; // override Primary button variant offset
}

// Active:
Expand Down
Loading