Cleaning up the last of the core files (welp there's still more) #19779

Monkeychip · 2023-03-27T18:32:59Z

Thought I could make it through the remaining core files in this one PR, but it started getting too big. Below are the files I focused on.

core/columns lots of Bulma classes here, so I made a new core/columns file to contain them all. This is a direct copy/paste from Bulma.
small amount of Bulma classes added to core/level and core/menu and core/message.
removed core/notification. Triple checked, we don't use this. There is a Bulma class dedicated to notifications and I suspect at one time we did use it, we don't anymore though (but for one place it looks like we do but don't really; instead, we style with eve-banner).
added Bulma classes to the core/progress file. There are some class names I would like to not use as Mozilla says don't use them, but for now at least, it's a direct copy from Bulma and it works. Tried replacing and couldn't figure out a workaround. I'll point these out in a comment in the files.

here's the app, not too much different than the last PR.

Monkeychip · 2023-03-27T21:53:48Z

ui/app/styles/components/box-label.scss

@@ -10,7 +10,6 @@ label.box-label {
 .box-label {
  @extend .box;
  @extend .is-centered;
-  @extend .is-gapless;


is-gapless was a bulma style that could only be used with columns (e.g columns.is-gapless). See bulma docs. Once I moved the class out of bulma-classes this threw an error. I double checked that this still styled okay without the extend.

Monkeychip · 2023-03-27T21:55:02Z

ui/app/styles/core.scss

@@ -33,7 +34,6 @@
 @import './core/menu';
 @import './core/message';
 @import './core/navbar';
-@import './core/notification';


double/triple checked. This was not being used at all. However, there is a big chunk of bulma css for notifications. I suspect we once used bulma notifications, and override some of the style in this file. But we don't use them now.

Monkeychip · 2023-03-27T21:55:54Z

ui/app/styles/core/columns.scss

This is copy/paste from bulma, all the column classes and combination of classes we use. Is it pretty... no. But for now, it's got our columns/column classes covered.

Monkeychip · 2023-03-27T21:59:14Z

ui/app/styles/core/message.scss

this file kind of made me laugh. We very specifically overroad some of the bulma message types. I added back in the bulma message types we were now missing, like message.is-info. I don't know why I find our patterns funny here, maybe because we still rely on very strange bulma colors that we don't use anywhere else. I guess if you don't look close enough you won't notice we use ~500 different shades of blue 🤦🏻‍♀️.

Monkeychip · 2023-03-28T01:36:36Z

ui/app/styles/core/columns.scss

direct copy/paste from bulma. Ideally wouldn't be using !important, but I don't want to mess too much with what we use right now.

Monkeychip · 2023-03-28T01:37:44Z

ui/app/styles/core/message.scss

looks like more additions than I actually made (I alphabetized the class order where appropriate)

Monkeychip · 2023-03-28T01:38:18Z

ui/app/styles/core/progress.scss

worked on this one through tests as it's hard to reproduce.

Example of selector mozilla warns against but I couldn't find a work around. Again, direct copy/paste from the bulma classes we use.

Monkeychip · 2023-03-28T15:27:49Z

ui/app/styles/core/link.scss

@@ -21,7 +21,7 @@
    cursor: default;
  }
 }
-// ARG TODO: nice-to-do replace all instances with helper is-no-underline
+// ARG TODO: nice-to-do replace all instances with helper


I did do this and then reverted the change. I'm going to avoid any hbs changes I can in this sidebranch. If we determine that some of these nice to haves are worth it I can merge into main later, avoiding large conflicts while trying to maintain a sidebranch.

kiannaquach · 2023-03-28T15:57:25Z

ui/app/styles/core/progress.scss

+
+// is-success and is-info are the two types of progress bars we have
+.progress.is-info::-webkit-progress-value {
+  background-color: #3e8ed0;


should these hex codes be a variable? I see them used it a few files

Good spot. Yes, eventually. I've got a whole ticket to address the 500 shades of colors we have running around. For now, I'm just copy pasting from bulma and will address colors all at once.

kiannaquach

🎉 awesome job! I just had one question about the hex codes - do we want to put the hex codes in a variable?

* Step one: remove bulma (#19587) * remove bulma and get app running * add back in each statments from bulma variables * remove space * address pr comments * add back copyright headedr * Step two: add back and organize relevant Bulma classes (#19664) * 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 * Step three: add Bulma classes to relevant component styles (#19683) * 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 * Step three cont. Bulma classes to component files (#19691) * 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 * Step four: address core directory files (#19719) * 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 * UI/step four core files 2 (#19754) * 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 * Cleaning up the last of the core files (welp there's still more) (#19779) * 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 * Core files cont. Focus on core/form (#19794) * 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 * test * Revert "test" This reverts commit e695ded. * Core files continued (#19896) * 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 * Core files continued (#19930) * 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 * Consolidating our size variables with Bulma's (#19951) * 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 * Finish size var clean up (#19970) * 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) * 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 * Small fixes post var and core file work (#20035) * 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 (#20065) * remove bulma/switch * fix disbled style * Bulma removal: starting the clean up process (#20066) * 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 * Bulma clean up cont. (#20119) * 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 * Cleanup 🧹 (#20196) * 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 * add in merge color helper * Remove out of scope changes (#20218) * remove out of scope changes * fix test * add changelog * remove scope creep * fix scope creep cont * qa fixes * Fixes found while QA'ing Secret Engines (#20264) * 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 * quick fix * deal with body-size issue * fix order of other helper * small fixes from qa * update comments on the core files and change desktop font size from px back to rem * missed 16px replaced with 1rem * address chelseas comments * fixes that jordan noticed * remove unstable flexbox test * test fix * rename other to general * address claires qa comments * add in missing helper must have missed in earlier merge * fix button * small small small fix

Monkeychip added 2 commits March 27, 2023 11:52

one missing thing for level core.

4741d63

replace no-underline and link-item with helper text-decoration-none

f5ed4e7

Monkeychip added ui pr/no-changelog labels Mar 27, 2023

Monkeychip added this to the 1.14 milestone Mar 27, 2023

core/menu double check

67bb1c1

Monkeychip changed the base branch from main to ui/remove-bulma-v2 March 27, 2023 18:34

Monkeychip added 4 commits March 27, 2023 15:07

handle core/message

301cfdd

create and add to bulma classes for core/columns

8cc659d

add in bulma-classes columns and column... not fun to qa later.

ff89f94

remove core/notification

c68a8a9

Monkeychip commented Mar 27, 2023

View reviewed changes

core/progress bar

ce470bc

Monkeychip marked this pull request as ready for review March 28, 2023 01:35

Monkeychip commented Mar 28, 2023

View reviewed changes

Monkeychip changed the title ~~Cleaning up the last of the core files~~ Cleaning up the last of the core files (welp there's still more) Mar 28, 2023

Monkeychip added 2 commits March 28, 2023 09:12

revert the hbs changes

c5dd862

fix over revert

597c729

Monkeychip commented Mar 28, 2023

View reviewed changes

kiannaquach reviewed Mar 28, 2023

View reviewed changes

kiannaquach approved these changes Mar 28, 2023

View reviewed changes

Monkeychip merged commit d4b9c17 into ui/remove-bulma-v2 Mar 28, 2023

Monkeychip deleted the ui/VAULT-14957/remainder-of-core-files branch March 28, 2023 16:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cleaning up the last of the core files (welp there's still more) #19779

Cleaning up the last of the core files (welp there's still more) #19779

Monkeychip commented Mar 27, 2023 •

edited

Loading

Monkeychip Mar 27, 2023

Monkeychip Mar 27, 2023

Monkeychip Mar 27, 2023

Monkeychip Mar 27, 2023 •

edited

Loading

Monkeychip Mar 28, 2023 •

edited

Loading

Monkeychip Mar 28, 2023

Monkeychip Mar 28, 2023

Monkeychip Mar 28, 2023

Monkeychip Mar 28, 2023

kiannaquach Mar 28, 2023

Monkeychip Mar 28, 2023

kiannaquach left a comment

Cleaning up the last of the core files (welp there's still more) #19779

Cleaning up the last of the core files (welp there's still more) #19779

Conversation

Monkeychip commented Mar 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Monkeychip Mar 27, 2023 • edited Loading

Choose a reason for hiding this comment

Monkeychip Mar 28, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kiannaquach left a comment

Choose a reason for hiding this comment

Monkeychip commented Mar 27, 2023 •

edited

Loading

Monkeychip Mar 27, 2023 •

edited

Loading

Monkeychip Mar 28, 2023 •

edited

Loading