We've had a set of %placeholders in our base styles for quite a while
but not butten the bullet to use them. This begins to use them.
We had to make a small amount of tweaks to base whilst doing this, but
its as we'd prefer there to be as few font placeholders as possible. We
might/should be able to reduce these further at somepoint, or
potentially rename them. We currently have six header fonts (or 4 header
fonts/2 strong body fonts) and 3 body fonts.
We also noticed an empty CSS file and deleted that while we were here.
We also noticed that the bottom border of structure tabs was a pixel
larger than ours so we tweaked that here also.
Adds visibility for `Expose.Checks` config setting for proxies.
1. Adds an 'Exposed Path' tab to the proxy detail page to show the user information on exposed paths.
2. If the users has exposed their healthchecks we also add this information to the Service detail page for this proxy (only for http2 and gRPC checks)
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.
1. Rebuild the heathchecked-resource component now we can copy and paste
2. As the above rebuild came with new icons, we also swapped out 'most'
of the other areas where we were using these new icons, plus any icons
that were effected by the new icon placeholders
3. Begin to remove more and more of the project specific icons (now
replaced by the shared ones)
1. Re-focus the input element on phrase removal
2. Move all actions to `actions:`
3. Move to a form looking `value` rather than `items`
4. Move placeholder functionalit yinto the component
5. Force DDAU instead of two way binding with `slice` and `onchange`
6. Begin to deprecate the `searchable` interface
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`
1. Amends our `base` animation placeholder to always reset
transition-duration. This has no effect on other components that are
already using this animation.
2. Adds a confirming class whenever a key is pressed, to show the green
tick. Uses CSS via `transition-delay` for debouncing.
Adds support for ACL Roles and Service Identities CRUD, along with necessary changes to Tokens, and the CSS improvements required.
Also includes refinements/improvements for easier testing of deeply nested components.
1. ember-data adapter/serializer/model triplet for Roles
2. repository, form/validations and searching filter for Roles
3. Moves potentially, repeated, or soon to to repeated functionality
into a mixin (mainly for 'many policy' relationships)
4. A few styling tweaks for little edge cases around roles
5. Router additions, Route, Controller and templates for Roles
Also see:
* UI: ACL Roles cont. plus Service Identities (#5661 and #5720)
* ui: Replaces Service listing filterbar with a phrase-editor search (#5507)
1. New phrase-editor restricting search to whole phrases (acts on
enter key). Allows removal of previously entered phrases
2. Searching now allows arrays of terms, multiple terms work via AND
- Adds full set of svg icons as CSS/Sass variables to the source
- Starts picking out some frame-grays, whilst commenting in possibles
- Remove color prefixing
The prefixes `ui-` and `brand-` for colors hav been removed. This makes
colors slightly easier to type.
In order to differentiate between brand colors and 'normal' colors, normal
colors are named as 'true colors' i.e. blue, red, green etc etc
whereas the brand colors used a more premium sounding name such as
'steel' for vault gray, 'magenta' for consul, 'cobalt' for vagrant etc etc.
* Move almost everything to use %frames
* Fix pill styles of ACL types
* Remove horizontal scrollbars from dom recycling scroller component
* Make text areas look ok in Firefox
* Remove ember-bulma-css
* New form elements, break out %toggle
* %button design tweaks
* %form-element design tweaks
* Better hashicorp logo
* Small screen CSS improvements (#4624)
1. Reduce header size when there are no breadcrumbs
2. Make the filters toggleable, closed by default
3. Reduce the size of the footer on small screens
4. Hide all non-primary columns for forms
5. Slightly change the layout of various items, mainly buttons within
forms
6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small
screens
1. Addition of external source icons for services marked as such.
2. New %with-tooltip css component (wip)
3. New 'no healthcheck' icon as external sources might not have
healthchecks, also minus icon on node cards in the service detail view
4. If a service doesn't have healthchecks, we use the [Services] tabs as the
default instead of the [Health Checks] tab in the Service detail page.
5. `css-var` helper. The idea here is that it will eventually be
replaced with pure css custom properties instead of having to use JS. It
would be nice to be able to build the css variables into the JS at build
time (you'd probably still want to specify in config which variables you
wanted available in JS), but that's possible future work.
Lastly there is probably a tiny bit more testing edits here than usual,
I noticed that there was an area where the dynamic mocking wasn't
happening, it was just using the mocks from consul-api-double, the mocks
I was 'dynamically' setting happened to be the same as the ones in
consul-api-double. I've fixed this here also but it wasn't effecting
anything until actually made certain values dynamic.
* Begin refactoring CSS into component folders. Moved most
components into layout/skin folders, left out a couple of ones I want
to think about more.
* Adjust grays based on recent Structure changes
* Switch to fullscreen layout for lists and detail, left aligned forms (#4435)
* Specifically use the 'actions_close' label, not just the :last-child (actions-group)
* Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
John Cowen