From 3b737bbe4fcae6609ed038956d4274dc380100d7 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 21 Jun 2021 11:40:14 +0100 Subject: [PATCH] ui: %horizontal-kv-list CSS component (and related) (#10285) This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badge --- .../consul-ui/app/components/badge/README.mdx | 76 ++++++ .../consul-ui/app/components/badge/debug.scss | 29 +++ .../consul-ui/app/components/badge/index.scss | 76 ++++++ .../app/components/buttons/layout.scss | 20 +- .../app/components/buttons/skin.scss | 5 +- .../consul/health-check/list/layout.scss | 2 +- .../app/components/csv-list/README.mdx | 54 ++++ .../app/components/csv-list/debug.scss | 12 + .../app/components/csv-list/index.scss | 16 ++ .../components/horizontal-kv-list/README.mdx | 238 ++++++++++++++++++ .../components/horizontal-kv-list/debug.scss | 31 +++ .../components/horizontal-kv-list/index.scss | 23 ++ .../components/horizontal-kv-list/layout.scss | 44 ++++ .../components/horizontal-kv-list/skin.scss | 13 + .../app/components/icon-definition/README.mdx | 34 +++ .../app/components/icon-definition/debug.scss | 8 + .../icon-definition/index.scss} | 7 +- .../app/components/tag-list/README.mdx | 6 +- .../app/components/tag-list/index.scss | 15 ++ .../base/decoration/base-placeholders.scss | 6 + .../consul-ui/app/styles/components.scss | 8 +- .../components/composite-row/layout.scss | 3 + .../components/icon-definition/index.scss | 2 - .../components/icon-definition/layout.scss | 18 -- .../components/icon-definition/skin.scss | 2 - .../styles/components/list-row/layout.scss | 1 - .../app/styles/components/tag-list.scss | 5 - .../app/styles/components/tag-list/index.scss | 2 - .../styles/components/tag-list/layout.scss | 24 -- .../app/styles/components/tag-list/skin.scss | 3 - ui/packages/consul-ui/app/styles/debug.scss | 12 + ui/packages/consul-ui/app/templates/debug.hbs | 1 + 32 files changed, 730 insertions(+), 66 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/badge/README.mdx create mode 100644 ui/packages/consul-ui/app/components/badge/debug.scss create mode 100644 ui/packages/consul-ui/app/components/badge/index.scss create mode 100644 ui/packages/consul-ui/app/components/csv-list/README.mdx create mode 100644 ui/packages/consul-ui/app/components/csv-list/debug.scss create mode 100644 ui/packages/consul-ui/app/components/csv-list/index.scss create mode 100644 ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx create mode 100644 ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss create mode 100644 ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss create mode 100644 ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss create mode 100644 ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss create mode 100644 ui/packages/consul-ui/app/components/icon-definition/README.mdx create mode 100644 ui/packages/consul-ui/app/components/icon-definition/debug.scss rename ui/packages/consul-ui/app/{styles/components/icon-definition.scss => components/icon-definition/index.scss} (94%) create mode 100644 ui/packages/consul-ui/app/components/tag-list/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/icon-definition/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/icon-definition/layout.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/tag-list.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/tag-list/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/tag-list/layout.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/tag-list/skin.scss diff --git a/ui/packages/consul-ui/app/components/badge/README.mdx b/ui/packages/consul-ui/app/components/badge/README.mdx new file mode 100644 index 000000000..600923f0d --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/README.mdx @@ -0,0 +1,76 @@ +--- +class: css +--- +# badge + +`%badge` is a slightly rounded pill (also `%badge-with-icon` for badges that need icons), made to easily fit inside a `%horizontal-kv-list` along with other key/values, or on its own as a single badge. Colors default to grays, but can be overridden via selectors. + +```hbs preview-template +
+
Can be used as part of a horizontal-kv-list
+ +
+
Kind
+
+ Terminating Gateway +
+
+ Service Identity +
+
service-0
+
Something
+
else, here
+
+ +
+
+
...or as a single `dl` element on its own
+ +
+
Kind
+
+ Terminating Gateway +
+
+
+ Service Identity +
+
service-0
+
+
+``` + + +```css +/* part of a kv list */ +dl { + @extend %horizontal-kv-list; +} +dt.service-identity { + @extend %badge; +} +dt.kind-terminating-gateway { + @extend %badge, %badge-with-icon; +} +dt.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; +} +/* element on its own */ +dl.service-identity, +dl.kind-terminating-gateway { + @extend %horizontal-kv-list; +} +dl.service-identity dt { + @extend %badge; +} +dl.kind-terminating-gateway dt { + @extend %badge, %badge-with-icon; +} +dl.kind-terminating-gateway dt::before { + @extend %with-gateway-mask, %as-pseudo; +} +``` diff --git a/ui/packages/consul-ui/app/components/badge/debug.scss b/ui/packages/consul-ui/app/components/badge/debug.scss new file mode 100644 index 000000000..79931b174 --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/debug.scss @@ -0,0 +1,29 @@ +#docfy-demo-preview-badge { + /* part of a kv list */ + dl { + @extend %horizontal-kv-list; + } + dt.service-identity { + @extend %badge; + } + dt.kind-terminating-gateway { + @extend %badge, %badge-with-icon; + } + dt.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; + } + /* element on its own */ + dl.service-identity, + dl.kind-terminating-gateway { + @extend %horizontal-kv-list; + } + dl.service-identity dt { + @extend %badge; + } + dl.kind-terminating-gateway dt { + @extend %badge, %badge-with-icon; + } + dl.kind-terminating-gateway dt::before { + @extend %with-gateway-mask, %as-pseudo; + } +} diff --git a/ui/packages/consul-ui/app/components/badge/index.scss b/ui/packages/consul-ui/app/components/badge/index.scss new file mode 100644 index 000000000..87b71f2f8 --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/index.scss @@ -0,0 +1,76 @@ +%badge { + @extend %horizontal-kv-list; + padding-left: 8px; + padding-right: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +%badge, +%badge + dd { + @extend %pill; + background-color: var(--gray-100); + color: var(--gray-500); +} +%badge::after, +%badge-reversed::after, +%badge-reversed::before { + display: inline; +} +%badge::after { + content: var(--horizontal-kv-list-key-separator); +} +%badge-reversed::after { + content: var(--horizontal-kv-list-key-wrapper-end); +} +%badge-reversed::before { + content: var(--horizontal-kv-list-key-wrapper-start); + margin-right: 0; + font-size: inherit; +} +%badge-radius-reset + dd { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +%badge + dd { + padding-right: 8px; + margin-left: 0 !important; +} +%badge-reversed { + margin-left: 0; + padding-left: 0; +} +%badge-reversed + dd { + padding-left: 8px; + margin-left: 0 !important; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +%badge-with-icon::after { + display: none; +} +%badge-with-icon { + position: absolute; + max-width: 0; + padding-left: 28px; +} +%badge-with-icon::before { + position: absolute; + left: 8px; +} +%badge-with-icon-reversed::before { + left: 0px; + font-size: 0.8em; +} +%badge-with-icon + dd { + margin-left: 24px !important; +} +%badge-with-icon-reversed { + @extend %horizontal-kv-list-reversed, %badge-reversed; + flex-direction: row; + padding-left: 22px; + padding-right: 0 !important; + z-index: 1; +} +%badge-with-icon-reversed + dd { + margin-right: 18px; +} diff --git a/ui/packages/consul-ui/app/components/buttons/layout.scss b/ui/packages/consul-ui/app/components/buttons/layout.scss index fcfdeb769..baea95be2 100644 --- a/ui/packages/consul-ui/app/components/buttons/layout.scss +++ b/ui/packages/consul-ui/app/components/buttons/layout.scss @@ -35,9 +35,25 @@ padding-bottom: calc(0.4em - 1px) !important; } %copy-button:empty { - padding: 5px !important; + padding: 0px !important; margin-right: 0; - margin-top: -5px; + top: -1px; +} +%copy-button:empty::after { + content: ''; + display: none; + position: absolute; + top: -2px; + left: -3px; + width: 20px; + height: 22px; +} +%copy-button:empty:hover::after { + display: block; +} +%copy-button:empty::before { + position: relative; + z-index: 1; } %copy-button:not(:empty)::before { margin-right: 4px; diff --git a/ui/packages/consul-ui/app/components/buttons/skin.scss b/ui/packages/consul-ui/app/components/buttons/skin.scss index f3cf0309b..cf554e372 100644 --- a/ui/packages/consul-ui/app/components/buttons/skin.scss +++ b/ui/packages/consul-ui/app/components/buttons/skin.scss @@ -17,7 +17,10 @@ } %copy-button::before { @extend %with-copy-action-mask, %as-pseudo; - background-color: $gray-500; + background-color: var(--gray-500); +} +%copy-button::after { + background-color: var(--gray-050); } %copy-button:not(:empty)::before { margin-right: 10px; diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss index 96e16cad0..b61709165 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss @@ -65,7 +65,7 @@ %healthcheck-output .copy-button { position: absolute; right: 0.5em; - top: 1em; + top: .7em; } @media #{$--lt-spacious-healthcheck-output} { %healthcheck-output { diff --git a/ui/packages/consul-ui/app/components/csv-list/README.mdx b/ui/packages/consul-ui/app/components/csv-list/README.mdx new file mode 100644 index 000000000..8ac073061 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/README.mdx @@ -0,0 +1,54 @@ +--- +class: css +--- +# csv-list + +Easily create comma separated lists via CSS. Also contains a `%csv` if you don't want to use the `%csv-list`s display and only apply the commas to specific DOM elements. + +```hbs preview-template +

+ one + two + three + four + five + six +

+ + + +
    +
  1. one
    2. +
  2. two
    3. +
  3. three
    4. +
  4. four
    5. +
  5. five
    6. +
  6. six
    7. +
+``` + + +```css + p, ul { + @extend %csv-list; + } + ol li { + @extend %csv; + } + ol { + list-style-type: none; + } +``` + +## Properties + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `--csv-list-separator` | `string` | `,` | The separator to use between the list items. | diff --git a/ui/packages/consul-ui/app/components/csv-list/debug.scss b/ui/packages/consul-ui/app/components/csv-list/debug.scss new file mode 100644 index 000000000..eea7038e1 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/debug.scss @@ -0,0 +1,12 @@ +[id^=docfy-demo-preview-csv-list] { + p, ul { + @extend %csv-list; + } + ol li { + @extend %csv; + } + ol { + list-style-type: none; + } +} + diff --git a/ui/packages/consul-ui/app/components/csv-list/index.scss b/ui/packages/consul-ui/app/components/csv-list/index.scss new file mode 100644 index 000000000..504b25289 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/index.scss @@ -0,0 +1,16 @@ +:root { + --csv-list-separator: ','; +} +%csv-list { + // mainly used for block elements, you may need to overwrite this with an + // inline-flex to keep any inline-ness + display: flex; +} +%csv-list > * { + @extend %csv; +} +%csv:not(:last-child)::after { + display: inline; + content: var(--csv-list-separator); + margin-right: 0.3em; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx new file mode 100644 index 000000000..f39a689d9 --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx @@ -0,0 +1,238 @@ +--- +class: css +--- +# horizontal-kv-list + +Provides a horizontally stacked list of key/value pairs, commonly used with a +definition/description list. + +The keys can be configured to be either, visible, invisible, or with an icon. + +- **Icon Configuration:** Add a `class` that describes the key/value pair and configure the icon for that class in the CSS +- **Visible Title Configuration:** Add an empty `class` attribute. A trailing `:` + will be added to the title (ensure you collapse the whitespace in the `dt`). +- **Invisible Title Configuration:** Don't add a `class` attribute at all, i.e. by default + the title is not shown. + +If you are providing an icon, you should also use the `{{tooltip}}` modifier +to provide a textual tooltip for the icon. Using the `{{tooltip}}` modifier +with no arguments will make it use the text/DOM content of the DOM element it +is attached to, see below for a full usage example. + +`` components are commonly added to the value, and can be added +to the left or right of the value. + +```hbs preview-template +
+
+ All KVs can be specified in a single list +
+ +
+
Kind
+
+ Terminating Gateway +
+{{#if true}} +
+ Lock Delay +
+
10ms
+{{/if}} +
+ TTL +
+
+ + 1m30s10ms +
+
+ Invisible title +
+
+ local +
+
Visible title
+
+ global +
+
+ +
+
+
+
...or they can all be specified as individual lists (for if you have a component that is already wrapped in a dl, such as our TagList)
+ +
+
+ Service Identity +
+
service-0
+
+
+ Lock Delay +
+
10ms
+
+
+ TTL +
+
+ 1m30s10ms + +
+
+
+ No visible title +
+
local
+
+
Visible title
+
global
+
+ +
+
+
+
When reversing, you'll probably want to use indiviudual dl's so as to not reverse the order of the KV pairs
+
+
Kind
+
+ Terminating Gateway +
+
+
+
+ Service Identity +
+
service-0
+
+
+
+ Lock Delay +
+
10ms
+
+
+ TTL +
+
+ + 1m30s10ms +
+
+
+ No visible title +
+
local
+
+
Visible title
+
global
+
+ +
+``` +When conditionally listing key/values within a single `dl`, be aware that if no key/values should be shown, then you will be left with an empty `dl`. If you collapse the whitespace using handlebars whitespace collapsing `~`, then this empty `dl` will be removed from the flow via CSS. Alternatively consider using multiple `dl`s which can be wrapped with conditionals individually and therefore leave no empty DOM. + +When using as individual `dl` lists be aware of whitespace between `dl`s. There are various ways you can counter this: + +1. remove the whitespace `
`. +2. Wrap the whitespace in comments `
` +3. Use handlebars whitespace removal `~` as above. +4. Put a `display: inline-flex` on the parent element (this can affect other layout). + +Depending on your exact usecase one of the above options may be more suited than others. + +```hbs preview-template +
+
+ Conditionally showing multiple key/values sometimes means that you insert an empty `dl` into the DOM +
+ +
+ {{~#if false}} +
Something that might not be set
+
No value!
+ {{/if~}} + {{~#if false}} +
Something that might not be set
+
No value!
+ {{/if~}} +
+
+``` + + +```css +dl { + @extend %horizontal-kv-list; +} +.lock-delay::before { + @extend %with-delay-mask, %as-pseudo; + color: var(--gray-700); +} +.ttl::before { + @extend %with-history-mask, %as-pseudo; + color: var(--blue-500); +} +.service-identity { + @extend %badge; +} +.kind-terminating-gateway { + @extend %badge, %badge-with-icon; +} +.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; +} +.reversed > dl { + @extend %horizontal-kv-list-reversed; +} +.reversed .service-identity { + @extend %badge-reversed; +} +.reversed .kind-terminating-gateway { + @extend %badge-with-icon-reversed; +} +``` + +## Properties + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `--horizontal-kv-list-separator-width` | `length-percentage` | `18px` | The width of the whitespace between two sets of key/value pairs | +| `--horizontal-kv-list-key-separator` | `string` | `:` | Separator used for between `Key: Value` for textual key/values | +| `--horizontal-kv-list-key-wrapper-start` | `string` | `(` | Starting wrapper used for wrapping `Value (Key)` for reversed textual key/values | +| `--horizontal-kv-list-key-wrapper-end` | `string` | `)` | Ending wrapper used for wrapping `Value (Key)` for reversed textual key/values | diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss new file mode 100644 index 000000000..f8c365dce --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss @@ -0,0 +1,31 @@ +[id^=docfy-demo-preview-horizontal-kv-list] { + dl { + @extend %horizontal-kv-list; + } + .lock-delay::before { + @extend %with-delay-mask, %as-pseudo; + color: var(--gray-700); + } + .ttl::before { + @extend %with-history-mask, %as-pseudo; + color: var(--blue-500); + } + .service-identity { + @extend %badge; + } + .kind-terminating-gateway { + @extend %badge, %badge-with-icon; + } + .kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; + } + .reversed > dl { + @extend %horizontal-kv-list-reversed; + } + .reversed .service-identity { + @extend %badge-reversed; + } + .reversed .kind-terminating-gateway { + @extend %badge-with-icon-reversed; + } +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss new file mode 100644 index 000000000..338ff82c5 --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss @@ -0,0 +1,23 @@ +@import './skin'; +@import './layout'; + +:root { + --horizontal-kv-list-separator-width: 18px; + --horizontal-kv-list-key-separator: ':'; + --horizontal-kv-list-key-wrapper-start: '('; + --horizontal-kv-list-key-wrapper-end: ')'; +} +%horizontal-kv-list:not([class]) dt:not([class]) { + @extend %horizontal-kv-list-hidden-title; +} +%horizontal-kv-list[class] dt, +%horizontal-kv-list dt[class] { + @extend %horizontal-kv-list-visible-title; +} +%horizontal-kv-list-hidden-title { + @extend %visually-hidden; +} +%horizontal-kv-list-visible-title { + @extend %unvisually-hidden; + overflow: hidden; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss new file mode 100644 index 000000000..fab1160e9 --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss @@ -0,0 +1,44 @@ +%horizontal-kv-list { + display: inline-flex; + flex-wrap: nowrap; +} +%horizontal-kv-list-reversed { + flex-direction: row-reverse; +} +%horizontal-kv-list:empty { + display: none; +} +%horizontal-kv-list > * > * { + display: inline-block; +} +%horizontal-kv-list > * { + // align-self: center; + white-space: nowrap; +} +%horizontal-kv-list > dd { + flex-wrap: wrap; +} +%horizontal-kv-list-visible-title { + min-width: 18px; +} +%horizontal-kv-list-reversed:not(:first-of-type), +%horizontal-kv-list dd + dt, +%horizontal-kv-list dd + %horizontal-kv-list-hidden-title + dd { + margin-left: var(--horizontal-kv-list-separator-width); +} +/* this quite possibly should be dealt with by the parent/container not this */ +/* component. It adds the same whitespace separation between multiple kv-lists */ +/* in this case, as we can make lists with dls, or dt/dd combos, multiple dls */ +/* are seens as one component and therefore this is spacing not positioning */ +%horizontal-kv-list + %horizontal-kv-list:not(:first-of-type) { + margin-left: var(--horizontal-kv-list-separator-width); +} +/**/ +%horizontal-kv-list-reversed dt, +%horizontal-kv-list-visible-title + dd { + margin-left: 4px; +} + +%horizontal-kv-list-reversed dt + dd { + margin-left: 0; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss new file mode 100644 index 000000000..9cbf85d80 --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss @@ -0,0 +1,13 @@ +%horizontal-kv-list dt[class=""]::after, +%horizontal-kv-list dt[class=""]::after { + display: inline; +} +%horizontal-kv-list dt[class=""]::after { + content: var(--horizontal-kv-list-key-separator); +} +%horizontal-kv-list-reversed dt[class=""]::after { + content: var(--horizontal-kv-list-key-wrapper-end); +} +%horizontal-kv-list-reversed dt[class=""]::before { + content: var(--horizontal-kv-list-key-wrapper-start); +} diff --git a/ui/packages/consul-ui/app/components/icon-definition/README.mdx b/ui/packages/consul-ui/app/components/icon-definition/README.mdx new file mode 100644 index 000000000..037331681 --- /dev/null +++ b/ui/packages/consul-ui/app/components/icon-definition/README.mdx @@ -0,0 +1,34 @@ +--- +class: css +--- +# icon-definition + +This CSS component is deprecated, please use `%horizontal-kv-list` instead (which this component uses) + +```hbs preview-template +
+
+ Lock Delay +
+
10ms
+
+
+
+ Scope +
+
local
+
+``` + +```css +dl { + @extend %icon-definition; +} +.lock-delay dt::before { + @extend %with-delay-mask, %as-pseudo; +} +``` diff --git a/ui/packages/consul-ui/app/components/icon-definition/debug.scss b/ui/packages/consul-ui/app/components/icon-definition/debug.scss new file mode 100644 index 000000000..4c3c4fb12 --- /dev/null +++ b/ui/packages/consul-ui/app/components/icon-definition/debug.scss @@ -0,0 +1,8 @@ +#docfy-demo-preview-icon-definition { + dl { + @extend %icon-definition; + } + .lock-delay dt::before { + @extend %with-delay-mask, %as-pseudo; + } +} diff --git a/ui/packages/consul-ui/app/styles/components/icon-definition.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss similarity index 94% rename from ui/packages/consul-ui/app/styles/components/icon-definition.scss rename to ui/packages/consul-ui/app/components/icon-definition/index.scss index 0afcdb294..16c34ebbe 100644 --- a/ui/packages/consul-ui/app/styles/components/icon-definition.scss +++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss @@ -1,4 +1,9 @@ -@import './icon-definition/index'; +%icon-definition { + @extend %horizontal-kv-list; +} +%icon-definition > dt > * { + display: none; +} %icon-definition.passing dt::before, %composite-row-header .passing dd::before { diff --git a/ui/packages/consul-ui/app/components/tag-list/README.mdx b/ui/packages/consul-ui/app/components/tag-list/README.mdx index 1421cef7f..1dcd327f4 100644 --- a/ui/packages/consul-ui/app/components/tag-list/README.mdx +++ b/ui/packages/consul-ui/app/components/tag-list/README.mdx @@ -4,6 +4,8 @@ Template only component for rendering a list of tags. You can pass either/or/and Tags are de-duplicated when rendered. +Uses `%horizontal-kv-list` for positioning/icon and `%csv-list` for tag separating + ```hbs preview-template
- This list has no tags therefore the tags _and_ red border div will **not** be rendered. + This list has no tags therefore the tags _and_ red border div will not be rendered.
* { - align-self: center; -} -%icon-definition > dd { - white-space: nowrap; - margin-left: 4px; -} -%icon-definition > dt > * { - display: none; -} diff --git a/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss b/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss deleted file mode 100644 index e449ba871..000000000 --- a/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss +++ /dev/null @@ -1,2 +0,0 @@ -%icon-definition { -} diff --git a/ui/packages/consul-ui/app/styles/components/list-row/layout.scss b/ui/packages/consul-ui/app/styles/components/list-row/layout.scss index e3b59be6f..8440596fa 100644 --- a/ui/packages/consul-ui/app/styles/components/list-row/layout.scss +++ b/ui/packages/consul-ui/app/styles/components/list-row/layout.scss @@ -26,7 +26,6 @@ flex-wrap: nowrap; } -%list-row-detail dl, %list-row-detail > span { margin-right: 18px; } diff --git a/ui/packages/consul-ui/app/styles/components/tag-list.scss b/ui/packages/consul-ui/app/styles/components/tag-list.scss deleted file mode 100644 index 6bc2ea8e7..000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import './tag-list/index'; -.tag-list, -td.tags { - @extend %tag-list; -} diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/index.scss b/ui/packages/consul-ui/app/styles/components/tag-list/index.scss deleted file mode 100644 index bc1825219..000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss b/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss deleted file mode 100644 index d1c866afd..000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss +++ /dev/null @@ -1,24 +0,0 @@ -%tag-list { - white-space: nowrap; - display: inline-flex; -} -// TODO: Currently this is here to overwrite -// the default definition list layout used in edit pages -// ideally we'd be more specific with those to say -// only add padding to dl's in edit pages -%tag-list dt::before { - @extend %with-tag-mask, %as-pseudo; - margin-right: 4px; - margin-top: 3px; - background-color: $gray-500; -} -%tag-list dd { - display: inline-flex; - flex-wrap: wrap; - padding-left: 0px; -} -%tag-list dd > *:not(:last-child)::after { - content: ','; - margin-right: 0.3em; - display: inline; -} diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss b/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss deleted file mode 100644 index ef5a8f9ea..000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss +++ /dev/null @@ -1,3 +0,0 @@ -%tag-list::before { - background-color: $gray-500; -} diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index be6542016..2b59748f3 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -3,6 +3,10 @@ // temporary component debugging setup @import 'consul-ui/components/main-nav-vertical/debug'; +@import 'consul-ui/components/badge/debug'; +@import 'consul-ui/components/csv-list/debug'; +@import 'consul-ui/components/horizontal-kv-list/debug'; +@import 'consul-ui/components/icon-definition/debug'; html.is-debug body > .brand-loader { display: none !important; @@ -27,6 +31,10 @@ html.is-debug body > .brand-loader { @extend %with-glimmer-logo-color-icon, %as-pseudo; margin-right: 5px; } + li.consul-components.css-component a::before, + li.components.css-component a::before { + @extend %with-glimmer-logo-color-icon, %as-pseudo; + } li.consul-components.ember-component a::before, li.components.ember-component a::before { @extend %with-ember-circle-logo-color-icon, %as-pseudo; @@ -78,6 +86,10 @@ html.is-debug body > .brand-loader { > table tr:hover { box-shadow: none; } + > ol code, + > ul code { + @extend %inline-code; + } } .docfy-demo { & { diff --git a/ui/packages/consul-ui/app/templates/debug.hbs b/ui/packages/consul-ui/app/templates/debug.hbs index 0e3b2f446..89bb4d3ee 100644 --- a/ui/packages/consul-ui/app/templates/debug.hbs +++ b/ui/packages/consul-ui/app/templates/debug.hbs @@ -24,6 +24,7 @@ class={{concat (slugify section.label) ' ' (if (eq child.frontmatter.class 'ember') 'ember-component') ' ' + (if (eq child.frontmatter.class 'css') 'css-component') ' ' (if (is-href (to-route child.url)) 'is-active') }} >