consul/ui/packages/consul-ui/app/components/tab-nav
Ella Cai 06ff4228b4
UI: Update Consul UI colors to use HDS colors (#16111)
* update red color variables to hds

* change background red to be one step lighter

* map oranges

* map greens

* map blues

* map greys

* delete themes, colours: lemon, magenta, strawberry, and vault color aliases

* add unmapped rainbow colours

* replace white and transparent vars, remove unused semantic vars and frame placeholders

* small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour

* add unmapped grays, remove dark theme, manually set nav bar to use dark colours

* map consul pink colour

* map yellows

* add unmapped oranges, delete light theme

* remove readme, base variables, clean up dangling colours

* Start working on the nav disclosure menus

* Update main-nav-horizontal dropdowns

* Format template

* Update box-shadow tokens

* Replace --tone- usage with tokens

* Update nav disabled state and panel border colour

* Replace rgb usage on tile

* Fix permissions modal overlay

* More fixes

* Replace orange-500 with amber-200

* Update badge colors

* Update vertical sidebar colors

* Remove top border on consul peer list ul

---------

Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>
2023-02-27 09:30:12 -07:00
..
README.mdx ui: Make our old TabNav component easily usable with a state machine (#13705) 2022-07-14 09:30:07 +01:00
index.hbs Display tab tooltips in tab-nav 2022-10-13 16:43:38 +02:00
index.js Allow tabs to have tooltips 2022-10-13 16:43:38 +02:00
index.scss ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00
layout.scss ui: Set overflow: auto on the tab nav (#9402) 2020-12-16 09:19:00 +00:00
pageobject.js ui: chore - upgrade ember and friends (#14518) 2022-09-15 09:43:17 +01:00
skin.scss UI: Update Consul UI colors to use HDS colors (#16111) 2023-02-27 09:30:12 -07:00

README.mdx

---
state: 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
  of the state to transition to.

There are two similar event handlers, `@onclick` and `@onTabClick`.

When using `@onclick`, the `item.label` is passed to the handler. When using
`@onTabClick` the entire 'item' is passed instead, therefore you can add
arbitrary properties to the 'item' to be used in the handler.


**Please note:** This component should probably be rebuilt using contextual
components, and real events. 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)

```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>
```

A TabNav with using a `StateMachine.dispatch`

```hbs
<figure>
  <figcaption>A TabNav with using a StateMachine.dispatch</figcaption>
  <TabNav @items={{
    compact
      (array
        (hash
          label="1"
          selected=(state-matches fsm.state 'one')
          state="ONE"
        )
        (hash
          label="2"
          selected=(state-matches fsm.state 'two')
          state="TWO"
        )
      )
    }}
    @onTabClicked={{pick 'state' fsm.dispatch}}
  />
</figure>
```

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