HDS-5666 Use pseudo element focus on dropdown-toggle-icon in AdvancedTable for now overriding outline style

Author: KristinLBradley

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

@@ -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
+  @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;

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

@@ -941,13 +941,43 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-x-small);
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
 }
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-interactive);
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.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 {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.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 {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
+  outline: none;
+}
 .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,
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
   top: 0;

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

@@ -1477,13 +1477,43 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: var(--token-border-radius-x-small);
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
 }
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:hover, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-hover {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-interactive);
   border-color: var(--token-color-border-strong);
   box-shadow: var(--token-elevation-low-box-shadow);
 }
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.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 {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.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 {
+  box-shadow: none;
+}
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon:focus, .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon.mock-focus,
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open {
+  outline: none;
+}
 .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,
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon .hds-dropdown-toggle-icon--is-open::before {
   top: 0;