From dcff8c2a071e53df55c3e29e55ed535fcc7d9dde Mon Sep 17 00:00:00 2001 From: Angel Garbarino Date: Thu, 27 Apr 2023 14:23:17 -0600 Subject: [PATCH] Remove the Bulma CSS Framework (#19878) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 e695dedfe933d71320cd7eeee33f6b21a8d54b37. * 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 --- changelog/19878.txt | 3 + .../components/modal-form/policy-template.hbs | 2 +- ui/app/styles/app.scss | 10 - ui/app/styles/components/action-block.scss | 4 +- .../styles/components/autocomplete-input.scss | 23 ++ ui/app/styles/components/box-label.scss | 4 +- ui/app/styles/components/calendar-widget.scss | 34 +- ui/app/styles/components/codemirror.scss | 4 +- ui/app/styles/components/confirm.scss | 16 +- .../styles/components/console-ui-panel.scss | 14 +- ui/app/styles/components/control-group.scss | 4 +- ui/app/styles/components/doc-link.scss | 2 +- ui/app/styles/components/env-banner.scss | 8 +- ui/app/styles/components/form-section.scss | 4 - ui/app/styles/components/icon.scss | 38 +- ui/app/styles/components/info-table-row.scss | 17 +- ui/app/styles/components/info-table.scss | 14 - ui/app/styles/components/input-hint.scss | 10 - ui/app/styles/components/kmip-role-edit.scss | 5 - ui/app/styles/components/list-item-row.scss | 8 +- ui/app/styles/components/list-pagination.scss | 125 +++++- ui/app/styles/components/masked-input.scss | 3 +- ui/app/styles/components/modal.scss | 68 +++- .../styles/components/namespace-picker.scss | 2 +- ui/app/styles/components/page-header.scss | 4 +- ui/app/styles/components/popup-menu.scss | 16 +- ui/app/styles/components/read-more.scss | 5 +- .../components/replication-dashboard.scss | 2 +- .../styles/components/replication-header.scss | 10 - ui/app/styles/components/search-select.scss | 4 +- ui/app/styles/components/selectable-card.scss | 4 +- ui/app/styles/components/shamir-progress.scss | 2 +- ui/app/styles/components/sidebar.scss | 14 +- ui/app/styles/components/tabs.scss | 44 ++- ui/app/styles/components/ui-wizard.scss | 19 +- ui/app/styles/components/vlt-table.scss | 7 + ui/app/styles/core.scss | 70 ++-- ui/app/styles/core/box.scss | 64 ++- ui/app/styles/core/breadcrumb.scss | 26 +- .../styles/core/bulma-radio-checkboxes.scss | 30 -- ui/app/styles/core/buttons.scss | 341 +++++++++------- ui/app/styles/core/charts.scss | 18 +- ui/app/styles/core/checkbox-and-radio.scss | 124 ++++++ ui/app/styles/core/columns.scss | 201 ++++++++++ ui/app/styles/core/containers.scss | 68 ++++ ui/app/styles/core/control.scss | 64 +++ ui/app/styles/core/element-styling.scss | 167 ++++++++ ui/app/styles/core/field.scss | 141 +++++++ ui/app/styles/core/file.scss | 99 +++++ ui/app/styles/core/forms.scss | 373 ------------------ ui/app/styles/core/generic.scss | 62 --- ui/app/styles/core/helpers.scss | 365 ----------------- ui/app/styles/core/hero.scss | 12 - ui/app/styles/core/inputs.scss | 83 ++++ ui/app/styles/core/label.scss | 26 ++ ui/app/styles/core/layout.scss | 35 -- ui/app/styles/core/level.scss | 77 ++++ ui/app/styles/core/link.scss | 27 ++ ui/app/styles/core/lists.scss | 9 +- ui/app/styles/core/menu.scss | 22 +- ui/app/styles/core/message.scss | 94 +++-- ui/app/styles/core/navbar.scss | 29 +- ui/app/styles/core/notification.scss | 62 --- ui/app/styles/core/progress.scss | 61 ++- ui/app/styles/core/select.scss | 80 +++- ui/app/styles/core/switch.scss | 162 ++++++-- ui/app/styles/core/tables.scss | 44 --- ui/app/styles/core/tag.scss | 68 ++++ ui/app/styles/core/tags.scss | 43 -- ui/app/styles/core/title.scss | 36 +- ui/app/styles/core/toggle.scss | 7 +- ui/app/styles/helper-classes/colors.scss | 81 ++++ .../helper-classes/flexbox-and-grid.scss | 115 ++++++ ui/app/styles/helper-classes/general.scss | 100 +++++ ui/app/styles/helper-classes/layout.scss | 90 +++++ ui/app/styles/helper-classes/spacing.scss | 165 ++++++++ ui/app/styles/helper-classes/typography.scss | 102 +++++ .../styles/utils/_box-shadow_variables.scss | 24 ++ ui/app/styles/utils/_bulma_variables.scss | 101 ----- .../{_colors.scss => _color_variables.scss} | 23 +- ui/app/styles/utils/_font_variables.scss | 16 + ui/app/styles/utils/_size_variables.scss | 51 +++ ui/app/styles/utils/_spacing.scss | 14 - ui/app/styles/utils/mixins.scss | 14 + .../templates/components/console/ui-panel.hbs | 2 +- .../components/file-to-array-buffer.hbs | 2 +- .../components/mfa/mfa-setup-step-two.hbs | 8 +- .../components/secret-create-or-update.hbs | 2 +- .../components/secret-delete-menu.hbs | 2 +- .../components/secret-edit-metadata.hbs | 2 +- .../templates/components/secret-form-show.hbs | 2 +- .../templates/components/selectable-card.hbs | 2 +- ui/app/templates/components/tool-unwrap.hbs | 2 +- .../components/transit-key-action/datakey.hbs | 2 +- .../components/transit-key-action/decrypt.hbs | 2 +- .../components/transit-key-action/encrypt.hbs | 2 +- .../components/transit-key-action/hmac.hbs | 2 +- .../components/transit-key-action/rewrap.hbs | 4 +- .../components/transit-key-action/verify.hbs | 2 +- .../vault/cluster/access/mfa/index.hbs | 2 +- .../cluster/access/mfa/methods/create.hbs | 6 +- .../templates/vault/cluster/access/oidc.hbs | 2 +- ui/app/templates/vault/cluster/auth.hbs | 2 +- .../cluster/secrets/backend/metadata.hbs | 4 +- .../addon/components/confirmation-modal.hbs | 5 +- .../core/addon/components/list-pagination.js | 2 + ui/lib/core/addon/components/modal.hbs | 8 +- .../core/addon/components/overview-card.hbs | 2 +- ui/lib/core/addon/components/text-file.hbs | 2 +- .../components/replication-header.hbs | 2 +- .../components/replication-secondary-card.hbs | 2 +- .../components/replication-summary-card.hbs | 2 +- .../templates/components/shamir-flow.hbs | 4 +- .../components/shamir-modal-flow.hbs | 7 +- ui/lib/css/index.js | 23 +- .../components/edit-form-kmip-role.hbs | 2 +- .../addon/components/page/configuration.hbs | 4 +- .../addon/components/page/configure.hbs | 6 +- .../components/page/pki-role-details.hbs | 2 +- .../components/pki-import-pem-bundle.hbs | 2 +- ui/lib/pki/addon/components/pki-key-usage.hbs | 2 +- .../templates/issuers/issuer/cross-sign.hbs | 2 +- .../components/replication-primary-card.hbs | 2 +- .../components/replication-summary.hbs | 2 +- ui/package.json | 3 - .../kubernetes/page/configure-test.js | 6 +- .../components/pki/pki-role-form-test.js | 13 +- ui/yarn.lock | 15 - 128 files changed, 3045 insertions(+), 1768 deletions(-) create mode 100644 changelog/19878.txt create mode 100644 ui/app/styles/components/autocomplete-input.scss delete mode 100644 ui/app/styles/components/info-table.scss delete mode 100644 ui/app/styles/components/input-hint.scss delete mode 100644 ui/app/styles/components/replication-header.scss delete mode 100644 ui/app/styles/core/bulma-radio-checkboxes.scss create mode 100644 ui/app/styles/core/checkbox-and-radio.scss create mode 100644 ui/app/styles/core/columns.scss create mode 100644 ui/app/styles/core/containers.scss create mode 100644 ui/app/styles/core/control.scss create mode 100644 ui/app/styles/core/element-styling.scss create mode 100644 ui/app/styles/core/field.scss create mode 100644 ui/app/styles/core/file.scss delete mode 100644 ui/app/styles/core/forms.scss delete mode 100644 ui/app/styles/core/generic.scss delete mode 100644 ui/app/styles/core/helpers.scss delete mode 100644 ui/app/styles/core/hero.scss create mode 100644 ui/app/styles/core/inputs.scss create mode 100644 ui/app/styles/core/label.scss delete mode 100644 ui/app/styles/core/layout.scss create mode 100644 ui/app/styles/core/link.scss delete mode 100644 ui/app/styles/core/notification.scss delete mode 100644 ui/app/styles/core/tables.scss create mode 100644 ui/app/styles/core/tag.scss delete mode 100644 ui/app/styles/core/tags.scss create mode 100644 ui/app/styles/helper-classes/colors.scss create mode 100644 ui/app/styles/helper-classes/flexbox-and-grid.scss create mode 100644 ui/app/styles/helper-classes/general.scss create mode 100644 ui/app/styles/helper-classes/layout.scss create mode 100644 ui/app/styles/helper-classes/spacing.scss create mode 100644 ui/app/styles/helper-classes/typography.scss create mode 100644 ui/app/styles/utils/_box-shadow_variables.scss delete mode 100644 ui/app/styles/utils/_bulma_variables.scss rename ui/app/styles/utils/{_colors.scss => _color_variables.scss} (81%) create mode 100644 ui/app/styles/utils/_font_variables.scss create mode 100644 ui/app/styles/utils/_size_variables.scss delete mode 100644 ui/app/styles/utils/_spacing.scss diff --git a/changelog/19878.txt b/changelog/19878.txt new file mode 100644 index 000000000..4135434b7 --- /dev/null +++ b/changelog/19878.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Remove the Bulma CSS framework. +``` \ No newline at end of file diff --git a/ui/app/components/modal-form/policy-template.hbs b/ui/app/components/modal-form/policy-template.hbs index cc1cbd4fc..177b7cce0 100644 --- a/ui/app/components/modal-form/policy-template.hbs +++ b/ui/app/components/modal-form/policy-template.hbs @@ -1,5 +1,5 @@ {{#if this.policy.policyType}} -