Commit Graph

3 Commits

Author SHA1 Message Date
Kenia 945342c367 ui: Update Breadcrumbs styling (#7687) 2020-05-12 17:14:30 +00:00
John Cowen eb7b69cc24 ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495)
This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.

1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs
2. %checkbox-group: Moved
3. %radio-group: Moved
4. %sliding-toggle: Moved (used to be called just %toggle)
5. %form-elements: Moved and added a new %inline-alert for form field
messaging (see Structure design system)
6. %action-group is now a composition of %menu-panel, %toggle-button,
plus edits to existing style to bring the %action-groups inline with the
dropdowns from Structure). %action-group also includes a composed
%confirmation-alert that is yet to be include. This will be compiled out
until we integrate it.

We've also removed some of our old icon placeholders as the above
work seased to use some of them.

Now we done this I'd say all in all over half of our CSS components now
use the CSS npm module.

The CSS specific to Consul UI also uses much of this CSS module by way
of helper placeholders such as our %frames.
2019-12-18 12:26:43 +00:00
John Cowen 81637e2138 ui: CSS Components Migration (#5913)
Migrate roughly half of the base components into base
Adds a target for easily formatting CSS

Further CSS amends/migration (#5921)

1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
2019-09-04 08:35:01 +00:00