status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
John Cowen 2021-06-21 11:40:14 +01:00 committed by hc-github-team-consul-core
parent 04e65d2023
commit 2f9e968d38
32 changed files with 730 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
ui/packages/consul-ui/app/components/badge/README.mdx Normal file
View File

@ -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
<figure>
<figcaption>Can be used as part of a horizontal-kv-list</figcaption>
<dl>
<dt class="kind-terminating-gateway">Kind</dt>
<dd>
Terminating Gateway
</dd>
<dt class="service-identity">
Service Identity
</dt>
<dd>service-0</dd>
<dt class>Something</dt>
<dd>else, here</dd>
</dl>
</figure>
<figure>
<figcaption>...or as a single `dl` element on its own</figcaption>
<dl class="kind-terminating-gateway">
<dt>Kind</dt>
<dd>
Terminating Gateway
</dd>
</dl><!--
Collapse the whitespace whilst maintaining indentation
--><dl>
<dt
class="service-identity"
>
Service Identity
</dt>
<dd>service-0</dd>
</dl>
</figure>
```
```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;
}
```

29
ui/packages/consul-ui/app/components/badge/debug.scss Normal file
View File

@ -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;
}
}

76
ui/packages/consul-ui/app/components/badge/index.scss Normal file
View File

@ -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;
}

20
ui/packages/consul-ui/app/components/buttons/layout.scss
View File

@ -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;

5
ui/packages/consul-ui/app/components/buttons/skin.scss
View File

@ -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;

2
ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss
View File

@ -65,7 +65,7 @@
%healthcheck-output .copy-button {
position: absolute;
right: 0.5em;
top: 1em;
top: .7em;
}
@media #{$--lt-spacious-healthcheck-output} {
%healthcheck-output {

54
ui/packages/consul-ui/app/components/csv-list/README.mdx Normal file
View File

@ -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
<p>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
<span>five</span>
<span>six</span>
</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ol>
```
```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. |

12
ui/packages/consul-ui/app/components/csv-list/debug.scss Normal file
View File

@ -0,0 +1,12 @@
[id^=docfy-demo-preview-csv-list] {
p, ul {
@extend %csv-list;
}
ol li {
@extend %csv;
}
ol {
list-style-type: none;
}
}

16
ui/packages/consul-ui/app/components/csv-list/index.scss Normal file
View File

@ -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;
}

238
ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx Normal file
View File

@ -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.
`<CopyButton />` components are commonly added to the value, and can be added
to the left or right of the value.
```hbs preview-template
<figure>
<figcaption>
All KVs can be specified in a single list
</figcaption>
<dl>
<dt class="kind-terminating-gateway">Kind</dt>
<dd>
Terminating Gateway
</dd>
{{#if true}}
<dt
{{tooltip}}
class="lock-delay"
>
Lock Delay
</dt>
<dd>10ms</dd>
{{/if}}
<dt
{{tooltip}}
class="ttl"
>
TTL
</dt>
<dd>
<CopyButton
@value={{"1m30s10ms"}}
@name="TTL"
/>
1m30s10ms
</dd>
<dt>
Invisible title
</dt>
<dd>
local
</dd>
<dt class>Visible title</dt>
<dd>
global
</dd>
</dl>
</figure>
<hr />
<figure>
<figcaption>...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)</figcaption>
<dl>
<dt
class="service-identity"
>
Service Identity
</dt>
<dd>service-0</dd>
</dl><dl>
<dt
{{tooltip}}
class="lock-delay"
>
Lock Delay
</dt>
<dd>10ms</dd>
</dl><dl>
<dt
{{tooltip}}
class="ttl"
>
TTL
</dt>
<dd>
1m30s10ms
<CopyButton
@value={{"1m30s10ms"}}
@name="TTL"
/>
</dd>
</dl><dl>
<dt>
No visible title
</dt>
<dd>local</dd>
</dl><dl>
<dt class>Visible title</dt>
<dd>global</dd>
</dl><!--
Collapse the whitespace but keep our indentation
--><TagList @tags={{array 'one' 'two'}} />
</figure>
<hr />
<figure class="reversed">
<figcaption>When reversing, you'll probably want to use indiviudual dl's so as to not reverse the order of the KV pairs</figcaption>
<dl>
<dt class="kind-terminating-gateway">Kind</dt>
<dd>
Terminating Gateway
</dd>
</dl>
<dl>
<dt
class="service-identity"
>
Service Identity
</dt>
<dd>service-0</dd>
</dl>
<dl>
<dt
{{tooltip}}
class="lock-delay"
>
Lock Delay
</dt>
<dd>10ms</dd>
</dl><dl>
<dt
{{tooltip}}
class="ttl"
>
TTL
</dt>
<dd>
<CopyButton
@value={{"1m30s10ms"}}
@name="TTL"
/>
1m30s10ms
</dd>
</dl><dl>
<dt>
No visible title
</dt>
<dd>local</dd>
</dl><dl>
<dt class>Visible title</dt>
<dd>global</dd>
</dl>
</figure>
```
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 `</dl><dl>`.
2. Wrap the whitespace in comments `</dl><!-- carriage return --><dl>`
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
<figure>
<figcaption>
Conditionally showing multiple key/values sometimes means that you insert an empty `dl` into the DOM
</figcaption>
<dl>
{{~#if false}}
<dt>Something that might not be set</dt>
<dd>No value!</dd>
{{/if~}}
{{~#if false}}
<dt>Something that might not be set</dt>
<dd>No value!</dd>
{{/if~}}
</dl>
</figure>
```
```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 |

31
ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss Normal file
View File

@ -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;
}
}

23
ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss Normal file
View File

@ -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;
}

44
ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss Normal file
View File

@ -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;
}

13
ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss Normal file
View File

@ -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);
}

34
ui/packages/consul-ui/app/components/icon-definition/README.mdx Normal file
View File

@ -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
<dl
class="lock-delay"
>
<dt
{{tooltip}}
>
Lock Delay
</dt>
<dd>10ms</dd>
</dl>
<dl>
<dt>
Scope
</dt>
<dd>local</dd>
</dl>
```
```css
dl {
@extend %icon-definition;
}
.lock-delay dt::before {
@extend %with-delay-mask, %as-pseudo;
}
```

8
ui/packages/consul-ui/app/components/icon-definition/debug.scss Normal file
View File

@ -0,0 +1,8 @@
#docfy-demo-preview-icon-definition {
dl {
@extend %icon-definition;
}
.lock-delay dt::before {
@extend %with-delay-mask, %as-pseudo;
}
}

7
ui/packages/consul-ui/app/styles/components/icon-definition.scss → ui/packages/consul-ui/app/components/icon-definition/index.scss
View File

@ -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 {

6
ui/packages/consul-ui/app/components/tag-list/README.mdx
View File

@ -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
<TagList
@item={{hash
@ -43,7 +45,7 @@ Tags are de-duplicated when rendered.
<figure>
<figcaption>
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 <strong>not</strong> be rendered.
</figcaption>
<TagList
@ -66,7 +68,7 @@ Tags are de-duplicated when rendered.
| `item` | `Object` | | Object with a `Tags` property equalling an array of string tags |
| `tags` | `Array` | | An array of string tags |
## Yields
## Exports
When used as a block level component the `TagList` yields itself, see above example for usage.

15
ui/packages/consul-ui/app/components/tag-list/index.scss Normal file
View File

@ -0,0 +1,15 @@
.tag-list,
td.tags {
@extend %tag-list;
}
%tag-list {
@extend %horizontal-kv-list;
}
%tag-list dt::before {
@extend %with-tag-mask, %as-pseudo;
color: inherit;
color: var(--gray-500);
}
%tag-list dd {
@extend %csv-list;
}

6
ui/packages/consul-ui/app/styles/base/decoration/base-placeholders.scss
View File

@ -8,6 +8,12 @@
padding: 0;
border: 0;
}
%unvisually-hidden {
clip: auto;
overflow: visible;
width: auto;
height: auto;
}
%visually-hidden-text {
text-indent: -9000px;
font-size: 0;

8
ui/packages/consul-ui/app/styles/components.scss
View File

@ -19,7 +19,6 @@
@import './components/list-row/index';
@import './components/expanded-single-select/index';
@import './components/icon-definition';
@import './components/form-elements';
@import './components/breadcrumbs';
@import './components/anchors';
@ -29,7 +28,6 @@
@import './components/secret-button';
@import './components/pill';
@import './components/table';
@import './components/tag-list';
@import './components/flash-message';
@import './components/code-editor';
@import './components/confirmation-dialog';
@ -58,6 +56,12 @@
@import 'consul-ui/components/hashicorp-consul';
/**/
@import 'consul-ui/components/menu-panel';
@import 'consul-ui/components/horizontal-kv-list';
@import 'consul-ui/components/csv-list';
@import 'consul-ui/components/tag-list';
@import 'consul-ui/components/badge';
@import 'consul-ui/components/icon-definition';
@import 'consul-ui/components/inline-code';
@import 'consul-ui/components/overlay';
@import 'consul-ui/components/tooltip';

3
ui/packages/consul-ui/app/styles/components/composite-row/layout.scss
View File

@ -20,6 +20,9 @@
grid-area: detail;
align-self: end;
}
%composite-row-detail * {
flex-wrap: nowrap !important;
}
%composite-row-actions {
grid-area: actions;
justify-self: center;

2
ui/packages/consul-ui/app/styles/components/icon-definition/index.scss
View File

@ -1,2 +0,0 @@
@import './skin';
@import './layout';

18
ui/packages/consul-ui/app/styles/components/icon-definition/layout.scss
View File

@ -1,18 +0,0 @@
%icon-definition {
margin-top: 0;
margin-bottom: 0;
}
%icon-definition {
display: inline-flex;
flex-wrap: nowrap;
}
%icon-definition > * {
align-self: center;
}
%icon-definition > dd {
white-space: nowrap;
margin-left: 4px;
}
%icon-definition > dt > * {
display: none;
}

2
ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss
View File

@ -1,2 +0,0 @@
%icon-definition {
}

1
ui/packages/consul-ui/app/styles/components/list-row/layout.scss
View File

@ -26,7 +26,6 @@
flex-wrap: nowrap;
}
%list-row-detail dl,
%list-row-detail > span {
margin-right: 18px;
}

5
ui/packages/consul-ui/app/styles/components/tag-list.scss
View File

@ -1,5 +0,0 @@
@import './tag-list/index';
.tag-list,
td.tags {
@extend %tag-list;
}

2
ui/packages/consul-ui/app/styles/components/tag-list/index.scss
View File

@ -1,2 +0,0 @@
@import './skin';
@import './layout';

24
ui/packages/consul-ui/app/styles/components/tag-list/layout.scss
View File

@ -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;
}

3
ui/packages/consul-ui/app/styles/components/tag-list/skin.scss
View File

@ -1,3 +0,0 @@
%tag-list::before {
background-color: $gray-500;
}

12
ui/packages/consul-ui/app/styles/debug.scss
View File

@ -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 {
& {

1
ui/packages/consul-ui/app/templates/debug.hbs
View File

@ -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')
}}
>