ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs)

[johncowen]

This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.

1. %breadcrumbs: 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. See new dropdowns here
   %action-group also includes a composed %confirmation-alert that is yet
   to be included in the Consul UI. This will be compiled out until it gets integrated.

7. %modal-dialog and %modal-window: Moved

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

Now we've done this I'd say all in all over half of our CSS components use
our 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. So, I'd estimate around 70-80%
of our CSS is now provided by an external Storybook backed CSS module. We're
aiming to reduce the Consul UI specific things at a later date. The next components
that need moving are %secret-button, %progress. Also hopefully we can get rid
of our legacy icons file (styles/components/icons/index.scss) and start integrating
the typography placeholders that already exist in our CSS module.

[jnwright]

If this is following Structure, the breadcrumbs component has changed: https://app.goabstract.com/projects/87d01c50-c9a1-11e7-942e-476a06e3de8a/branches/master/commits/62c43da57bb1ef1fcb5a5ce61e92e57f71e4327b/files/06E503C7-8CE2-4FA1-9177-5B252A54C220/layers/B63AD029-C031-481E-85F1-5FC7F8ED2723?mode=design

[johncowen]

Hey @jnwright !

Thanks for taking a look at this! I wouldn't say its 'following' Structure so much, more of a case of slowly trying to move over to Structure from the old designs. We still have quite a large hangover of the designs we were following before Structure even existed 😬

The breadcrumbs here follow the designs from our Consul UI specific designs still and, as Structure is a moving target, the Consul designs probably use the breadcrumbs from an older version of Structure. Taking a quick look, these are Structure 1.5.1 breadcrumbs it seems - I would guess this was probably the current version of Structure when I did this work.

Once the Consul designs use the Structure 1.6.0 breadcrumbs also, we can probably move those over to the new Structure 1.6.0 look at some point in another PR.

Thanks!

[johncowen]

Hey @jnwright , sorry just realised this needed a rebase 😬 , I've just rebased and force pushed now so the diff should be back to being 99.9% CSS changes.

[hannahhearth]

@johncowen Do you have a preview link available for this, of it working in the Consul UI, for us to review?

[johncowen]

Yup, its in the description for the PR

%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. See new dropdowns here

All UI PRs should now have a link to a preview site now also you once its built it appears in the GH checks list at the bottom of the PR along with all the CI testing links.

This one:

Just incase:

%action-group also includes a composed %confirmation-alert that is yet
to be included in the Consul UI. This will be compiled out until it gets integrated.

If you are looking for the new 'confirmation-alert' from the gif above, its not in the UI yet (we only did the restyling of the menu here). It will require a little more wrangling in templates and JS to integrate that, and I wanted this PR to be 99.9% CSS.

Once we get this PR approved/merged I can work on getting that integrated also.

[DingoEatingFuzz]

A couple immediate questions before looking at code:

Where does your storybook code live?
If this includes updating some separate CSS package, why is there no change to package.json or yarn.lock?

[johncowen]

Hey! 👋

Where does your storybook code live?

So the storybook code is over in that public iris repository in my personal GH account. You can find it over there if you want to take a look/check it out. We are currently discussing an approach to moving this over to the main repo.

There's also a preview link above to the result of the change in the Consul UI.

If this includes updating some separate CSS package, why is there no change to package.json or yarn.lock?

The module isn't used as a traditional npm module in that sense, it more 'vendored' in, so we basically publish the module to this folder and commit it into the main consul repo. I'm not sure if you remember speaking about this in one of our fe catchups?

I know the above is a little out of the ordinary and wasn't the original plan, but the team felt this was the best approach with this specific thing, so we went with that.

Any more q's lemme know!

Thanks,

John

[ghost]

Hey there,

This issue has been automatically locked because it is closed and there hasn't been any activity for at least 30 days.

If you are still experiencing problems, or still have questions, feel free to open a new one 👍.