Core files cont. Focus on core/form #19794

Monkeychip · 2023-03-28T16:12:50Z

Cleaning up the core directory continues. Again, the focus is moving the relevant Bulma classes into these files.

moved core/charts to be correctly alphabetized in the app/core file.
created core/input and core/textarea and pulled out any of these classes from core/form and bulma-classes. core/form is ambiguous and too big. It's been acting like a kitchen's junk draw—attempting to break it up.
moved component/input-link styling to the new core/input file. There is no component called input-link so this didn't make sense.
Address the class names: file-xx. Right now these will live in core/form. If it gets too big I'll make a separate file.
Missed a couple of styles on core/buttons, added those in.
Moved around some classes that are better classified as helpers.
Addressed some switch styling. There are two switch files. Later I'll merge these, but the missing style was causing an obvious issue that was an easy fix.
Remove core/tables. We only use the class="table" in one spot, and I was able to achieve the same look by moving a couple lines of CSS to the info-table-row.scss file. Here is the one spot we use it, the Key, Value, Version created.

Monkeychip · 2023-03-28T17:46:32Z

ui/app/styles/components/modal.scss

@@ -104,14 +104,6 @@ pre {
  }
 }

-.modal-confirm-section .is-help {


replaced with helper. I was responsible for this lovely css so I feel comfortable removing it.

Monkeychip · 2023-03-28T17:47:41Z

ui/app/styles/core/switch.scss

more switch css fixes coming later, this one was just really bothering me, so I fixed it.

Monkeychip · 2023-03-28T21:41:00Z

ui/lib/core/addon/components/confirmation-modal.hbs

@@ -5,7 +5,10 @@
      <p class="has-text-weight-semibold is-size-6">
        Confirm
      </p>
-      <p class="is-help">Type <strong>{{this.confirmText}}</strong> to confirm {{this.toConfirmMsg}}</p>
+      <p class="sub-text has-top-bottom-margin-xxs">Type


replaced is-help with appropriate helpers.

zofskeez

LGTM 🚀

zofskeez · 2023-03-30T14:28:57Z

ui/app/styles/core/textarea.scss

Since textarea is an input would it be better to include this in the input sheet or do you think it's better to keep them separate?

That's a great question. Let me try merging them in the next PR. There are a lot of overlaps between the two and only a small couple of differences which will be easier for someone to identify if they're in the same file.

hellobontempo · 2023-03-30T14:27:12Z

ui/app/styles/core/forms.scss

+
+.file-name {
+  box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
+  border: 1px solid $ui-gray-300;


it looks like this was a variable $base-border - do you have plans to make it a variable again? I can't remember what the migration plan was for the _bulma_variables.scss file

Yep, I have a ticket to replace as much with variables as I can and make variables when needed. For now it's all copy paste unless the color is an obvious variables as in this case ui-gray-300.

hellobontempo · 2023-03-30T14:28:55Z

ui/app/styles/core/forms.scss

+  box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
+  border: 1px solid $ui-gray-300;
+  border-radius: 2px;
+  border-width: 1px 1px 1px 0 !important;


Do you have a plan to remove !important declarations towards the end? Initially, I thought it'd be nice to clean these up as you move around css to tackle them bit-by-bit, but you probably have already worked out how to tackle!

Yep, sure do. Right now, if you see !important it's because it comes from Bulma. Just doing the copy/paste with very little changes from bulma styling and then I'll do a sweep through of all files to clean up importants, and variables and unused styles.

hellobontempo · 2023-03-30T14:29:55Z

ui/app/styles/core/forms.scss

  visibility: hidden;
 }

 .file-cta {
+  border: 1px solid $ui-gray-300;


same question about using a variable

hellobontempo · 2023-03-30T14:30:02Z

ui/app/styles/core/forms.scss

@@ -303,6 +241,7 @@

 .file-name {
  @extend .input;
+  border: 1px solid $ui-gray-300;


and again here! 😄

hellobontempo · 2023-03-30T14:31:08Z

ui/app/styles/core/forms.scss

@@ -318,6 +257,7 @@ fieldset.form-fieldset {
  border: none;
 }

+// ARG TODO move to helper


curious about your reasoning behind moving this to a helper since it seems pretty form specific?

Good question. The naming to me suggest helper. So something like select-error-border... something that follows our new helper class name standards.

hellobontempo · 2023-03-30T14:37:14Z

ui/app/styles/core/input.scss

ah, now that i see this file. is the plan to make each form input type it's own file? If that's the case then I'd kind of expect the file-input to be a separate file from form.scss since it's technically an input. I'm guessing form.scss is reserved for spacing around inputs, labels and submit buttons, then?

Form is the junk drawer I'm not entirely sure how to clean up yet. Just going class name by class name so far. Agree with file's being their own sheet. It seemed obvious enough to pull out textarea and input (which because of Jordan's suggestion might make one file) and then file another. I honestly suspect form might go away completely as it does not suggest what it does from the name alone and I don't want it to continue staying a junk drawer of rando classes.

hellobontempo · 2023-03-30T14:37:35Z

ui/app/styles/core/input.scss

+
+.input {
+  border-radius: 2px;
+  border: 1px solid $ui-gray-300;


same question about this! the more I see it the more I think it should be a variable 😅

hellobontempo · 2023-03-30T14:38:55Z

ui/app/styles/core/input.scss

+
+// This file defines the classes for .input. We use the following input classes: .input, .input-hint, .autocomplete-input, .autocomplete-input-option
+
+.input {


Do we go with the class definition instead of using the element selector so that we have more control over applying the styling?

Just a copy paste at this point. We have input class name usage in the app so I had to pull this out of bulma.

hellobontempo · 2023-03-30T14:40:39Z

ui/app/styles/core/input.scss

+  }
+}
+
+// custom input


it looks like autocomplete-input is its own component? I would have expected to see the styling on lines 52-69 living in the /components folder.

input-hint makes sense here, though

Ah it is, then technically it should be a component style. I'll address this in the next PR, thanks for pointing that out.

hellobontempo · 2023-03-30T14:48:17Z

ui/app/styles/core/title.scss

@@ -34,3 +40,44 @@
  font-size: $size-7;
  color: $ui-gray-500;
 }
+
+// title sizes
+.title.is-2 {


could these is-2 be nested instead .title instead of repeating them here?

Yep, just a copy paste at this point, but I'll add a ticket to address this.

* 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 28, 2023 10:09

create input and textarea core files, move charts

2a5dff4

remove input and textarea classes from bulma classes

8871ee8

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

Monkeychip added this to the 1.14 milestone Mar 28, 2023

Monkeychip added 6 commits March 28, 2023 10:18

remove input-hint component file, never a component

688b819

fix the mess that is help-text:

656fa63

help and is-help and sub-text are a mess...

ba53933

fix switch alignment issues

f376215

deal with file-name

21ac4e8

clean file out of bulma-classes

0deac2b

Monkeychip commented Mar 28, 2023

View reviewed changes

Monkeychip added 5 commits March 28, 2023 13:49

create layout helper and move out some remaining button classes

2214cd5

deal with core/title

ba97ba1

is-marginless move to helper

f84ca10

helper layout add to core

d602f0d

clean up

1d5b992

Monkeychip commented Mar 28, 2023

View reviewed changes

Monkeychip marked this pull request as ready for review March 28, 2023 21:41

remove core/tables

8487169

zofskeez approved these changes Mar 30, 2023

View reviewed changes

Monkeychip merged commit 21e56ca into ui/remove-bulma-v2 Mar 30, 2023

Monkeychip deleted the ui/VAULT-14957/form-core-file branch March 30, 2023 14:47

hellobontempo reviewed Mar 30, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core files cont. Focus on core/form #19794

Core files cont. Focus on core/form #19794

Monkeychip commented Mar 28, 2023 •

edited

Loading

Monkeychip Mar 28, 2023 •

edited

Loading

Monkeychip Mar 28, 2023

Monkeychip Mar 28, 2023

zofskeez left a comment

zofskeez Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

hellobontempo Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023

hellobontempo Mar 30, 2023

Monkeychip Mar 30, 2023


		// This file defines the classes for .input. We use the following input classes: .input, .input-hint, .autocomplete-input, .autocomplete-input-option

		.input {

Core files cont. Focus on core/form #19794

Core files cont. Focus on core/form #19794

Conversation

Monkeychip commented Mar 28, 2023 • edited Loading

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

zofskeez left a 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

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

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

Monkeychip commented Mar 28, 2023 •

edited

Loading

Monkeychip Mar 28, 2023 •

edited

Loading