open-consul

History

John Cowen 2200cde988 ui: Replaces almost all remaining instances of SASS variables with CSS (#11200 ) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values		2021-10-07 19:21:11 +01:00
..
README.mdx	ui: change coloring of secondary navigation elements (#10259 )	2021-05-24 11:51:16 +01:00
index.hbs	ui: Accessibility scan improvements (#9485 )	2021-01-05 10:05:59 +00:00
index.js	ui: Move to Workspaced Structure (#8994 )	2020-10-21 15:23:16 +01:00
index.scss	ui: change coloring of secondary navigation elements (#10259 )	2021-05-24 11:51:16 +01:00
layout.scss	ui: Set overflow: auto on the tab nav (#9402 )	2020-12-16 09:19:00 +00:00
pageobject.js	ui: Move to Workspaced Structure (#8994 )	2020-10-21 15:23:16 +01:00
skin.scss	ui: Replaces almost all remaining instances of SASS variables with CSS (#11200 )	2021-10-07 19:21:11 +01:00

README.mdx

---
class: ember
status: needs-love
---
# TabNav

`<TabNav />` renders a list of items as linked tabs (there is also an option
to use labels vs anchors for links for radio button based tabs).

Each item in the list should be a hash of `label`, `href` and `selected`.

- `label`: The text to show
- `href`: a href, probably generated via `href-to`
- `selected`: whether the item is in the selected state or not, probably
  generated via `is-href`

**Please note:** This component should probably be rebuilt using contextual
components and our `Action` component, alternatively this could be hand built
with native HTML using the same `nav/ul/li/a` pattern and you could just use
the CSS component to style it. Unless there is a reason to do this, this
component should be used pending a refactor (please remove this note once
refactored into contextual components using our `Action` component)

```hbs preview-template
<figure>
  <figcaption>A TabNav with a conditional button using `compact` which removes empty values from arrays</figcaption>
<TabNav @items={{
  compact
      (array
          (hash label="Health Checks" href="#" selected=true)
          (hash label="Service Instances" href="#" selected=(is-href "docs.something"))
(if false (hash label="Don't show me" href="#" selected=false) '')
          (hash label="Lock Sessions" href="#" selected=false)
          (hash label="Metadata" href="#" selected=false)
      )
}}/>
</figure>
```

```css
.tab-nav {
  @extend %tab-nav;
}
```