Skip to content

Commit ddad66b

Browse files
HDS-5666 Use pseudo element focus on dropdown-toggle-icon in AdvancedTable for now overriding outline style
1 parent 7b70bad commit ddad66b

File tree

3 files changed

+66
-0
lines changed

3 files changed

+66
-0
lines changed

packages/components/src/styles/components/advanced-table.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -433,9 +433,15 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
433433
box-shadow: var(--token-elevation-low-box-shadow);
434434
}
435435

436+
// Use pseudo element for focus ring to allow offset position to be partially inside the button
437+
@include hds-focus-ring-with-pseudo-element($radius: inherit);
438+
436439
&:focus,
437440
&.mock-focus,
438441
.hds-dropdown-toggle-icon--is-open {
442+
// Override outline used on regular hds-dropdown-toggle-icon
443+
outline: none;
444+
439445
&::before {
440446
top: 0;
441447
right: 0;

showcase/public/assets/styles/@hashicorp/design-system-components-common.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -941,13 +941,43 @@
941941
background-color: transparent;
942942
border: 1px solid transparent;
943943
border-radius: var(--token-border-radius-x-small);
944+
position: relative;
945+
outline-style: solid;
946+
outline-color: transparent;
947+
isolation: isolate;
944948
}
945949
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
946950
color: var(--token-color-foreground-primary);
947951
background-color: var(--token-color-surface-interactive);
948952
border-color: var(--token-color-border-strong);
949953
box-shadow: var(--token-elevation-low-box-shadow);
950954
}
955+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
956+
position: absolute;
957+
top: 0;
958+
right: 0;
959+
bottom: 0;
960+
left: 0;
961+
z-index: -1;
962+
border-radius: inherit;
963+
content: "";
964+
}
965+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before {
966+
box-shadow: var(--token-focus-ring-action-box-shadow);
967+
}
968+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
969+
box-shadow: none;
970+
}
971+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
972+
box-shadow: var(--token-focus-ring-action-box-shadow);
973+
}
974+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
975+
box-shadow: none;
976+
}
977+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
978+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
979+
outline: none;
980+
}
951981
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before,
952982
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
953983
top: 0;

showcase/public/assets/styles/@hashicorp/design-system-components.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1477,13 +1477,43 @@
14771477
background-color: transparent;
14781478
border: 1px solid transparent;
14791479
border-radius: var(--token-border-radius-x-small);
1480+
position: relative;
1481+
outline-style: solid;
1482+
outline-color: transparent;
1483+
isolation: isolate;
14801484
}
14811485
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
14821486
color: var(--token-color-foreground-primary);
14831487
background-color: var(--token-color-surface-interactive);
14841488
border-color: var(--token-color-border-strong);
14851489
box-shadow: var(--token-elevation-low-box-shadow);
14861490
}
1491+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
1492+
position: absolute;
1493+
top: 0;
1494+
right: 0;
1495+
bottom: 0;
1496+
left: 0;
1497+
z-index: -1;
1498+
border-radius: inherit;
1499+
content: "";
1500+
}
1501+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before {
1502+
box-shadow: var(--token-focus-ring-action-box-shadow);
1503+
}
1504+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
1505+
box-shadow: none;
1506+
}
1507+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
1508+
box-shadow: var(--token-focus-ring-action-box-shadow);
1509+
}
1510+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:active::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
1511+
box-shadow: none;
1512+
}
1513+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
1514+
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
1515+
outline: none;
1516+
}
14871517
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus::before, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus::before,
14881518
.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
14891519
top: 0;

0 commit comments

Comments
 (0)