Tailwind 3 and Switch UI scaling from a base-10 to base-16 #1821

amazingphilippe · 2024-04-26T12:19:45Z

Summary | Résumé

Notify is currently setup so that 1rem = 10px at 100% scaling. By default, 1rem = 16px at 100% scaling.

This is not a problem for us now. However, when we tried to import some design system components in the past, we did hit this conflict in UI scaling. The DS uses the default 16px base.

In theory, this should help us be in a better place to slowly implement the design system if we choose to do so.

This PR:

Changes our UI scaling from 10 to 16. This usually happens in the html and body CSS declarations. Ours was in style.css
Updated and cleaned up font size tokens.
Updated and cleaned up spacing tokens. The sizes were rounded off to nicer numbers. When we previously had a 2.5px token, I rounded it to 3px.

Test instructions | Instructions pour tester la modification

At the worst, there might be sub-pixel differences in our designs.
This should have no impact on anything. We might want to pool our efforts to go through the entire site.

Visual before and after of the size scale. Notice just some rounding for 2.5, 7.5 and 12.5

github-actions · 2024-04-26T12:26:02Z

🧪 Review environment

https://5irdypu7g2c6cjajafjnjbbacu0lzpgv.lambda-url.ca-central-1.on.aws/

andrewleith · 2024-04-26T16:30:38Z

tests/app/main/views/test_index.py

+    assert page.select("div[data-test-id='totals']")[0].text == str(sum(x[2] for x in stats))
+    assert page.select("div[data-test-id='services']")[0].text == str(len(services))


Love to see this instead of targetting css classes!

amazingphilippe · 2024-04-29T17:30:31Z

app/assets/javascripts/fontawesome.js

@@ -15,6 +15,7 @@ import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQues
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";


For the scheduler updates

amazingphilippe · 2024-04-29T17:31:25Z

app/assets/javascripts/scheduler/App.js

-          <div>
-            <Calendar />
-          </div>
+          <Calendar />


Removing this unclassed div helped make the scheduler responsive don to 320px

amazingphilippe · 2024-04-29T17:32:37Z

app/assets/javascripts/scheduler/Confirmation/Confirmation.js

-        <p>
-          <strong>
+        <p className="confirmationTime">
+          <time datetime={date}>


Added a <time> element like in #1799

amazingphilippe · 2024-04-29T17:36:44Z

app/assets/javascripts/scheduler/style.css

 .Calendar-item:focus:not(.Calendar-item--day):not(
    .Calendar-item--unavailable
  ):not(:empty) {
-  outline: black inset;
-  outline-offset: -4px;
-  outline-offset: -4px;
+  outline: var(--color-focus) 3px solid;
+}
+.Calendar-item:hover:not(.Calendar-item--day):not(
+    .Calendar-item--unavailable
+  ):not(:empty) {
+  background-color: var(--hover-color);
+  color: white;
 }


One is hover. Two is focus. always takes me some time to distinguish those two selectors.

amazingphilippe · 2024-04-29T17:37:34Z

app/assets/javascripts/scheduler/style.css

+  gap: 4px;
+  padding: 2px;


These are designed to complement border widths, hence why I chose pixel instead of rem.

amazingphilippe · 2024-04-29T17:40:42Z

app/assets/javascripts/scheduler/style.css

@@ -1,76 +1,81 @@
+:root {


Github was hiding this file, but it contains quite a lot of manual changes.

In general:

Update local CSS variables.

Fix font sizes

Increased target size of the calendar dates

Map gutter and gutterHalf dimensions to the new CSS variables

Removed an entire component that was unused (toggle/switch)

Cleaned up Nav select and radios to match rest of Notify

Updated the confirmation box. (see screenshots)

md and up

base

andrewleith

This looks great!

Couple of notes on the scheduler:

The enabled and disabled states of the month switch button are very hard to tell apart
The outline of the active day button is a bit faint (this is subjective, feel free to ignore)

amazingphilippe · 2024-04-29T18:02:50Z

The enabled and disabled states of the month switch button are very hard to tell apart

Good point! I just noticed. Lets make this clearer (Good timing to test this behaviour)

The outline of the active day button is a bit faint (this is subjective, feel free to ignore)

+1, I can make this one darker too.

github-actions · 2024-08-02T13:17:44Z

🧪 Review environment

https://zv2w6j3kxldlwbl5zago7chc7q0skebz.lambda-url.ca-central-1.on.aws/

github-actions · 2024-09-16T17:38:54Z

🧪 Review environment

https://73eylxuftbkgk3yidjymzg3nzu0xovvh.lambda-url.ca-central-1.on.aws/

amazingphilippe · 2024-10-28T17:46:10Z

app/assets/stylesheets/tailwind/components/big-number.css

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

  .big-number-number {
-    @apply block .text-titlelarge pb-4 font-bold leading-none;
+    @apply block text-titlelarge pb-4 font-bold leading-none;


just a typo we never caught until now. Tailwind 3 compiler caught this one

amazingphilippe · 2024-10-28T17:46:42Z

app/assets/stylesheets/tailwind/components/buttons.css

@@ -25,7 +25,7 @@

  .button:focus,
  a.button:focus {
-    outline: 3px solid theme("colors.yellow.default");
+    outline: 3px solid theme("colors.yellow.DEFAULT");


Minor syntax tweaks. tailwind expects an all caps DEFAULT it seems.

amazingphilippe · 2024-10-28T17:47:05Z

app/assets/stylesheets/tailwind/components/fullscreen-table.css

@@ -15,7 +15,7 @@
  .fullscreen-content th,
  .fullscreen-content .table-field-error-label,
  .fullscreen-content .table-field-left-aligned {
-    @apply whitespace-no-wrap;
+    @apply whitespace-nowrap;


another typo caught by tailwind 3 compiler

amazingphilippe · 2024-10-28T17:47:26Z

app/assets/stylesheets/tailwind/components/grid.css

-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-    @apply my-0;
+    @apply my-0 -mx-gutterHalf;


Here, I'm using our tokens, instead of using hard coded values.

amazingphilippe · 2024-10-28T17:52:04Z

app/assets/stylesheets/tailwind/style.css

@@ -148,11 +144,14 @@ section[id]:target {
  box-decoration-break: clone;
 }

-.hidden,


Tailwind reserves the hidden class. It does about the same thing.

amazingphilippe · 2024-10-28T17:54:22Z

app/assets/stylesheets/tailwind/style.css

 .js-enabled .js-hidden {
  @apply hidden invisible;
 }
-
+@layer utilities {


I may have accidentally moved this up, but it addresses code on lines 204-209 below. From the migration guide: https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer

amazingphilippe · 2024-10-28T17:55:45Z

app/assets/stylesheets/tailwind/style.css

@@ -347,15 +340,13 @@ label {
    @apply p-2 max-w-full;
  }

-  @screen smaller {


There is no "smaller" breakpoint. These styles could apply to the base viewport sizes.

amazingphilippe · 2024-10-28T18:06:12Z

tailwind.config.js

@@ -43,34 +40,55 @@ module.exports = {
      md: "768px",
      lg: "1024px",
    },
+    spacing: {


We want to theme the spacing, not extend base tailwind values. This means we move this into the theme section of the config

amazingphilippe · 2024-10-28T18:06:49Z

tailwind.config.js

+      xs: "0.875rem",
+      small: "1.0625rem",
+      smaller: "1.25rem",
+      base: "1.25rem",
+      title: "1.5rem",
+      titlelarge: "1.75rem",
+      lg: "2.25rem",
+      xxl: "3.25rem",


Cleaned up unused tokens. Next we can think of making the keys make sense.

Switch UI scaling from a base-10 to base-16

38d8195

amazingphilippe added 5 commits April 26, 2024 14:09

format

29c98a0

fix tests

0932d06

tweak test selector

efcfab4

Merge branch 'main' into design/ui-scaling

6879967

forgot to save a file

1032528

amazingphilippe marked this pull request as ready for review April 26, 2024 14:37

amazingphilippe requested review from andrewleith, jzbahrai and whabanks April 26, 2024 14:37

amazingphilippe added 2 commits April 26, 2024 16:22

small is 17, slightly bigger

4c8d436

Merge branch 'main' into design/ui-scaling

d520258

andrewleith reviewed Apr 26, 2024

View reviewed changes

amazingphilippe added 2 commits April 29, 2024 17:04

scheduler re-style

ae61da3

format

746ca0f

amazingphilippe commented Apr 29, 2024

View reviewed changes

amazingphilippe requested a review from andrewleith April 29, 2024 17:43

andrewleith requested changes Apr 29, 2024

View reviewed changes

style tweaks

8e31245

amazingphilippe requested a review from andrewleith April 29, 2024 19:07

andrewleith mentioned this pull request May 23, 2024

Upgrade tailwind to 3.x cds-snc/notification-planning#1153

Open

amazingphilippe added 2 commits May 29, 2024 18:41

Merge branch 'main' into design/ui-scaling

5841206

Merge branch 'main' into design/ui-scaling

24e891c

amazingphilippe added 2 commits July 2, 2024 15:30

Merge branch 'main' into design/ui-scaling

6b36702

Merge branch 'main' into design/ui-scaling

03ace51

amazingphilippe closed this Aug 20, 2024

amazingphilippe reopened this Sep 16, 2024

amazingphilippe marked this pull request as draft September 16, 2024 14:21

Merge branch 'main' into design/ui-scaling

2dd86df

amazingphilippe added 5 commits September 16, 2024 18:41

rebuildings and updating calendar icons

5efcf80

Upgrade to tailwind 3 and fix related errors

38fd91d

Merge branch 'main' into design/ui-scaling

eab2599

tweaks to the scheduler

11d9410

format

e0c7c69

amazingphilippe marked this pull request as ready for review October 8, 2024 14:53

amazingphilippe changed the title ~~Switch UI scaling from a base-10 to base-16~~ Tailwind 3 and Switch UI scaling from a base-10 to base-16 Oct 8, 2024

amazingphilippe commented Oct 28, 2024

View reviewed changes

amazingphilippe added 2 commits October 28, 2024 18:02

Merge branch 'main' into design/ui-scaling

72324ba

format and remove phosphor icon css

33cf259

amazingphilippe commented Oct 28, 2024

View reviewed changes

amazingphilippe added 4 commits October 28, 2024 20:06

compiled css

82275d0

Merge branch 'main' into design/ui-scaling

780ea47

format

91516d2

Calendar fixes after timezone content changes

67cc4a5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind 3 and Switch UI scaling from a base-10 to base-16 #1821

Tailwind 3 and Switch UI scaling from a base-10 to base-16 #1821

amazingphilippe commented Apr 26, 2024 •

edited

Loading

github-actions bot commented Apr 26, 2024

andrewleith Apr 26, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

amazingphilippe Apr 29, 2024

andrewleith left a comment

amazingphilippe commented Apr 29, 2024

github-actions bot commented Aug 2, 2024

github-actions bot commented Sep 16, 2024

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024 •

edited

Loading

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024 •

edited

Loading

amazingphilippe Oct 28, 2024

amazingphilippe Oct 28, 2024

		assert page.select("div[data-test-id='totals']")[0].text == str(sum(x[2] for x in stats))
		assert page.select("div[data-test-id='services']")[0].text == str(len(services))

Tailwind 3 and Switch UI scaling from a base-10 to base-16 #1821

Are you sure you want to change the base?

Tailwind 3 and Switch UI scaling from a base-10 to base-16 #1821

Conversation

amazingphilippe commented Apr 26, 2024 • edited Loading

Summary | Résumé

Test instructions | Instructions pour tester la modification

github-actions bot commented Apr 26, 2024

🧪 Review environment

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

andrewleith left a comment

Choose a reason for hiding this comment

amazingphilippe commented Apr 29, 2024

github-actions bot commented Aug 2, 2024

🧪 Review environment

github-actions bot commented Sep 16, 2024

🧪 Review environment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amazingphilippe Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amazingphilippe Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amazingphilippe commented Apr 26, 2024 •

edited

Loading

amazingphilippe Oct 28, 2024 •

edited

Loading

amazingphilippe Oct 28, 2024 •

edited

Loading