Refactored custom content to add a new Generic container component, s…

…implify CSS layout, and leave styling of custom content up to consumer integrated Kristin's suggestions into existing styles
hashicorp · Jan 13, 2025 · 374f40f · 374f40f
1 parent 27e0310
commit 374f40f
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 28 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -167,6 +167,7 @@
       "./components/hds/code-block/title.js": "./dist/_app_/components/hds/code-block/title.js",
       "./components/hds/code-editor/description.js": "./dist/_app_/components/hds/code-editor/description.js",
       "./components/hds/code-editor/full-screen-button.js": "./dist/_app_/components/hds/code-editor/full-screen-button.js",
+      "./components/hds/code-editor/generic.js": "./dist/_app_/components/hds/code-editor/generic.js",
       "./components/hds/code-editor/index.js": "./dist/_app_/components/hds/code-editor/index.js",
       "./components/hds/code-editor/title.js": "./dist/_app_/components/hds/code-editor/title.js",
       "./components/hds/copy/button/index.js": "./dist/_app_/components/hds/copy/button/index.js",

diff --git a/packages/components/src/components/hds/code-editor/generic.hbs b/packages/components/src/components/hds/code-editor/generic.hbs
@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-code-editor__header-generic" ...attributes>
+  {{yield}}
+</div>
diff --git a/packages/components/src/components/hds/code-editor/generic.ts b/packages/components/src/components/hds/code-editor/generic.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TemplateOnlyComponent from '@ember/component/template-only';
+
+export interface HdsCodeEditorGenericSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const HdsCodeEditorGeneric =
+  TemplateOnlyComponent<HdsCodeEditorGenericSignature>();
+
+export default HdsCodeEditorGeneric;
diff --git a/packages/components/src/components/hds/code-editor/index.hbs b/packages/components/src/components/hds/code-editor/index.hbs
@@ -19,6 +19,7 @@
           (hash
             Title=(component "hds/code-editor/title" editorId=this._id onInsert=this.registerTitleElement)
             Description=(component "hds/code-editor/description")
+            Generic=(component "hds/code-editor/generic")
           )
         }}
       </div>

diff --git a/packages/components/src/components/hds/code-editor/index.ts b/packages/components/src/components/hds/code-editor/index.ts
@@ -13,6 +13,7 @@ import type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from 's
 import type { HdsButtonSignature } from 'src/components/hds/button';
 import type { HdsCodeEditorDescriptionSignature } from './description';
 import type { HdsCodeEditorTitleSignature } from './title';
+import type { HdsCodeEditorGenericSignature } from './generic';
 import type { EditorView } from '@codemirror/view';
 import { guidFor } from '@ember/object/internals';
 
@@ -32,6 +33,7 @@ export interface HdsCodeEditorSignature {
       {
         Title?: ComponentLike<HdsCodeEditorTitleSignature>;
         Description?: ComponentLike<HdsCodeEditorDescriptionSignature>;
+        Generic?: ComponentLike<HdsCodeEditorGenericSignature>;
         Button?: ComponentLike<HdsButtonSignature>;
       },
     ];

diff --git a/packages/components/src/styles/components/code-editor/index.scss b/packages/components/src/styles/components/code-editor/index.scss
@@ -40,36 +40,24 @@
 
   .hds-code-editor__header-content {
     display: flex;
+    flex-direction: column;
     flex-grow: 1;
-    flex-wrap: wrap;
-    align-items: center;
-
-    // child element that is not the title/description and has subsequent siblings
-    > :not(.hds-code-editor__title, .hds-code-editor__description):has(+ *) {
-      margin-right: 8px;
-    }
-  }
-
-  .hds-code-editor__title,
-  .hds-code-editor__description {
-    width: 100%;
-
-    // if the title/description has subsequent siblings, add a bottom margin
-    &:has(+ *) {
-      margin-bottom: 12px;
-    }
-
-    &:has(+ .hds-code-editor__title, + .hds-code-editor__description) {
-      margin-bottom: 4px;
-    }
   }
 
   .hds-code-editor__title {
     color: var(--hds-code-editor-color-foreground-primary);
+
+    + .hds-code-editor__description {
+      margin-top: 4px;
+    }
   }
 
   .hds-code-editor__description {
     color: var(--hds-code-editor-color-foreground-faint);
+
+    + .hds-code-editor__header-generic {
+      margin-top: 12px;
+    }
   }
 
   .hds-code-editor__header-actions {

diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
@@ -51,6 +51,7 @@ import type HdsApplicationStateMediaComponent from './components/hds/application
 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 HdsCodeEditorGenericComponent from './components/hds/code-editor/generic.ts';
 import type HdsCodeEditorTitleComponent from './components/hds/code-editor/title.ts';
 import type HdsCodeEditorFullScreenButtonComponent from './components/hds/code-editor/full-screen-button.ts';
 import type HdsCodeBlockComponent from './components/hds/code-block';
@@ -381,6 +382,8 @@ export default interface HdsComponentsRegistry {
   'hds/code-editor': typeof HdsCodeEditorComponent;
   'Hds::CodeEditor::Description': typeof HdsCodeEditorDescriptionComponent;
   'hds/code-editor/description': typeof HdsCodeEditorDescriptionComponent;
+  'Hds::CodeEditor::Generic': typeof HdsCodeEditorGenericComponent;
+  'hds/code-editor/generic': typeof HdsCodeEditorGenericComponent;
   'Hds::CodeEditor::Title': typeof HdsCodeEditorTitleComponent;
   'hds/code-editor/title': typeof HdsCodeEditorTitleComponent;
   'Hds::CodeEditor::FullScreenButton': typeof HdsCodeEditorFullScreenButtonComponent;

diff --git a/showcase/app/styles/showcase-pages/code-editor.scss b/showcase/app/styles/showcase-pages/code-editor.scss
@@ -3,4 +3,10 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// CODE-EDITOR
+// CODE-EDITOR
+
+.my-code-editor-custom-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
diff --git a/showcase/app/templates/components/code-editor.hbs b/showcase/app/templates/components/code-editor.hbs
@@ -60,8 +60,10 @@
   <Shw::Text::H3>Custom content</Shw::Text::H3>
   <Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
     <SG.Item @label="With custom header content">
-      <Hds::CodeEditor @ariaLabel="With custom header content">
-        <Hds::Button @text="Custom button" @size="small" />
+      <Hds::CodeEditor @ariaLabel="With custom header content" as |CE|>
+        <CE.Generic class="my-code-editor-custom-content">
+          <Hds::Button @text="Custom button" @size="small" />
+        </CE.Generic>
       </Hds::CodeEditor>
     </SG.Item>
   </Shw::Grid>
@@ -78,16 +80,20 @@
       <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" @size="small" />
-        <Hds::Icon @name="code" @color="#fff" />
+        <CE.Generic class="my-code-editor-custom-content">
+          <Hds::Button @text="Custom button" @size="small" />
+          <Hds::Icon @name="code" @color="#fff" />
+        </CE.Generic>
       </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" @size="small" />
-        <Hds::Icon @name="code" @color="#fff" />
+        <CE.Generic class="my-code-editor-custom-content">
+          <Hds::Button @text="Custom button" @size="small" />
+          <Hds::Icon @name="code" @color="#fff" />
+        </CE.Generic>
       </Hds::CodeEditor>
     </SG.Item>
   </Shw::Grid>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ @@
               (hash
                 Title=(component "hds/code-editor/title" editorId=this._id onInsert=this.registerTitleElement)
                 Description=(component "hds/code-editor/description")
+                Generic=(component "hds/code-editor/generic")
               )
             }}
           </div>
@@ Expand Down @@