Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUDS] Add "Font" tokens, utilities and documentation #2774

Merged
merged 31 commits into from
Nov 28, 2024
Merged

[OUDS] Add "Font" tokens, utilities and documentation #2774

Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
6425606
tmp
louismaximepiton Nov 12, 2024
1dd77de
changed display classname and reordering of tables and small definition
vprothais Nov 12, 2024
e19d796
Some modifs + some OUDS mods
louismaximepiton Nov 12, 2024
60abb03
Add some OUDS mod, remove .initialism, add some documentation
louismaximepiton Nov 13, 2024
ff4b7fb
Thiner handle of OUDS mod + small tweaks of the doc.
louismaximepiton Nov 13, 2024
b52d72b
Adapting documentation with `px` and right values.
louismaximepiton Nov 13, 2024
ca6489b
First version with icon, missing links and the end of the icon page
louismaximepiton Nov 15, 2024
1b9667e
Remove '-web' from tokens, use mixin rather than extend, handle the i…
louismaximepiton Nov 18, 2024
bd6ef48
Fix ci
louismaximepiton Nov 18, 2024
c1b539d
Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-to…
louismaximepiton Nov 18, 2024
fe57462
Remove useless classes, Add font references everywhere, Add doc about…
louismaximepiton Nov 18, 2024
dd9517b
Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-to…
louismaximepiton Nov 19, 2024
74dfd3b
Small tweaks of font-stack
louismaximepiton Nov 19, 2024
602ac7e
Fix CI
louismaximepiton Nov 19, 2024
5de5703
migration guide (from v0.0.3)
hannahiss Nov 19, 2024
a006018
fix(review)
louismaximepiton Nov 20, 2024
abf01a6
Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-to…
louismaximepiton Nov 20, 2024
86c21c0
Align with mobile apps presentation
louismaximepiton Nov 20, 2024
245e5f9
css and sass vars and maps and mixins in both guides + first version …
hannahiss Nov 20, 2024
b7d1211
last fixes about bootstrap-compat migration doc
hannahiss Nov 20, 2024
298aa45
fix docs job (indentation)
hannahiss Nov 20, 2024
559bb00
Update site/content/docs/0.0/helpers/icon.md
hannahiss Nov 22, 2024
983fd91
Review migration guides and doc with LM
hannahiss Nov 22, 2024
305004d
Merge remote-tracking branch 'origin/ouds/main-lmp-tokens-font' into …
hannahiss Nov 22, 2024
fdaac34
Remove Label font-size classes
louismaximepiton Nov 25, 2024
49afd5e
Adding examples inside the doc, and small css tweaks
louismaximepiton Nov 25, 2024
cc71e9b
New ways to architect the icon + text
louismaximepiton Nov 26, 2024
1232b12
Adding migration guides
louismaximepiton Nov 26, 2024
6b6717f
fix(ci)
louismaximepiton Nov 26, 2024
899edd1
fix(design): after design review
louismaximepiton Nov 26, 2024
17917f9
Small tweak for forgotten `.text-*` and some spacings.
louismaximepiton Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 89 additions & 31 deletions site/content/docs/0.0/helpers/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,24 +375,11 @@
<svg class="decorative-tallest-icon text-info translate-none" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
```

## `<img>` and font icon

SVG Sprite is the preferred choice for flexibility, performance and accessibility but there are other ways to display icons. <!-- Check out for more information in [our documentation]({{< docsref "/extend/icons" >}}). -->

{{< example >}}
<h1>
<img class="hxl-tall-icon me-short" alt="" src="/docs/{{< param docs_version >}}/assets/img/vite.svg">
H1 with tall icon
</h1>
<h1>
<span class="hxl-tall-icon me-short si si-settings" aria-hidden="true"></span>
H1 with tall icon
</h1>
{{< /example >}}

## Multiple lines

Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases.
Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We've set arbitrary spacings, but align them your design.
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

### Centered on the first line

{{< example >}}
<h1>
Expand All @@ -409,14 +396,6 @@
</svg>
<h1 class="pt-shorter pt-md-short pt-xl-shorter">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
</div>
<div class="d-flex">
<img class="hxl-tall-icon me-scaled-short translate-none" alt="" src="/docs/{{< param docs_version >}}/assets/img/vite.svg">
<h1 class="pt-shorter pt-md-short pt-xl-shorter">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
</div>
<div class="d-flex">
<span class="hxl-tall-icon me-scaled-short si si-settings translate-none" aria-hidden="true"></span>
<h1 class="pt-shorter pt-md-short pt-xl-shorter">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
</div>
{{< /example >}}

{{< example >}}
Expand All @@ -424,7 +403,7 @@
<svg class="bm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (amet)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (consectetur)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (adipiscing)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (elit)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (Praesent)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (fermentum)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (consequat)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (fermentum)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (malesuada)

Check failure on line 406 in site/content/docs/0.0/helpers/icon.md

View workflow job for this annotation

GitHub Actions / cspell 

Unknown word (Praesent)
</p>

<!-- Prefer use this -->
Expand All @@ -433,23 +412,102 @@
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
<p class="pt-smash">
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci. class="pt-smash"
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
</p>
</div>
<div class="d-flex">
<img class="bm-tall-icon me-scaled-short translate-none" alt="" src="/docs/{{< param docs_version >}}/assets/img/vite.svg">
<p class="pt-smash">
{{< /example >}}

### Centered on text block

{{< example >}}
<h1 class="mb-tallest">
<svg class="hxl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
H1 with tall icon and a very long title to see how it behaves while being wrapped
</h1>

<!-- Prefer use this -->
<div class="d-flex align-items-center">
<svg class="hxl-tall-icon me-scaled-short text-info translate-none" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
<h1 class="mb-none">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
</div>
{{< /example >}}

{{< example >}}
<p>
<svg class="bm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.
</p>

<!-- Prefer use this -->
<div class="d-flex align-items-center">
<svg class="bm-tall-icon me-scaled-short text-info translate-none" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
<p class="mb-none">
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.
</p>
</div>
<div class="d-flex">
<span class="bm-tall-icon me-scaled-short si si-settings translate-none" aria-hidden="true"></span>
<p class="pt-smash">
{{< /example >}}

### Above text block

{{< example >}}
<h1 class="mb-tallest">
<svg class="hxl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
H1 with tall icon and a very long title to see how it behaves while being wrapped
</h1>

<!-- Prefer use this -->
<div>
<svg class="hxl-tall-icon mb-scaled-shorter text-info translate-none" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
<h1 class="mb-none">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
</div>
{{< /example >}}

{{< example >}}
<p class="mb-tallest">
<svg class="bm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.
</p>

<!-- Prefer use this -->
<div>
<svg class="bm-tall-icon mb-scaled-shortest text-info translate-none" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
<p class="mb-none">
Default long paragraph with tall icon. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum diam consequat, fermentum sem nec, malesuada eros. Praesent eu lectus ligula. Nullam et est in augue pharetra ultricies quis non orci.
</p>
</div>
{{< /example >}}

## `<img>` and font icon

SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. It should all behave the same due to our CSS. If you are experiencing any trouble, feel free to search or fill in a new [Github discussion](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions) or contact [our team]({{< docsref "/about/team" >}}). <!-- Check out for more information in [our documentation]({{< docsref "/extend/icons" >}}). -->
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

{{< example >}}
<h1>
<img class="hxl-tall-icon me-short" alt="" src="/docs/{{< param docs_version >}}/assets/img/vite.svg">
H1 with tall icon
</h1>
<h1>
<span class="hxl-tall-icon me-short si si-settings" aria-hidden="true"></span>
H1 with tall icon
</h1>
{{< /example >}}

## CSS

### Variables
Expand Down
Loading