Styling fixes to table and list components in terraform-module-design-defaults-versioning-interfaces article

Author: webstackdev

src/components/Social/Highlighter/client/__tests__/index.spec.ts

@@ -167,6 +167,7 @@ describe('HighlighterElement', () => {
 
       const dialog = element.querySelector('.share-dialog') as HTMLElement | null
       expect(dialog?.getAttribute('role')).toBe('toolbar')
+      expect(dialog?.querySelector('.share-dialog__text')?.textContent).toBe('Share Selection')
 
       const describedBy = trigger?.getAttribute('aria-describedby')
       expect(describedBy).toBeTruthy()

src/components/Social/Highlighter/client/__tests__/selectors.spec.ts

@@ -59,6 +59,10 @@ describe('HighlighterElement selectors', () => {
           dialog.getAttribute('role'),
           'HighlighterElement dialog should be role="toolbar"'
         ).toBe('toolbar')
+        expect(
+          dialog.querySelector('.share-dialog__text')?.textContent,
+          'HighlighterElement should render a visible share label inside the dialog'
+        ).toBe('Share Selection')
         expect(
           shareButtons.length,
           'HighlighterElement should render at least one share button'

src/components/Social/Highlighter/client/index.ts

@@ -32,6 +32,7 @@ const COMPONENT_TAG_NAME = 'highlighter-element'
 const ICON_BANK_ID = 'highlighter-icon-bank'
 
 let highlighterInstanceCounter = 0
+const VISIBLE_SHARE_LABEL = 'Share Selection'
 
 /**
  * Highlighter element that creates a shareable text highlight
@@ -144,6 +145,7 @@ export class HighlighterElement extends LitElement {
           aria-label="${this.label}"
           aria-hidden="true"
         >
+          <span class="share-dialog__text">${VISIBLE_SHARE_LABEL}</span>
           <span class="share-dialog__buttons">
             ${platforms.map(
               platform => html`
@@ -235,11 +237,13 @@ export class HighlighterElement extends LitElement {
       return
     }
 
-    dialog.style.backgroundColor = 'var(--color-page-offset)'
+    dialog.style.backgroundColor = 'var(--color-page-base)'
 
     const arrow = queryShareDialogArrow(dialog)
     if (arrow) {
-      arrow.style.borderTopColor = 'var(--color-page-offset)'
+      arrow.style.backgroundColor = 'var(--color-page-base)'
+      arrow.style.borderBottomColor = 'var(--color-trim-offset)'
+      arrow.style.borderRightColor = 'var(--color-trim-offset)'
     }
   }
 

src/components/Social/Highlighter/index.css

@@ -35,12 +35,15 @@ highlighter-element .highlighter__trigger:focus-visible .highlighter__content {
 }
 
 highlighter-element .share-dialog {
-  background-color: var(--color-page-offset);
+  align-items: center;
+  background-color: var(--color-page-base);
+  border: 1px solid var(--color-trim-offset);
   border-radius: 0.5rem;
   bottom: calc(100% + 0.75rem);
   display: none;
+  gap: 0.125rem;
   left: 50%;
-  padding: 0.5rem;
+  padding: 0.125rem 0.375rem;
   position: absolute;
   transform: translateX(-50%);
   white-space: nowrap;
@@ -67,7 +70,15 @@ highlighter-element .share-dialog::after {
 }
 
 highlighter-element .share-dialog[aria-hidden="false"] {
-  display: block;
+  display: flex;
+}
+
+highlighter-element .share-dialog__text {
+  color: var(--color-content);
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-right: 0.125rem;
+  padding: 0 0.5rem 0 0.25rem;
 }
 
 highlighter-element .share-dialog__buttons {
@@ -79,16 +90,16 @@ highlighter-element .share-dialog__buttons {
 highlighter-element .share-button {
   align-items: center;
   appearance: none;
-  background-color: transparent;
+  background-color: var(--color-page-offset);
   border: none;
   border-radius: 9999px;
   cursor: pointer;
   display: flex;
-  height: 2.5rem;
+  height: 2.125rem;
   justify-content: center;
-  padding: 0.5rem;
+  padding: 0.4rem;
   transition: background-color 0.2s ease, transform 0.1s ease;
-  width: 2.5rem;
+  width: 2.125rem;
 }
 
 highlighter-element .share-button:focus-visible {
@@ -97,7 +108,6 @@ highlighter-element .share-button:focus-visible {
 }
 
 highlighter-element .share-button:hover {
-  background-color: var(--color-page-base);
   transform: translateY(-1px);
 }
 
@@ -112,13 +122,14 @@ highlighter-element .share-icon {
 }
 
 highlighter-element .share-dialog__arrow {
-  border-left: 0.5rem solid transparent;
-  border-right: 0.5rem solid transparent;
-  border-top: 0.5rem solid var(--color-page-offset);
+  background-color: var(--color-page-base);
+  border-bottom: 1px solid var(--color-trim-offset);
+  border-right: 1px solid var(--color-trim-offset);
   bottom: -0.375rem;
-  height: 0;
+  height: 0.75rem;
   left: 50%;
   position: absolute;
-  transform: translateX(-50%);
-  width: 0;
+  pointer-events: none;
+  transform: translateX(-50%) rotate(45deg);
+  width: 0.75rem;
 }

src/content/articles/terraform-module-design-defaults-versioning-interfaces/index.mdx

@@ -15,7 +15,7 @@ featured: true
 
 I've seen production modules with 47 required variables — modules where using them meant copying a wall of configuration from the README and hoping you didn't miss anything. I've also inherited the opposite: modules with opaque defaults that worked great until someone deployed to production and discovered deletion protection was off by default.
 
-The difference between modules that teams love and modules that teams fork-and-forget comes down to interface design. Specifically, how you handle defaults and what you consider a breaking change. Get these right, and your module becomes the obvious choice. Get them wrong, and you'll spend more time fielding support questions than writing infrastructure.
+<Highlighter>The difference between modules that teams love and modules that teams fork-and-forget comes down to interface design.</Highlighter> Specifically, how you handle defaults and what you consider a breaking change. Get these right, and your module becomes the obvious choice. Get them wrong, and you'll spend more time fielding support questions than writing infrastructure.
 
 ## Required vs Optional: The 80% Rule
 
@@ -28,7 +28,7 @@ Think of it this way: if 80% of your consumers will use the same value, make it
 I organize variables into three categories based on what consumers need to provide:
 
 <List
-  variant="check-icons-list"
+  variant="numbered-with-background-list"
   items={[
     {
       lead: 'Required variables',
@@ -124,7 +124,8 @@ Users can opt out for development environments; they shouldn't have to opt __in_
 Here's where module maintenance gets tricky. You want to improve your module — fix bugs, add features, clean up technical debt. But every change risks breaking someone's deployment. Understanding which changes are safe and which require a major version bump saves you from angry Slack messages.
 
 <Table
-  variant="vertical-column-delineation-table"
+  variant="criteria-highlight-table"
+  fullWidth={false}
   content={{
     thead: {
       th: ['Change Type', 'Breaking?', 'Migration Action'],
@@ -179,7 +180,10 @@ moved {
 Semantic versioning tells consumers what to expect:
 
 <List
-  variant="check-icons-list"
+  variant="side-by-side-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-18 mb-6",
+  }}
   items={[
     {
       lead: 'Major version (2.0.0 → 3.0.0):',