Skip to content

[OUDS] Add draft component table#3471

Open
hannahiss wants to merge 26 commits intoouds/mainfrom
ouds/main-his-basic-tables
Open

[OUDS] Add draft component table#3471
hannahiss wants to merge 26 commits intoouds/mainfrom
ouds/main-his-basic-tables

Conversation

@hannahiss
Copy link
Copy Markdown
Member

@hannahiss hannahiss commented Mar 23, 2026

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3463

Context & Motivation

Description

Checklists

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 23, 2026

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 5bf8cc7
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/69e0e197c1630300087e90c1
😎 Deploy Preview https://deploy-preview-3471--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@louismaximepiton louismaximepiton linked an issue Apr 9, 2026 that may be closed by this pull request
Copy link
Copy Markdown
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

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

LGTM tbh just some stuff

---
title: Tables
title: Table
description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with OUDS Web.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I do not understand the part in parenthesis here

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Ok I understand after reading the Overview, still I think it's not really necessary to have this detail in the subtitle...

Comment thread site/src/content/docs/components/table.mdx Outdated
Comment thread scss/_table.scss Outdated

// For rows
.table-striped {
.table-zebra {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

As we do not have design spec I think we can keep striped for now

Copy link
Copy Markdown
Collaborator

@MaxLardenois MaxLardenois left a comment

Choose a reason for hiding this comment

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

LGTM with two suggestions

Comment thread scss/_table.scss Outdated
Comment thread scss/_table.scss Outdated
@boosted-bot boosted-bot moved this from In Progress / Draft to Need Lead Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 16, 2026
@hannahiss hannahiss marked this pull request as ready for review April 16, 2026 12:33
@boosted-bot boosted-bot moved this from Need Lead Dev Review to Need Dev Review in 🟣 [Orange-Boosted-Bootstrap] PRs Board Apr 16, 2026
Comment thread scss/_variables.scss
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .035 !default; // OUDS mod: equivalent to `$gray-200`
$table-striped-bg: rgba(var(--#{$prefix}black-rgb), var(--#{$prefix}table-striped-bg-factor)) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
$table-striped-bg: var(--#{$prefix}color-bg-secondary) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor)`
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Shouldn't we use the surface secondary here ? it would make it work even if the table is already on a secondary background thank to the opacity.

Comment thread scss/_variables.scss
$table-cell-padding-y-sm: .5625rem !default; // OUDS mod
$table-cell-padding-x-sm: $table-cell-padding-x !default; // OUDS mod
$table-cell-padding-y: $core-ouds-dimension-200 !default; // OUDS mod
$table-cell-padding-x: $core-ouds-dimension-200 !default; // OUDS mod
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Should we use a semantic token to have a smaller padding on Orange Compact ?
The $ouds-dimension-5xsmall seems to be 16px in Orange and 12px on Orange Compact. Might be interesting. WDYT ?

<br/>
Resize window to see differences:
{getData('breakpoints').map((breakpoint) => {
return (
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Maybe we could add a small title before each table just to tell which breakpoint is use in the following table ?

<details class="mt-medium mb-2xlarge">
<summary>{summary}</summary>
<slot />
</details>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Good idea, I wonder how many details/summary can be replaced by this shortcode. Did you do a search by any chance, do you think it's worth creating an issue to replace them ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Need Dev Review

Development

Successfully merging this pull request may close these issues.

[OUDS] Table component as draft

4 participants