From e541a43b370c9d42079dd2e889e24e44f1299d03 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 6 Jul 2021 16:57:20 +0100
Subject: [PATCH] ui: Fixup definition-table + copy-button margin (#10512)

---
 .../components/definition-table/README.mdx    | 25 +++++++++++++++++++
 .../components/definition-table/debug.scss    |  5 ++++
 .../components/definition-table/layout.scss   |  4 +--
 ui/packages/consul-ui/app/styles/debug.scss   |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 ui/packages/consul-ui/app/components/definition-table/README.mdx
 create mode 100644 ui/packages/consul-ui/app/components/definition-table/debug.scss

diff --git a/ui/packages/consul-ui/app/components/definition-table/README.mdx b/ui/packages/consul-ui/app/components/definition-table/README.mdx
new file mode 100644
index 0000000000..971b59ee7b
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/definition-table/README.mdx
@@ -0,0 +1,25 @@
+---
+class: css
+---
+# definition-table
+
+Simple CSS component to render a `dl` similar to a table with column headers.
+Contents of the `dd` are currently inline-block'ed for CopyButton reasons.
+
+```hbs preview-template
+<div class="definition-table">
+  <dl>
+    <dt>Title 1</dt>
+    <dd>Value</dd>
+    <dt>Title 2</dt>
+    <dd><CopyButton @name="Title 2" @value="Value"/>Value</dd>
+  </dl>
+</div>
+```
+
+
+```css
+.definition-table {
+  @extend %definition-table;
+}
+```
diff --git a/ui/packages/consul-ui/app/components/definition-table/debug.scss b/ui/packages/consul-ui/app/components/definition-table/debug.scss
new file mode 100644
index 0000000000..b5b9b8a46c
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/definition-table/debug.scss
@@ -0,0 +1,5 @@
+[id^='docfy-demo-preview-definition-table'] {
+  .definition-table {
+    @extend %definition-table;
+  }
+}
diff --git a/ui/packages/consul-ui/app/components/definition-table/layout.scss b/ui/packages/consul-ui/app/components/definition-table/layout.scss
index b14ee03cb3..feb5e1b27a 100644
--- a/ui/packages/consul-ui/app/components/definition-table/layout.scss
+++ b/ui/packages/consul-ui/app/components/definition-table/layout.scss
@@ -3,6 +3,6 @@
   grid-template-columns: 140px auto;
   grid-gap: 0.4em 20px;
 }
-%definition-table .copy-button {
-  float: left;
+%definition-table dd > * {
+  display: inline-block;
 }
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index d8df83ca95..aed6b90de3 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -8,6 +8,7 @@
 @import 'consul-ui/components/horizontal-kv-list/debug';
 @import 'consul-ui/components/icon-definition/debug';
 @import 'consul-ui/components/inline-alert/debug';
+@import 'consul-ui/components/definition-table/debug';
 
 html.is-debug body > .brand-loader {
   display: none !important;