Restore icons page #2889

hannahiss · 2025-03-12T11:36:53Z

Related issues

Description

Restore the documentation for icons in extend/icons
Move the size helper documentation into this page to propose a complete documentation about icons, and change links to this part
Adapt links and buttons documentation pages to refer properly to internal icon doc (before pointing to solaris icons finder). For buttons, move the paragraph up to be common to "text and icon" and "icon only"
Remove unused icons inside grid system example
Add escape_svg on our background CSS example as we advise developers to do :-)
Add heart-recommend.svg to make an example of external image with an SVG
Restore all icons directly from SVG sprite downloaded from solaris icons finder (which removed the commas)

Motivation & Context

During beta user tests, we saw than icons documentation is needed. Now that we know that we will still use the Solaris icons library, we can restore the page.

Types of change

New feature (non-breaking change which adds functionality)

Live previews

netlify · 2025-03-12T11:38:58Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`44045da`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/67ecfa0640ef760008041040
😎 Deploy Preview	https://deploy-preview-2889--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

# Conflicts: # site/data/sidebar.yml

louismaximepiton

There's probably a link to uncoment in the button page.
All oran.ge/icons should probably be replaced by {{< param icons >}}.
icon-link.md page should be dropped since it's no more in sidebar.yml.
Helpers > Icon entry should be removed from the sidebar.yml

site/static/docs/0.2/assets/img/ouds-web-sprite.svg

site/content/docs/0.2/extend/icons.md

louismaximepiton · 2025-03-17T11:09:36Z

site/content/docs/0.2/extend/icons.md

+The following color utilities and CSS variables are intended for use only with functional icons, not with text, and icons should not be used on their own, but only alongside text, as functional colors do not provide sufficient contrast to ensure readability.
+
+{{< example >}}
+<div class="d-flex justify-content-center gap-md-tall">


As you raised earlier, it's very hard to understand design choices about not making them accessible.

I really don't understand the why of these choices of non-accessible icon colors, what can we do ?

louismaximepiton · 2025-03-17T11:11:07Z

site/content/docs/0.2/extend/icons.md

+
+### Other icons
+
+Here are some examples of other [color utilities]({{< docsref "utilities/colors#colors" >}}) and CSS variables used with icons.


Should we add a table like the one above ?

I could, but I don't have the context of usage...

I feel this could be an improvement for the future, let's not close it but feel free not to fill it in this PR.

site/content/docs/0.2/extend/icons.md

Aniort

two points to see...

Aniort · 2025-03-19T08:49:54Z

site/content/docs/0.2/extend/icons.md

+The following color utilities and CSS variables are intended for use only with functional icons, not with text, and icons should not be used on their own, but only alongside text, as functional colors do not provide sufficient contrast to ensure readability.
+
+{{< example >}}
+<div class="d-flex justify-content-center gap-md-tall">


I really don't understand the why of these choices of non-accessible icon colors, what can we do ?

Aniort · 2025-03-19T09:01:31Z

site/content/docs/0.2/extend/icons.md

+- CSS background images are intended to be decorative
+
+#### Informative/meaningful icons
+If the icon is **meaningful**, e.g. only content of a button, you have to provide an appropriate alternative text: for example, the description of the icon or the description of the action triggered. The best way to do this is to keep the icon hidden to assistive technologies (see above) and add a visually hidden label (which will be perceived by assistive technologies) by using the `.visually-hidden` class. For external images, you can also fill the `alt` attribute directly.


My adding for these last sentences:
The best way to do this is to keep the icon hidden to assistive technologies (see above) and add a visually hidden label (which will be perceived by assistive technologies) by using the .visually-hidden class. For external images, you can also fill in the alt attribute directly. Instead of these two techniques, you can also use an aria-label in the button tag to provide an accessible name.

Copilot

Pull Request Overview

This PR restores and updates documentation for icons in the project by consolidating icon usage instructions and references across several pages. Key changes include:

Updating the buttons, links, typography, and text documentation to reference the new icon size utilities and SVG sprite guidelines.
Adjusting the sidebar to remove draft flags for icon-related pages.
Removing the obsolete icon-link helper documentation.

Reviewed Changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
site/content/docs/0.2/components/buttons.md	Updated icon usage instructions in buttons with an informative callout.
site/content/docs/0.2/components/links.md	Revised icon usage guidance in links and improved accessibility recommendations.
site/content/docs/0.2/utilities/text.md	Updated reference from icon helper to icon size utilities.
site/content/docs/0.2/content/typography.md	Consistent update of icon helper reference to icon size utilities.
site/data/sidebar.yml	Removed draft flags to make the Icons documentation live.
site/content/docs/0.2/utilities/colors.md	Simplified icon-related color utility guidance by linking to the proper icons documentation.
site/content/docs/0.2/helpers/icon-link.md	Removed obsolete icon-link helper documentation.

Files not reviewed (2)

site/assets/scss/_component-examples.scss: Language not supported
site/content/docs/0.2/examples/grid-system/index.html: Language not supported

Comments suppressed due to low confidence (2)

site/content/docs/0.2/helpers/icon-link.md:1

The file icon-link.md has been completely removed. Please confirm that all references to the icon-link helper have been updated or removed to avoid broken documentation links.

----

site/data/sidebar.yml:217

Ensure that the removal of the 'draft: true' flag for the Icons page is intentional, so the Icons documentation appears correctly in the sidebar.

-      draft: true

site/static/docs/0.2/assets/img/ouds-web-sprite.svg

louismaximepiton · 2025-03-21T15:29:04Z

site/content/docs/0.2/extend/icons.md

+
+### Other icons
+
+Here are some examples of other [color utilities]({{< docsref "utilities/colors#colors" >}}) and CSS variables used with icons.


I feel this could be an improvement for the future, let's not close it but feel free not to fill it in this PR.

site/content/docs/0.2/extend/icons.md

louismaximepiton · 2025-03-21T15:46:26Z

site/content/docs/0.2/extend/icons.md

+<button type="button" class="btn btn-icon btn-default" aria-label="Open settings">
+  <span class="icon si si-settings" aria-hidden="true"></span>
+</button>
+<img src="/docs/{{< param docs_version >}}/assets/img/heart-recommend.svg" alt="Favorite" width="32" height="32">


Is that normal to have it here ? It feels weird to have it, I couldn't spot it in dark mode at the first glance.

@louismaximepiton, I find it logical to have an example with an image since we talk about the alt attribute. Maybe we should use another icon color that could work on white and dark background ?

…nd-icons-page # Conflicts: # site/content/docs/0.3/helpers/icon-link.md # site/content/docs/0.3/helpers/icon.md # site/static/docs/0.3/assets/img/heart-recommend.svg

louismaximepiton

2 more small changes and we're good to go

louismaximepiton · 2025-03-25T11:15:23Z

site/static/docs/0.3/assets/img/ouds-web-sprite.svg

    <path d="M500 75.5c-234.72 0-425 190.28-425 425s190.28 425 425 425 425-190.28 425-425-190.28-425-425-425Zm0 100a75 75 0 1 1-75 75 75 75 0 0 1 75-75Zm125 600H400v-25.737l5.287-.167c15.555-.5 27.115-4.919 34.368-13.136 2.576-2.972 6.956-13.1 6.956-47.153v-227.2c0-32.392-4.523-44.6-8.311-49.141-5.359-6.391-16.516-10.147-33.17-11.156l-5.13-.31v-26h175v313.807c0 32.415 8.457 44.618 12.24 49.142 5.34 6.389 15.68 10.142 32.625 11.152l5.135.3v25.6Z" style="fill-rule:evenodd"/>
  </symbol>
-  <symbol id="tick-confirmation" fill="currentColor" viewBox="0 0 1000 1000">
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="tick-confirmation">
    <path d="M500 75C265.279 75 75 265.279 75 500s190.279 425 425 425 425-190.279 425-425S734.721 75 500 75Zm222.051 264.988-254.642 320-.007-.006a39.635 39.635 0 0 1-62.125 0l-.006.005-127.321-160 .006-.006a40.142 40.142 0 0 1 2.928-53.267l15.915-16a39.612 39.612 0 0 1 54.022-2.077l.006-.008L428.382 515 663.77 285.818l.006.008A39.734 39.734 0 0 1 730.77 315a39.952 39.952 0 0 1-8.726 24.981Z" style="fill-rule:evenodd"/>
  </symbol>
  <symbol id="vector" viewBox="0 0 46 48" fill="currentColor">


Suggested change

<symbol id="vector" viewBox="0 0 46 48" fill="currentColor">

<symbol fill="currentColor" viewBox="0 0 46 48" id="vector">

site/content/docs/0.3/extend/icons.md

# Conflicts: # site/content/docs/0.3/components/buttons.md # site/content/docs/0.3/helpers/icon.md

restore icons page

722c034

hannahiss added 6 commits March 14, 2025 08:48

restore icons page, move icons color to icons page

9a85cce

adapt color doc, move sizes into extend/icons

d934f91

adapt icons doc, move sizes into extend/icons

1c7058d

adapt icons doc, move sizes into extend/icons

38cef99

link to guidelines

7913788

fix links

920306a

hannahiss marked this pull request as ready for review March 14, 2025 16:10

Merge branch 'ouds/main' into ouds/main-2887-docs-add-extend-icons-page

47478cb

# Conflicts: # site/data/sidebar.yml

louismaximepiton requested changes Mar 17, 2025

View reviewed changes

fix some things after LM review, still work to do on accessibility icons

73c8217

Aniort suggested changes Mar 19, 2025

View reviewed changes

hannahiss added 5 commits March 20, 2025 16:44

Merge branch 'ouds/main' into ouds/main-2887-docs-add-extend-icons-page

7277642

reviews changes

2c946c9

reviews changes

08c255a

review changes

6a87b71

same doc on icons for links and buttons

f6fdda5

vprothais requested a review from Copilot March 21, 2025 11:04

Copilot AI reviewed Mar 21, 2025

View reviewed changes

change asked by Vincent A.

c7c57ed

louismaximepiton reviewed Mar 21, 2025

View reviewed changes

hannahiss added 2 commits March 24, 2025 17:26

Merge branch 'refs/heads/ouds/main' into ouds/main-2887-docs-add-exte…

1061e9b

…nd-icons-page # Conflicts: # site/content/docs/0.3/helpers/icon-link.md # site/content/docs/0.3/helpers/icon.md # site/static/docs/0.3/assets/img/heart-recommend.svg

Change CSS background image to mask image and adapt doc

c557586

hannahiss requested a review from louismaximepiton March 24, 2025 16:32

louismaximepiton linked an issue Mar 25, 2025 that may be closed by this pull request

[OUDS] docs: add 'Extend > Icons' page #2887

Closed

2 tasks

louismaximepiton approved these changes Mar 25, 2025

View reviewed changes

vprothais requested changes Apr 1, 2025

View reviewed changes

site/content/docs/0.3/extend/icons.md Outdated Show resolved Hide resolved

site/content/docs/0.3/extend/icons.md Outdated Show resolved Hide resolved

site/content/docs/0.3/extend/icons.md Outdated Show resolved Hide resolved

vprothais added this to the OUDS milestone Apr 1, 2025

vprothais added the 📖 documentation Improvements or additions to documentation label Apr 1, 2025

hannahiss added 4 commits April 2, 2025 09:57

typos after reviews

6f08d80

Merge branch 'ouds/main' into ouds/main-2887-docs-add-extend-icons-page

24be638

# Conflicts: # site/content/docs/0.3/components/buttons.md # site/content/docs/0.3/helpers/icon.md

space between side to side buttons

edf3e3d

Add bg always white on img to ensure visibility in dark mode

44045da

vprothais merged commit eccc477 into ouds/main Apr 2, 2025
11 checks passed

vprothais deleted the ouds/main-2887-docs-add-extend-icons-page branch April 2, 2025 09:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Restore icons page #2889

Restore icons page #2889

hannahiss commented Mar 12, 2025 •

edited

Loading

netlify bot commented Mar 12, 2025 •

edited

Loading

louismaximepiton left a comment

louismaximepiton Mar 17, 2025

Aniort Mar 19, 2025

louismaximepiton Mar 17, 2025

hannahiss Mar 18, 2025

louismaximepiton Mar 21, 2025

Aniort left a comment

Aniort Mar 19, 2025

Aniort Mar 19, 2025

hannahiss Mar 21, 2025

Copilot AI left a comment

louismaximepiton Mar 21, 2025

louismaximepiton Mar 21, 2025

vprothais Apr 2, 2025

louismaximepiton left a comment

louismaximepiton Mar 25, 2025


		### Other icons

		Here are some examples of other [color utilities]({{< docsref "utilities/colors#colors" >}}) and CSS variables used with icons.

	<symbol id="vector" viewBox="0 0 46 48" fill="currentColor">
	<symbol fill="currentColor" viewBox="0 0 46 48" id="vector">

Restore icons page #2889

Restore icons page #2889

Conversation

hannahiss commented Mar 12, 2025 • edited Loading

Related issues

Description

Motivation & Context

Types of change

Live previews

netlify bot commented Mar 12, 2025 • edited Loading

✅ Deploy Preview for boosted ready!

louismaximepiton left a 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

Aniort left a 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

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louismaximepiton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hannahiss commented Mar 12, 2025 •

edited

Loading

netlify bot commented Mar 12, 2025 •

edited

Loading