[OUDS] Add draft component table

packages/orange-compact/scss/ouds-web.scss

@@ -19,7 +19,7 @@
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
-@import "@ouds/web-common/scss/tables";
+@import "@ouds/web-common/scss/table";
 @import "@ouds/web-common/scss/forms";
 @import "@ouds/web-common/scss/links"; // OUDS mod
 @import "@ouds/web-common/scss/bullet-list"; // OUDS mod

packages/orange/scss/ouds-web.scss

@@ -19,7 +19,7 @@
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
-@import "@ouds/web-common/scss/tables";
+@import "@ouds/web-common/scss/table";
 @import "@ouds/web-common/scss/forms";
 @import "@ouds/web-common/scss/links"; // OUDS mod
 @import "@ouds/web-common/scss/bullet-list"; // OUDS mod

packages/sosh/scss/ouds-web.scss

@@ -19,7 +19,7 @@
 @import "@ouds/web-common/scss/images";
 @import "@ouds/web-common/scss/containers";
 @import "@ouds/web-common/scss/grid";
-@import "@ouds/web-common/scss/tables";
+@import "@ouds/web-common/scss/table";
 @import "@ouds/web-common/scss/forms";
 @import "@ouds/web-common/scss/links"; // OUDS mod
 @import "@ouds/web-common/scss/bullet-list"; // OUDS mod

scss/_mixins.scss

@@ -30,7 +30,6 @@
 @import "mixins/pagination";
 @import "mixins/lists";
 @import "mixins/forms";
-@import "mixins/table-variants";
 
 // Skins
 @import "mixins/border-radius";

scss/_tables.scss → scss/_table.scss

@@ -1,6 +1,10 @@
 //
 // Basic OUDS Web table
 //
+%active {
+  --#{$prefix}table-color-state: var(--#{$prefix}color-content-default);
+  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+}
 
 .table {
   // Reset needed for nesting tables
@@ -27,7 +31,14 @@
   // OUDS mod
   //// Only rows have border
   //// Set line-height everywhere
-  tr {
+
+  // stylelint-disable selector-no-qualifying-type
+  th[scope="col"],
+  th[scope="colgroup"] {
+    border-bottom: $table-header-border-width solid var(--#{$prefix}table-border-color);
+  }
+
+  tr  {
     border-bottom: $table-border-width solid var(--#{$prefix}table-border-color);
   }
 
@@ -64,9 +75,21 @@
 
   // OUDS mod
   // When using checkboxes in the first column, force width to ensure correct spacing on this column
-  &.has-checkbox tr > :first-child {
-    width: $spacer * 2;
-    max-width: $spacer * 2;
+  tr > *:has(.control-item-indicator[type="checkbox"]:not([role="switch"]), .control-item-indicator[type="radio"]) {
+    width: 1%;
+    padding: 0;
+    vertical-align: middle;
+  }
+
+  // Extend checkboxes and radios click area
+  tr .radio-button-standalone,
+  tr .checkbox-standalone {
+    width: stretch;
+  }
+
+  // Automatically highlight rows with checked checkboxes or radios
+  tbody tr:has(.control-item-indicator[type="checkbox"]:not([role="switch"]):checked, .control-item-indicator[type="radio"]:checked) {
+    @extend %active;
   }
 
   // Use negative margins on icons in tables to preserve row height
@@ -75,6 +98,15 @@
     margin-top: $table-cell-icon-margin-top;
     margin-bottom: $table-cell-icon-margin-bottom;
   }
+
+  .table-cell-component {
+    padding-block: 0;
+    vertical-align: middle;
+
+    > * {
+      vertical-align: middle;
+    }
+  }
   // End mod
 }
 
@@ -90,18 +122,6 @@
   caption-side: bottom; // OUDS mod
 }
 
-
-//
-// Condensed table w/ half padding
-//
-
-.table-sm {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm calc($table-cell-padding-y-sm + 1px); // OUDS mod
-  }
-}
-
 // OUDS mod: no .table-bordered
 
 // OUDS mod: no .table-borderless
@@ -129,10 +149,8 @@
 // Active table
 //
 // The `.table-active` class can be added to highlight rows or cells
-
-.table-active {
-  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
-  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+.table-active[data-bs-theme="dark"] {
+  @extend %active;
 }
 
 // Hover effect
@@ -146,14 +164,13 @@
   }
 }
 
-// Table variants set the table cell backgrounds, border colors
-// and the colors of the striped, hovered & active tables
-
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
+// Table functional colors
+@each $table-state in ("info", "positive", "warning", "negative") {
+  .table-#{$table-state} {
+    --#{$prefix}table-bg: var(--#{$prefix}color-surface-status-#{$table-state}-muted);
+  }
 }
 
-
 // Responsive tables
 //
 // Generate series of `.table-responsive-*` classes for configuring the screen

scss/_variables.scss

@@ -788,13 +788,11 @@ $mark-bg:                     $ouds-color-action-highlighted-light !default; //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 // scss-docs-start table-variables
-$table-cell-padding-y:                  .875rem !default; // OUDS mod
-$table-cell-padding-x:                  $spacer * .5 !default; // OUDS mod
-$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
 
-$table-cell-icon-margin-top:            -.75rem !default; // OUDS mod
-$table-cell-icon-margin-bottom:         -.625rem !default; // OUDS mod
+$table-cell-icon-margin-top:            -.7rem !default; // OUDS mod
+$table-cell-icon-margin-bottom:         -.5rem !default; // OUDS mod
 $table-cell-vertical-align:             top !default;
 $table-line-height:                     1.25 !default; // OUDS mod
 
@@ -806,12 +804,12 @@ $table-th-font-weight:                  null !default;
 
 $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)`
 $table-variant-striped-bg-factor:       .08 !default; // OUDS mod
 
-$table-active-color:                    $table-color !default;
+$table-active-color:                    var(--#{$prefix}color-content-default) !default;
 $table-active-bg-factor:                .135 !default; // OUDS mod
-$table-active-bg:                       rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}table-active-bg-factor)) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
+$table-active-bg:                       var(--#{$prefix}color-bg-inverse-low) !default; // OUDS mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor)`
 $table-variant-active-bg-factor:        .4 !default; // OUDS mod
 
 $table-hover-color:                     $table-color !default;
@@ -820,33 +818,19 @@ $table-hover-bg:                        rgba(var(--#{$prefix}emphasis-color-rgb)
 $table-variant-hover-bg-factor:         .2 !default; // OUDS mod
 
 $table-border-factor:                   .4 !default; // OUDS mod
-$table-border-width:                    calc(var(--#{$prefix}border-width) * .5) !default;  // OUDS mod
+$table-header-border-width:             2px !default;  // OUDS mod
+$table-border-width:                    1px !default;  // OUDS mod
 $table-border-color:                    var(--#{$prefix}color-border-default) !default; // OUDS mod: instead of `var(--#{$prefix}border-color)`
 
-$table-striped-order:                   odd !default;
-$table-striped-columns-order:           even !default;
+$table-striped-order:                   even !default; // OUDS mod
+$table-striped-columns-order:           odd !default; // OUDS mod
 
 $table-group-separator-color:           currentcolor !default;
 
 $table-caption-color:                   var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
 $table-caption-padding-y:               .75rem !default; // OUDS mod
-
-$table-bg-scale:                        -60% !default;
 // scss-docs-end table-variables
 
-// scss-docs-start table-loop
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
-) !default;
-// scss-docs-end table-loop
-
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

site/data/components-details.ts

@@ -282,6 +282,27 @@ export const componentsDetails: ComponentCardData[] = [
         </div>
       </div>`
   },
+  {
+    name: 'Table',
+    category: 'Content display',
+    snippet: `
+      <table class="table w-75 mb-none">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">First</th>
+            <th scope="col">Second</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>`
+  },
   {
     name: 'Tag',
     link: 'tags#tag',

site/data/sidebar-components.yml

@@ -21,6 +21,8 @@
     - title: Select input
     - title: Skeleton
     - title: Switch
+    - title: Table
+      draft: true
     - title: Tags
     - title: Text area
     - title: Text input
@@ -73,8 +75,6 @@
       coming_soon: true
     - title: Sticker
       coming_soon: true
-    - title: Table
-      coming_soon: true
     - title: Title bar
       coming_soon: true
     - title: Toast

site/src/assets/partials/snippets.js

@@ -252,4 +252,86 @@ export default () => {
     }
     // js-docs-end skeleton-second-example
   }
+
+  // -------------------------------
+  // Table
+  // -------------------------------
+  // Indeterminate checkbox in table example in docs and StackBlitz
+  // storybook-start table
+  // js-docs-start live-row-selection-checkboxes
+  // Manage checkboxes states: select/deselect all rows, update header checkbox state, update data-bs-theme on selected rows
+  const tableSelectAll = document.querySelector('#tableWithCheckboxes #tableSelectAll')
+  const allCheckboxes = document.querySelectorAll('#tableWithCheckboxes tbody input[type="checkbox"]')
+
+  function updateSelectAllState() {
+    const checkedCheckboxes = document.querySelectorAll('#tableWithCheckboxes tbody input[type="checkbox"]:checked')
+
+    if (checkedCheckboxes.length === 0) {
+      // None are checked
+      tableSelectAll.checked = false
+      tableSelectAll.indeterminate = false
+    } else if (checkedCheckboxes.length === allCheckboxes.length) {
+      // All are checked
+      tableSelectAll.checked = true
+      tableSelectAll.indeterminate = false
+    } else {
+      // Some are checked
+      tableSelectAll.checked = false
+      tableSelectAll.indeterminate = true
+    }
+  }
+
+  function updateSelectedRows() {
+    const selectedRows = document.querySelectorAll('#tableWithCheckboxes tbody tr:has(input[type="checkbox"]:checked)')
+
+    if (selectedRows.length >= 1) {
+      selectedRows.forEach(row => row.setAttribute('data-bs-theme', 'dark'))
+    }
+
+    const unselectedRows = document.querySelectorAll('#tableWithCheckboxes tbody tr:has(input[type="checkbox"]:not(:checked))')
+    if (unselectedRows.length >= 1) {
+      unselectedRows.forEach(row => row.removeAttribute('data-bs-theme'))
+    }
+
+    updateSelectAllState()
+  }
+
+  if (tableSelectAll) {
+    tableSelectAll.addEventListener('change', event => {
+      allCheckboxes.forEach(checkbox => {
+        checkbox.checked = event.target.checked
+      })
+      updateSelectedRows()
+    })
+
+    // Add change listener to all row checkboxes
+    allCheckboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', updateSelectedRows)
+    })
+
+    // Initialize the state on load
+    updateSelectAllState()
+  }
+  // js-docs-end live-row-selection-checkboxes
+
+  // js-docs-start live-row-selection-radios
+  // Manage radio buttons states: update data-bs-theme on selected row
+  const allRadios = document.querySelectorAll('#tableWithRadios tbody input[type="radio"]')
+  // Add change listener to all row radios
+  allRadios.forEach(radio => {
+    radio.addEventListener('change', event => {
+      const selectedRow = event.target.closest('tr')
+      const allRows = document.querySelectorAll('#tableWithRadios tbody tr')
+
+      // Remove data-bs-theme from all rows
+      allRows.forEach(row => row.removeAttribute('data-bs-theme'))
+
+      // Add data-bs-theme="dark" to the selected row
+      if (selectedRow) {
+        selectedRow.setAttribute('data-bs-theme', 'dark')
+      }
+    })
+  })
+  // js-docs-end live-row-selection-radios
+  // storybook-end table
 }