UI: Increase base font size #23994

hellobontempo · 2023-11-03T17:54:31Z

This PR increases the on-prem UI base font size from 14px to 16px.

To accomplish this, sizing variables were first audited and updated to consistently use pixels for padding and margin values. In addition, this PR addresses some minor cleanup intended to make Helios practices easier to iteratively address in the future.

rename spacing variables with numerical values, ex: $spacing-xxs (which is 4 pixels) is now $spacing-4
fixes toggle component, which was unaligned with container

toggle before + after

replace all $size- variables for margin or padding with equivalent pixel value. To preserve original spacing, pixel values were calculated using the 14px as the base rem size.

Comments in screenshot are the base-14 pixel values of each size variable:

hellobontempo · 2023-11-03T20:23:55Z

ui/app/components/policy-form.hbs

@@ -46,12 +46,12 @@
                id="fileUploadToggle"
                @type="checkbox"
                name="fileUploadToggle"
-                class="switch is-rounded is-success is-small"


Deleted switch css to consistently use toggle

before + after

github-actions · 2023-11-03T20:24:48Z

Build Results:
All builds succeeded! ✅

hellobontempo · 2023-11-03T21:26:34Z

ui/app/styles/components/env-banner.scss

@@ -5,7 +5,7 @@

 .env-banner {
  align-self: center;
-  border-radius: $size-1;


deleted this variable because it was only used in one place

hellobontempo · 2023-11-03T21:42:00Z

ui/app/components/mount-backend/type-form.hbs

@@ -11,7 +11,7 @@
    {{#each (filter-by "category" category this.mountTypes) as |type|}}
      <SelectableCard
        id={{type.type}}
-        class="has-top-padding-m has-text-centered small-card"
+        class="has-top-padding-l has-text-centered small-card"


had to increase when font sizes increased

hellobontempo · 2023-11-03T21:42:40Z

ui/app/components/regex-validator.hbs

@@ -32,8 +32,6 @@
      <div>
        <Toggle
          @name={{concat @attr.name "-validation-toggle"}}
-          @status="success"


there were no alternatives to the component, so <Toggle> now renders these classes by default

hellobontempo · 2023-11-03T21:44:23Z

ui/app/templates/components/secret-edit-toolbar.hbs

@@ -9,8 +9,6 @@
    <ToolbarFilters>
      <Toggle
        @name="json"
-        @status="success"


hellobontempo · 2023-11-03T21:46:34Z

ui/app/styles/core/element-styling.scss

@@ -80,7 +80,7 @@ object {

 html {
  background-color: $white;
-  font-size: 14px;
+  font-size: $base-font-size; // 16px


this where the font size increase happened

hellobontempo · 2023-11-03T21:48:05Z

ui/app/styles/core/toggle.scss

I made some changes here because the toggle before was just slightly off

before (left) + after (right)

kiannaquach · 2023-11-03T22:56:48Z

I noticed that the placeholder text gets cut off for Entities filter dropdown:

The SearchSelect search icon is misaligned with the text now that the size increased:

With the larger font sizes I think SearchSelect and buttons get larger on Overview components (I noticed this in pki overview):

hellobontempo · 2023-11-03T23:03:46Z

ui/lib/core/addon/components/text-file.hbs

@@ -6,7 +6,7 @@
 {{#unless @uploadOnly}}
  <div class="level is-mobile">
    <div class="level-left">
-      <label for="input-{{this.elementId}}" class="is-label" data-test-text-file-label>
+      <label for="input-{{this.elementId}}" class="has-text-weight-semibold" data-test-text-file-label>


hellobontempo · 2023-11-03T23:04:19Z

ui/lib/core/addon/components/toggle.js

@@ -40,13 +38,6 @@ export default class ToggleComponent extends Component {
  get safeId() {
    return `toggle-${this.name.replace(/\W/g, '')}`;
  }
-  get inputClasses() {


I only ever saw small and success passed in, so removed this getter

hellobontempo · 2023-11-06T17:10:07Z

@kiannaquach - good catch with the entities input! I'll take a look at the placeholder text.

For the overview cards - the larger button is not because of the font size change but because search select has a bottom margin and the button stretches to fill the space. This will be fixed when the buttons are replaced - I've mentioned it in that ticket to address the buttons stretching to fill

The SearchSelect search icon is misaligned with the text now that the size increased:

With the larger font sizes I think SearchSelect and buttons get larger on Overview components (I noticed this in pki overview):

Monkeychip

Nice work! I did a lot of clicking around and the only thing I found that happens on this branch and not main is in the toolbar filters on clients counts. If you add a namespace it adds a Y scrollbar. It's a non-blocking find.

hellobontempo · 2023-11-13T21:03:11Z

Thank you @Monkeychip - updated toolbar by increasing the height for toolbar-scroller

hellobontempo added 2 commits November 3, 2023 10:48

fix button padding

49e1e43

rename spacing variables using numerical values

87993c1

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Nov 3, 2023

hellobontempo mentioned this pull request Nov 3, 2023

Discovery - increase base font size #23976

Closed

hellobontempo added 6 commits November 3, 2023 11:29

fix toggle aligment

7fe0faa

remove unused toggle classes

626900e

replace margin and padding with spacing vars

e2b0dc5

increase base font size

ff9578d

remove switch css, use toggle consistently

7e344aa

remaining margin/padding size vars to spacing pixels

677fce2

hellobontempo commented Nov 3, 2023

View reviewed changes

hellobontempo added 2 commits November 3, 2023 13:36

add deprecated note, rever changes to size vars

f8993e2

decrease console size

db56868

hellobontempo commented Nov 3, 2023

View reviewed changes

hellobontempo added 2 commits November 3, 2023 14:39

remove function

160856a

adjust card size for small selectable cards

edfe71f

hellobontempo commented Nov 3, 2023

View reviewed changes

hellobontempo marked this pull request as ready for review November 6, 2023 17:18

fix select to fit to content width

70d961a

Monkeychip approved these changes Nov 13, 2023

View reviewed changes

fix toolbar-scroller height

f1d9564

hellobontempo added this to the 1.16.0-rc1 milestone Nov 13, 2023

hellobontempo added 2 commits November 13, 2023 13:04

add changelog;

342f2da

fix checkbox styling

180b295

hellobontempo enabled auto-merge (squash) November 13, 2023 21:17

hellobontempo merged commit 7f03393 into main Nov 13, 2023
69 checks passed

hellobontempo deleted the ui/VAULT-20096/increase-base-font-size-2 branch November 13, 2023 21:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Increase base font size #23994

UI: Increase base font size #23994

hellobontempo commented Nov 3, 2023 •

edited

Loading

hellobontempo Nov 3, 2023

github-actions bot commented Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023 •

edited

Loading

hellobontempo Nov 3, 2023

kiannaquach commented Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo Nov 3, 2023

hellobontempo commented Nov 6, 2023 •

edited

Loading

Monkeychip left a comment •

edited

Loading

hellobontempo commented Nov 13, 2023

UI: Increase base font size #23994

UI: Increase base font size #23994

Conversation

hellobontempo commented Nov 3, 2023 • edited Loading

Choose a reason for hiding this comment

before + after

github-actions bot commented Nov 3, 2023

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

hellobontempo Nov 3, 2023 • edited Loading

Choose a reason for hiding this comment

before (left) + after (right)

Choose a reason for hiding this comment

kiannaquach commented Nov 3, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hellobontempo commented Nov 6, 2023 • edited Loading

Monkeychip left a comment • edited Loading

Choose a reason for hiding this comment

hellobontempo commented Nov 13, 2023

hellobontempo commented Nov 3, 2023 •

edited

Loading

hellobontempo Nov 3, 2023 •

edited

Loading

hellobontempo commented Nov 6, 2023 •

edited

Loading

Monkeychip left a comment •

edited

Loading