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

Jump to bottom

Docs > Content > Tables: Add design callout messages #2032

Merged
merged 3 commits into from
Jul 28, 2023
Merged

Docs > Content > Tables: Add design callout messages #2032

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c05a0e
Docs > Content > Tables: Add design callout messages
isabellechanclou May 12, 2023
1aab05d
Merge branch 'main' into main-ic-add-design-callouts-in-tables
MewenLeHo May 22, 2023
cf7f5e1
Merge branch 'main' into main-ic-add-design-callouts-in-tables
julien-deramond Jul 28, 2023
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
8 changes: 8 additions & 0 deletions site/content/docs/5.3/content/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@ Use contextual class to color tables, table rows or individual cells.

## Accented tables

{{< design-callout-alert info >}}
It is possible to use striped rows **or** striped columns in your tables, but you **can't use both in a same table**.
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we explain why? 'because it does not respect the Orange Design System specifications' for instance?

Copy link
Member

Choose a reason for hiding this comment

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

We are not showing examples where we use both in the same table. Is this callout really needed?

Copy link
Member Author

Choose a reason for hiding this comment

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

Should we explain why? 'because it does not respect the Orange Design System specifications' for instance?

Good point Mewen. Indeed, it would be better to write: "It is possible to use striped rows or striped columns in your tables, but you can't use both in a same table because it does not respect the Orange Design System specifications."

Copy link
Member Author

Choose a reason for hiding this comment

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

We are not showing examples where we use both in the same table. Is this callout really needed?

We thought this design callout message would be necessary to avoid users using both horizontal and vertical striped at the same time, knowing that in the following section "Striped columns", there is an example that could be misleading: it shows 2 striped columns + a striped line (but not the entire line).

Copy link
Member

@hannahiss hannahiss Jul 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

there is an example that could be misleading: it shows 2 striped columns + a striped line (but not the entire line).

Yes, this example is really confusing, it is just striped columns, but in the third line, 2 cells are merged with a colspan="2". (example from Bootstrap)

Copy link
Member

Choose a reason for hiding this comment

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

IMHO it's obvious that one shouldn't use both at the same time. I vote for not adding this callout. Moreover, the doc doesn't show that they can be used at the same time, it only shows the rendering when there are merged cells.

Copy link
Member Author

Choose a reason for hiding this comment

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

It this it only shows the rendering when there are merged cells. that can be confusing to me and motivated my adding the design callout.

{{< /design-callout-alert >}}

### Striped rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
Expand Down Expand Up @@ -362,6 +366,10 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells

## Nesting

{{< design-callout-alert >}}
This component variant should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons.
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
{{< /design-callout-alert >}}

Border styles, active styles, and table variants are not inherited by nested tables.

<div class="bd-example">
Expand Down