Remove the Bulma CSS Framework #19878

Monkeychip · 2023-03-30T21:39:04Z

This PR removes bulma imports from our package.json (the "easy" part). The rest of the PR adds back in the missing styles we relied on bulma for.

Noteable Changes:

$tablet was the exact same as the var $mobile—$tablet originated from bulma. I replaced all use cases of $tablet with $mobile. This makes up a lot of changes, but there was more use cases of mobile than tablet.
I removed a good chunk of older vars. Things like the $vault-xx colors making it clear that we now only use $ui-xx colors.
I replaced the old helpers.scss file and made a directory called "helper-classes". Based on a RFC discussion I added the following helper files: colors.scss, flexbox-and-grid.scss, layout.scss, general.scss, spacing.scss, typography.scss.
Cleaned up our core/xx.scss files, which meant first merging in relevant bulma classes and then clarifying the class(es) defined in each file. In some cases, like the form.scss it meant deleting this file and breaking up the styling into different core/xx.scss files.
When it made sense, I removed component css and replaced with a helper. I tried to keep these to a minimum.

Scope Note:

This pr has a narrow scope: add back the missing bulma classes. I did my best to keep to this scope. That means messy parts of our css remain. Thus if you see something like an important! I didn't add it. It was either from bulma or was like that before and you're seeing it because I moved the css block to another file. Same with hardcoded size and color vars. The key here: 95% of the time I didn't write new css. I merged css and moved it around.

QA steps:

Same steps are on the internal google doc.

Setup a binary from main. To do this, on vault-enterprise (remember to pull for latest changes) run make static-dist and then make entdev-ui. Start up the instance using vrd and then navigate to http://localhost:8200/ui/. This will be the comparison branch.
Setup a local instance of vault running this sidebranch. To do this, you'll run a local environment like you normally would but use vrd2 and yarn start2 instead. You'll access this instance at http://localhost:4202/ui/. Remember to yarn install!

You'll have two windows that you can now compare.

Investigate what is most familiar to you. Are you familiar with the autocomplete-input, or maybe you know how to easily play around with the charts, then check those things out. I know replication well and understand it can be hard to go through the full flow, so that's one area I QA'd heavily. I don't expect anyone else to check what a DR secondary cluster looks like.
Remember the app reuses a lot of the same styling. So think about the app in chunks of components and classes. Do you know this form uses tables? Great, play with that part of the form. Do you need to look at every input? No, but maybe look at a regular input, a maskedInput and a textarea input?
If you spot a styling difference, first look at the Dev console and compare the css. The binary and your local version will not be exactly the same but you should see very similar styling. Here's a screenshot of what I mean.

If you spot a bug, report it on the internal Google doc.

Known differences

There are some very slight color differences in a very few cases (mostly in the AlertBanners). If you have a color question and it's not an eye-catching difference, it's likely intentional.
.toolbar-link:hover works in this branch. It is overridden in the binary.
The "x" on the modal is different on purpose. Before we used a custom icon made by bulma. In this branch we're using a flight-icon.
The active tab on auth mounts and transit key actions have been fixed on this branch while they're still broken on main.
Likely elsewhere but on the binary there is an issue with the is-active status on the calendar widget. It correctly shows as blue text in this sidebranch.
This branch fixes an issue again with active tabs. This one shows on Tools -> Unwrap data (you need to unwrap) -> Data

* remove bulma and get app running * add back in each statments from bulma variables * remove space * address pr comments * add back copyright headedr

* VAULT-14566 copy/paste bulma css for classes that it defines and we do not. * add three new helper files and move helpers.scss to a new directory called helper-classes * rename utils/colors to color_variables * integrate all bulma sizing into previous utils/spacing doc, address obvious duplicates and rename to spacing_variables. * small class name issues * clean up * comment clean up

* add in bulma classes used in global-flash component * add in bulma classes used in the modal component * remaining bulma classes that can integrate into the vault css * remove replication-header.scss and replace with helper. * add bulma tabs classes to tabs component scss file * remove ui-wizard style * only do bulma explicit classes for now * add in breadcrumb styling from bulma * integrate bulma into css * remove unecessary tabs bulma styling * remove non-relevant bulma classes * remove non relevant bulma css

* return box-label to as before now that you have those bulma classes * missing modal bulma classes * add bulma class to box component * missed some bulma box classes * remove scss unecessary * add in bulma classes to icon component. * move up icon * missed modal class * clean up * size vars to icon

* move some basic helpers over to typography helper. * rename helpers to other * moveing generic classes to other relevant scss files. * rename generic to link * clean up * clean up * address core/box * remove hero because the class is not used anywhere. * add in level bulma css * welp forgot a file. * add in missing bulma classes into core/menu

* address issue with input border and box shadow * remove the is-white class, it was being used very poorly, replaced with exisiting helpers. * organizing the forms and button core files * small amount of clean up * hot mess of colors dealing with just danger for now * removed moved over bulma classes * use helper for this one off * clean up * wip on the buttons * fix select select:: after * clean up select from bulma-classes. * clean up * clean up * small fix

) * one missing thing for level core. * replace no-underline and link-item with helper text-decoration-none * core/menu double check * handle core/message * create and add to bulma classes for core/columns * add in bulma-classes columns and column... not fun to qa later. * remove core/notification * core/progress bar * revert the hbs changes * fix over revert

* create input and textarea core files, move charts * remove input and textarea classes from bulma classes * remove input-hint component file, never a component * fix the mess that is help-text: * help and is-help and sub-text are a mess... * fix switch alignment issues * deal with file-name * clean file out of bulma-classes * create layout helper and move out some remaining button classes * deal with core/title * is-marginless move to helper * helper layout add to core * clean up * remove core/tables

This reverts commit e695ded.

* test * combine input and textarea * clean up navbar brannd * clean up the single instance delete class used on the modal and match with flight icon * add back autocomplete to component * create core/file * alphabetize file css blocks * core/checkboxes create and address * combine b-checkboxes classes and remove from core the utils * address duplicate helper

* clean up helper and remove duplicate class * more clean up of the other helper * fix pagination, hot mess * add radio to checkbox styling * tag to tags rename singular * container core file * finally... changing forms to one element, field * finally remove bulma-classes * cleanup * comment cleanup * add comment about pagination

* remove bulma-size variables that are duplicates of our own * remove unused is-size-xx and duplicate font weights * remove duplicate class * ahh this is madness * remove column-gap var * remove duplicate sizing of * clean up breakpoints * replace border-radius:2px for var so folks know the common border-radius * replace header-height with new spacing var * replace body-size and console-size vars with other sizing vars * clean up final of size vars * radius override things blah fixed * last size var * add back

* remove size-small, etc. * fix size-small things * remove label unused classes * move out font-family utils

* remove bulma_variables file * remove duplicate helper * replace hardcoded with color vars when appropriate * broaden font-family utils * add back box-link-hover-shadow * welp * fix pagination coloring

* fix auth-login splash container * fix some splash page issues * fix status menu * fix menu-list regression * fix regression on button text-decoration * fix tag regression * fix regression on select select * fix regression on field field * regression on textarea * button focus state regression * fix inputs * fix is-outlined buttons

* remove bulma/switch * fix disbled style

* remove unused class name * add todo * wip shamir-modal-flow usage of file styling * final fix * fix message type message-body css * better match * fix a.active on popup-menu-content * VAULT-14625 fix * blah overrides overrides and oh another override * fix breadcrumb link * fixes * fix readonly state and hover on inputs.scss * fix button style issue * fix modal title spacing issue * clean up * fix switch * fix checkbox issue and pr comment * fix issue with tabs * pr comment

* gotta use rem on page container... it makes a difference, can't switch to px * missing helper for background color * fix textarea with icon * can't seem to replace rem with px ;/ * fix table issues * clean up columns.scss file * fix * fix rem vs px issues * address some todos * fix todo on help is-danger * best effort for sizing var clean up * reomve duplicate * clearify * welp forgot a word * address sr-only class definition * move to helper * replaced single use class with helper and cleaned up flexbox * move to make more sense * move around layout and container * color things * things

* remove carry over classes from bulma * clean up title.scss * clean up title is-5 has-top-padding-m and box.scss * clean up breadcrumbs, buttons, c&r, columns * clean up core files * clean up cont looking at component files * clean up remaining component files * fix pagination * pr comments, thank you

…ui/remove-bulma-v2

* remove out of scope changes * fix test

* fix active tab issue for both secret and auth mounts * use helper instead of :not last on content margin which causes problems * fix missing disabled on b-checkbox

…x back to rem

kiannaquach · 2023-04-26T16:52:54Z

ui/app/styles/utils/_size_variables.scss

+/* Animations and transitions */
+$speed: 150ms;
+$speed-slow: $speed * 2;
+$easing: ease-out;


Should we name this this var to be $ease-out? No need to change this since it already went through PR review - just a thought! :)

Yeah, I agree the name isn't great. It's a carry over from bulma so I'm just keeping as is for now.

kiannaquach

Your PR is looking great, Angel!! 🎉 So many awesome changes going into our app - especially excited for the new organization/structure of the CSS!!! Thanks so much for working on this 🚀

zofskeez

Great work! Exciting to be moving this forward. 🚀 🚢

Monkeychip and others added 11 commits March 21, 2023 14:03

Step one: remove bulma (#19587)

69f332d

* remove bulma and get app running * add back in each statments from bulma variables * remove space * address pr comments * add back copyright headedr

=merge-main

dd2b261

Merge branch 'main' into ui/remove-bulma-v2

bd23267

test

e695ded

Monkeychip added the do-not-merge label Mar 30, 2023

Monkeychip and others added 16 commits March 30, 2023 15:42

Revert "test"

30a856d

This reverts commit e695ded.

Finish size var clean up (#19970)

d4d396f

* remove size-small, etc. * fix size-small things * remove label unused classes * move out font-family utils

Update Color Vars (remove bulma color vars and overrides) (#20031)

fef59bd

* remove bulma_variables file * remove duplicate helper * replace hardcoded with color vars when appropriate * broaden font-family utils * add back box-link-hover-shadow * welp * fix pagination coloring

Remove bulma switch (#20065)

d506340

* remove bulma/switch * fix disbled style

Merge branch 'main' into ui/remove-bulma-v2

d51aab9

add in merge color helper

b00c914

Merge branch 'ui/remove-bulma-v2' of github.com:hashicorp/vault into …

1f5131c

…ui/remove-bulma-v2

Remove out of scope changes (#20218)

a0e1c9b

* remove out of scope changes * fix test

add changelog

39b8e21

Monkeychip changed the title ~~Remove bulma~~ Remove the Bulma CSS Framework Apr 18, 2023

Monkeychip added this to the 1.14 milestone Apr 18, 2023

Monkeychip added the ui label Apr 18, 2023

Monkeychip added 2 commits April 18, 2023 13:27

remove scope creep

43ad37c

fix scope creep cont

19b8dc5

Monkeychip marked this pull request as ready for review April 18, 2023 20:14

Monkeychip and others added 3 commits April 19, 2023 10:46

qa fixes

bb773c9

Fixes found while QA'ing Secret Engines (#20264)

ba2f802

* fix active tab issue for both secret and auth mounts * use helper instead of :not last on content margin which causes problems * fix missing disabled on b-checkbox

merge main

ee6a5e5

vercel bot deployed to Preview April 19, 2023 19:36 View deployment

Monkeychip added 11 commits April 19, 2023 14:31

quick fix

42399f8

deal with body-size issue

f465dcf

fix order of other helper

9564046

small fixes from qa

55d40ae

update comments on the core files and change desktop font size from p…

b851048

…x back to rem

missed 16px replaced with 1rem

be0c61a

address chelseas comments

4517881

fixes that jordan noticed

8933f15

remove unstable flexbox test

c37307b

test fix

ee596a5

rename other to general

71f79bb

kiannaquach reviewed Apr 26, 2023

View reviewed changes

Monkeychip added 3 commits April 26, 2023 12:18

address claires qa comments

3e14234

Merge branch 'main' into ui/remove-bulma-v2

087ffe1

add in missing helper must have missed in earlier merge

cb55a71

Monkeychip removed the do-not-merge label Apr 26, 2023

Monkeychip added 2 commits April 27, 2023 09:33

fix button

43aea97

small small small fix

bdae199

zofskeez approved these changes Apr 27, 2023

View reviewed changes

Monkeychip merged commit c8f593a into main Apr 27, 2023

Monkeychip deleted the ui/remove-bulma-v2 branch April 27, 2023 20:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove the Bulma CSS Framework #19878

Remove the Bulma CSS Framework #19878

Monkeychip commented Mar 30, 2023 •

edited

Loading

kiannaquach Apr 26, 2023

Monkeychip Apr 26, 2023

kiannaquach left a comment

zofskeez left a comment

Remove the Bulma CSS Framework #19878

Remove the Bulma CSS Framework #19878

Conversation

Monkeychip commented Mar 30, 2023 • edited Loading

QA steps:

Known differences

kiannaquach Apr 26, 2023

Choose a reason for hiding this comment

Monkeychip Apr 26, 2023

Choose a reason for hiding this comment

kiannaquach left a comment

Choose a reason for hiding this comment

zofskeez left a comment

Choose a reason for hiding this comment

Monkeychip commented Mar 30, 2023 •

edited

Loading