Cards : fix design + add design callout messages #2001
Conversation
Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
isabellechanclou
added
v5
component
docs
isabellechanclou
added this to In progress
in 🟣 Sprint 20 - April/May 2023
via automation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
julien-deramond
moved this from In progress / Draft
to Need Dev Review
in 🟣 PR Board (Draft)
| <br><br> | ||
| Regarding the available card sizes, please note that: | ||
|
|
||
| - **In the Orange Design System**, a card component is available in **3 sizes** that **can not be modified**. Depending on the size of your screen, you can adjust the cards layout by changing the cards size (choosing among the 3 existing sizes) and/or the number of cards to display on a single line. |
There was a problem hiding this comment.
Is that true ? Or do we need to wait for designer to be moreprecise on this ?
There was a problem hiding this comment.
Dev + design told me to write this...
There was a problem hiding this comment.
Well I don't know what to do with these informations but let's keep it for the lead dev review 🤷
| Please refer to the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) guidelines on the Orange Design System website. | ||
| {{< /design-callout-alert >}} | ||
|
|
||
|
|
| @@ -12,6 +12,18 @@ toc: true | |||
|
|
|||
| A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Boosted 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. | |||
|
|
|||
| {{< design-callout-alert info >}} | |||
| **On the Orange Design System website**, you'll find the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) component guidelines describing how Orange designers want cards to be represented and used. | |||
There was a problem hiding this comment.
| **On the Orange Design System website**, you'll find the [Cards](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) component guidelines describing how Orange designers want cards to be represented and used. | |
| **On the Orange Design System website**, you'll find the [Cards component guidelines](https://system.design.orange.com/0c1af118d/p/82eaf1-cards/b/69655e) describing how Orange designers want cards to be represented and used. |
For better a11y
There was a problem hiding this comment.
If I do that here, I will have to it in all the other design callout messages :-)
And then, what about "[Cards component design guidelines]" to be fully acurate?
| - **In the Orange Design System**, a card component is available in **3 sizes** that **can not be modified**. Depending on the size of your screen, you can adjust the cards layout by changing the cards size (choosing among the 3 existing sizes) and/or the number of cards to display on a single line. | ||
|
|
||
| - **In Boosted**, as some card variants can be used as containers, more sizing possibilities are offered to adjust their sizes. | ||
| {{< /design-callout-alert >}} |
There was a problem hiding this comment.
The layout seems a bit weird to me atm.
There was a problem hiding this comment.
I kind of agree, but it's not obviously better without the free lines between paragraphs. I'll try to find another way to display that info.
| @@ -423,6 +460,12 @@ Cards include various options for customizing their backgrounds, borders, and co | |||
|
|
|||
| Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. | |||
|
|
|||
| {{< design-callout-alert >}} | |||
| These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications. | |||
There was a problem hiding this comment.
| These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications. | |
| These variants **with a colored background** should not be used because they do not respect the Orange Design System specifications. The background should either be black or white. |
Values might need an update
There was a problem hiding this comment.
I propose:
The variants with a colored background (except black background) should not be used because they do not respect the Orange Design System specifications.
Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
|
Kudos, SonarCloud Quality Gate passed!
|
Related issues
Closes #1992
Linked to #1199
Description
After a design review of all the card variants, the purpose of this PR is to fix the design of some variants in order to make them aligned on the Orange design specifications and to add design callout messages before the variants that should not be used because not suitable in Orange design system.
Motivation & Context
The goal here is to offer in Boosted more guidance on what can be used or not in Orange apps and to reduce discrepancies between Boosted documentation and the Orange design system one.
Types of change
Live previews
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge