Remove dependency on Roboto font, and make all components font-agnostic. Enable consumers to have their desired font-family #2673

Kiarokh · 2023-12-28T10:37:10Z

requires: jgroth/kompendium#130
fixes https://github.com/Lundalogik/crm-feature/issues/3820

Review:

Commits are atomic
Commits have the correct type for the changes made
Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

Chrome
Edge
Firefox

Linux:

Chrome
Firefox

macOS:

Chrome
Firefox
Safari

Mobile:

Chrome on Android
iOS

github-actions · 2023-12-28T10:39:12Z

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-2673/

src/components/button/button.scss

Kiarokh · 2023-12-29T13:52:53Z

The commits individually are not feat. But all together they enable consumers to have their desired font-family. So this is a feat at the end. Not sure what is best to do. Like squashing all comits into one and making it a feat sounds nice. But that makes the review process hard.

Maybe after the review is done, we should squash all and write this commit message:

feat: enable having a custom `font-family`

From now on, you do not have to rely on Roboto as a font, to render the UI correctly.
You can now specify any font-family that you like, for your project.

adrianschmidt · 2024-01-04T08:26:18Z

The commits individually are not feat. But all together they enable consumers to have their desired font-family. So this is a feat at the end. Not sure what is best to do. Like squashing all comits into one and making it a feat sounds nice. But that makes the review process hard.

Maybe after the review is done, we should squash all and write this commit message:
feat: enable having a custom `font-family`

From now on, you do not have to rely on Roboto as a font, to render the UI correctly.
You can now specify any font-family that you like, for your project.

I'll have a look-think 😄

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss

src/style/mixins.scss

README.md

src/components/popover-surface/popover-surface.scss

README.md

src/style/mixins.scss

src/components/tooltip/tooltip-content.scss

src/components/select/select.scss

Kiarokh · 2024-01-05T09:10:51Z

src/components/popover-surface/popover-surface.scss

 @use '../../style/mixins';

+/**
+ * @prop --limel-popover-font-family: Font family override for the popover. Because the popover is rendered in a portal, it inherits its font from the body element. If the body's font is not what should be used for the popover, this property can be used to override the font.


Since this var starts with --limel- prefix, it means this is an internal variable (which is perfect). But that also means we shouldn't add public docs for it, using * @prop. You could say this component itself is private so nobody sees this, but I'd still not do it. It's confusing.

No, this isn't an internal variable. But it has to start with a prefix because it has to be a global variable, so we need the prefix to avoid conflicts with global variables that other libs might provide.

~~Why are we using --limel- to denote that a variable is internal?~~
EDIT: Sorry for being passive-aggressive with that question. It doesn't matter why 😄 But it's not great if we want people to be able to use our public variables globally… 🤔

Yes, throughout Lime Elements, we have always used --limel- as a convention for our internal stuff, and when we need public variables, we always use the component's name first, like --popover-xxx-yyy

I've removed this, including the variable itself.

Kiarokh · 2024-01-05T09:12:10Z

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss


 /**
 * @prop --today-label: Tooltip label for "today".
+ * @prop --limel-date-picker-dropdown-font-family: Font family override for the date-picker dropdown. Because the dropdown is rendered in a portal, it inherits its font from the body element. If the body's font is not what should be used for the date-picker, this property can be used to override the font.


this one is private prop, but it's publicly documented. See 968fe8b (#2673)

I've removed this variable, and the docs for it.

Kiarokh · 2024-01-05T10:28:01Z

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss

+        // but still displays the same font as the rest of the components.
+        // This is needed, since the popover opens in the Portal,
+        // which inherits its font from the root element (Kompendium).
+        font-family: var(--kompendium-example-font-family, inherit);


this one still needs to be change.

Suggested change

font-family: var(--kompendium-example-font-family, inherit);

font-family: inherit;

Ah! I must have missed this one… 🤔

Ah, crap… I made a mistake when I removed my fixup. Never mind, I'll fix it 👍

We don't need the font-family: inherit;, as far as I can see. It works correctly without it in the docs at least, and it's what I'd expect, since inherit is the default behaviour anyway, right?

adrianschmidt · 2024-01-05T10:59:12Z

README.md

Hmm… progress-flow uses Arial for some reason… both in next and in this PR…

adrianschmidt · 2024-01-05T11:05:25Z

README.md

This is a pity:

Roboto:

This PR on macOS:

Definitely not worth loading Roboto for, but still a pity.

😮 But that's a unicode. How would this happen? Does it mean that emojis won't show in the web-client neither?

I'm not sure, but I think this is because that character technically isn't an emoji. I think that emojis are recognised by the system, and always rendered using the same font, but this icon is older than emojis, and therefore the selected font is left in charge of how its rendered. Or something like that anyway.

You have the same with ♥️. 👈 That isn't actually an emoji, it's a heart-character that existed before emojis. But once I post this comment that heart-character will look quite similar to the actual heart-emoji that also exists, so I'll post a screenshot of this comment in edit mode too. Notice how the actual emoji doesn't change between edit mode and read mode, while the character does.

Char: ♥️
Emoji: ❤️

(I'm not sure why the character changes between edit mode and read mode, since it looks like the same font is being used in both modes… 🤷‍♂️)

adrianschmidt · 2024-01-05T11:42:56Z

src/style/mixins.scss

+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.


I added some fixups that places the addition of parts of this comment in the commits where the things referred to in the comment are introduced. For future traceability.

…lt to system font This feature contains the following changes: docs(README.md): explain how font-related styles should be supplied fix(index.html): remove Roboto & set examples to use our default font stack Before this commit, the documentation used to request Roboto be downloaded from Google Fonts. Some components used this font to render their UI, while some inherited their font from Kompendium's body font. Here we set the default font to our cross-browser font stack, and tell all components to render their UI with this font and the specified font-related styles instead. The following commits will make some components free from Roboto. fix(badge): remove dependency on Roboto font fix(banner): remove dependency on Roboto font fix(button): remove dependency on Roboto font fix(breadcrumbs): render divider properly without dependency to chosen font This ensures that the divider character is vertically & horizontally center-aligned. fix(button-group): remove dependency on Roboto font fix(checkbox): remove dependency on Roboto font fix(chip-set): remove dependency on Roboto font fix(code-editor): ensure usage of cross-browser font stack This component was only using `monospace` as `font-family` to render the code. However, we have a `mixin` which offers a better font stack and defaults to more aesthetically pleasing fonts. The font stack has `monospace` as its last fallback. fix(collapsible-section): remove dependency on Roboto font fix(dialog): remove dependency on Roboto font fix(header): ensure optimal rendering of fonts As heading and subheading fonts are now using our font-stack, their `font-weight` had to be adjusted. fix(helper-line): remove dependency on Roboto font chore(style/internal): delete unused "helper-text" mixins Since we started using `limel-helper-line`, these mixins became obsolete. Previously, they were used in all components with the helper-line. fix(input elements): remove dependency on Roboto font From now on these component will inherit its unspecified font-related styles: - input field - select - picker - chipset - slider fix(list, menu): remove dependency on Roboto font fix(select): ensure optimal rendering of fonts As heading is now using our font-stack, its `font-weight` had to be adjusted. fix(select): remove dependency on Roboto font fix(slider): remove dependency on Roboto font fix(snackbar): remove dependency on Roboto font fix(switch): remove dependency on Roboto font fix(tab-bar): remove dependency on Roboto font fix(table): remove dependency on Roboto font fix(form): remove dependency on Roboto font Also, this commit ensures if `lime-typography.scss` has been imported anywhere that we have missed, or couldn't remove, the font-family that are coming from this file would not be automatically set to MDC's font stack. fix(circular-progress): fit in longer values better in `small` & `x-small` sizes

lime-opensource · 2024-01-05T14:31:09Z

🎉 This PR is included in version 37.1.0-next.84 🎉

The release is available on:

Your semantic-release bot 📦🚀

lime-opensource · 2024-02-02T13:26:05Z

🎉 This PR is included in version 37.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

lime-opensource · 2024-02-02T14:17:03Z

🎉 This PR is included in version 37.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Kiarokh force-pushed the no-roboto branch from fcc518f to 118ea44 Compare December 28, 2023 11:10

Kiarokh commented Dec 28, 2023

View reviewed changes

src/components/button/button.scss Show resolved Hide resolved

Kiarokh force-pushed the no-roboto branch 3 times, most recently from 9b23913 to 60f7119 Compare December 29, 2023 12:23

Kiarokh marked this pull request as ready for review December 29, 2023 13:06

Kiarokh force-pushed the no-roboto branch 3 times, most recently from 59d2d65 to eda590c Compare December 29, 2023 13:28

Kiarokh changed the title ~~No roboto~~ Remove dependency on Roboto font, and make all components font-agnostic. Enable consumers to have their desired font-family Dec 29, 2023

Kiarokh force-pushed the no-roboto branch 2 times, most recently from c6e1df6 to 450b220 Compare January 2, 2024 14:06

Kiarokh force-pushed the no-roboto branch from 450b220 to bb95577 Compare January 4, 2024 11:08

adrianschmidt force-pushed the no-roboto branch from bb95577 to f0fcc02 Compare January 4, 2024 11:59

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss Outdated Show resolved Hide resolved

adrianschmidt force-pushed the no-roboto branch from f0fcc02 to eeb2dfd Compare January 4, 2024 12:28

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

src/style/mixins.scss Outdated Show resolved Hide resolved

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

README.md Outdated Show resolved Hide resolved

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

src/components/popover-surface/popover-surface.scss Outdated Show resolved Hide resolved

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

README.md Show resolved Hide resolved

Kiarokh commented Jan 4, 2024

View reviewed changes

src/style/mixins.scss Outdated Show resolved Hide resolved

adrianschmidt force-pushed the no-roboto branch from ac373fc to 8f5f29a Compare January 4, 2024 14:13

Kiarokh commented Jan 4, 2024

View reviewed changes

src/components/tooltip/tooltip-content.scss Outdated Show resolved Hide resolved

adrianschmidt reviewed Jan 4, 2024

View reviewed changes

src/components/select/select.scss Show resolved Hide resolved

adrianschmidt force-pushed the no-roboto branch from 8f5f29a to 968fe8b Compare January 5, 2024 08:56

Kiarokh commented Jan 5, 2024

View reviewed changes

Kiarokh mentioned this pull request Jan 5, 2024

markdown: font size and letter spacing for code could be improved #2649

Closed

adrianschmidt force-pushed the no-roboto branch 4 times, most recently from eb9fddd to 5724134 Compare January 5, 2024 10:25

Kiarokh commented Jan 5, 2024

View reviewed changes

adrianschmidt reviewed Jan 5, 2024

View reviewed changes

README.md

Copy link

Contributor

adrianschmidt Jan 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm… progress-flow uses Arial for some reason… both in next and in this PR…

adrianschmidt reviewed Jan 5, 2024

View reviewed changes

chore(mixins): add mixins for cross-browser font stacks

e99fa09

adrianschmidt force-pushed the no-roboto branch from b612769 to ace5bb9 Compare January 5, 2024 11:47

adrianschmidt force-pushed the no-roboto branch from ace5bb9 to ca91cd1 Compare January 5, 2024 12:10

adrianschmidt enabled auto-merge (rebase) January 5, 2024 14:28

adrianschmidt approved these changes Jan 5, 2024

View reviewed changes

adrianschmidt merged commit aab0740 into next Jan 5, 2024

adrianschmidt deleted the no-roboto branch January 5, 2024 14:28

lime-opensource added the released on @next label Jan 5, 2024

lime-opensource added the released label Feb 2, 2024

lime-opensource added the released on @37.1.x label Feb 2, 2024

	font-family: var(--kompendium-example-font-family, inherit);
	font-family: inherit;

Remove dependency on Roboto font, and make all components font-agnostic. Enable consumers to have their desired font-family #2673

Remove dependency on Roboto font, and make all components font-agnostic. Enable consumers to have their desired font-family #2673

Uh oh!

Conversation

Kiarokh commented Dec 28, 2023 • edited by adrianschmidt Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review:

Browsers tested:

Uh oh!

github-actions bot commented Dec 28, 2023

Uh oh!

Uh oh!

Kiarokh commented Dec 29, 2023

Uh oh!

adrianschmidt commented Jan 4, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adrianschmidt Jan 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adrianschmidt Jan 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lime-opensource commented Jan 5, 2024

Uh oh!

lime-opensource commented Feb 2, 2024

Uh oh!

lime-opensource commented Feb 2, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Kiarokh commented Dec 28, 2023 •

edited by adrianschmidt

Loading

adrianschmidt Jan 5, 2024 •

edited

Loading

adrianschmidt Jan 5, 2024 •

edited

Loading