fixing focus ring on action buttons

hashicorp · Dec 24, 2024 · 904ef46 · 904ef46
1 parent caf29a1
commit 904ef46
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/packages/components/src/components/hds/code-editor/full-screen-button.hbs b/packages/components/src/components/hds/code-editor/full-screen-button.hbs
@@ -1,7 +1,8 @@
-<Hds::CodeEditor::Button
+<Hds::Button
   class={{this.className}}
   aria-pressed={{@isFullScreen}}
   @isIconOnly={{true}}
+  @color="secondary"
   @size="small"
   @icon={{this.icon}}
   @text="Toggle full screen view"

diff --git a/packages/components/src/styles/components/code-editor/index.scss b/packages/components/src/styles/components/code-editor/index.scss
@@ -78,6 +78,10 @@
     display: flex;
     gap: 8px;
     align-items: center;
+
+    .hds-button {
+      outline-offset: 0;
+    }
   }
 
   .hds-code-editor__editor {

diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
@@ -52,7 +52,6 @@ import type HdsCardContainerComponent from './components/hds/card/container.ts';
 import type HdsCodeEditorComponent from './components/hds/code-editor/index.ts';
 import type HdsCodeEditorDescriptionComponent from './components/hds/code-editor/description.ts';
 import type HdsCodeEditorTitleComponent from './components/hds/code-editor/title.ts';
-import type HdsCodeEditorButtonComponent from './components/hds/code-editor/button.ts';
 import type HdsCodeEditorFullScreenButtonComponent from './components/hds/code-editor/full-screen-button.ts';
 import type HdsCodeBlockComponent from './components/hds/code-block';
 import type HdsCodeBlockCopyButtonComponent from './components/hds/code-block/copy-button';
@@ -384,8 +383,6 @@ export default interface HdsComponentsRegistry {
   'hds/code-editor/description': typeof HdsCodeEditorDescriptionComponent;
   'Hds::CodeEditor::Title': typeof HdsCodeEditorTitleComponent;
   'hds/code-editor/title': typeof HdsCodeEditorTitleComponent;
-  'Hds::CodeEditor::Button': typeof HdsCodeEditorButtonComponent;
-  'hds/code-editor/button': typeof HdsCodeEditorButtonComponent;
   'Hds::CodeEditor::FullScreenButton': typeof HdsCodeEditorFullScreenButtonComponent;
   'hds/code-editor/full-screen-button': typeof HdsCodeEditorFullScreenButtonComponent;
 

diff --git a/showcase/app/templates/components/code-editor.hbs b/showcase/app/templates/components/code-editor.hbs
@@ -57,7 +57,7 @@
   <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With custom header content">
       <Hds::CodeEditor>
-        <Hds::Button @text="Custom button" />
+        <Hds::Button @text="Custom button" @size="small" />
       </Hds::CodeEditor>
     </SG.Item>
   </Shw::Grid>
@@ -74,15 +74,15 @@
       <Hds::CodeEditor as |CE|>
         <CE.Title>Code editor with title</CE.Title>
         <CE.Description>This is a code editor with a description</CE.Description>
-        <Hds::Button @text="Custom button" />
+        <Hds::Button @text="Custom button" @size="small" />
         <Hds::Icon @name="code" @color="#fff" />
       </Hds::CodeEditor>
     </SG.Item>
     <SG.Item @label="With title, description, internal actions, and custom content">
       <Hds::CodeEditor @hasFullScreenButton={{true}} @hasCopyButton={{true}} as |CE|>
         <CE.Title>Code editor with title</CE.Title>
         <CE.Description>This is a code editor with a description</CE.Description>
-        <Hds::Button @text="Custom button" />
+        <Hds::Button @text="Custom button" @size="small" />
         <Hds::Icon @name="code" @color="#fff" />
       </Hds::CodeEditor>
     </SG.Item>