From fd1081553a4073e51313b45ac21839ff584be1cd Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Thu, 1 Oct 2026 12:49:00 -0400 Subject: [PATCH 1/2] Update table classes for consistency --- .storybook/assets/example-layout.html | 2 +- src/components/table.css | 10 ++++++++++ src/stories/Components/Table/Table.js | 6 +++--- src/stories/Components/Table/Table.mdx | 6 +++--- 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/.storybook/assets/example-layout.html b/.storybook/assets/example-layout.html index 895e7a4a..f11b7963 100644 --- a/.storybook/assets/example-layout.html +++ b/.storybook/assets/example-layout.html @@ -535,7 +535,7 @@

Timeline with Icons

rutrum. Quisque et iaculis lectus.

- +
diff --git a/src/components/table.css b/src/components/table.css index a72fab20..2f3a1b1b 100644 --- a/src/components/table.css +++ b/src/components/table.css @@ -81,28 +81,37 @@ } /* Layout Modifiers */ + /* The *-layout names are kept for backwards compatibility */ + &.table--layout-auto, &.table--auto-layout { table-layout: auto; } + &.table--layout-fixed, &.table--fixed-layout { table-layout: fixed; } /* Table Density Modifiers */ + /* The *-density names are kept for backwards compatibility */ + &.table--density-default, &.table--default-density { --__op-table-cell-height: var(--_op-table-cell-height-default); } + &.table--density-comfortable, &.table--comfortable-density { --__op-table-cell-height: var(--_op-table-cell-height-comfortable); } + &.table--density-compact, &.table--compact-density { --__op-table-cell-height: var(--_op-table-cell-height-compact); } /* Striped Modifiers */ + /* The *-striped names are kept for backwards compatibility */ + &.table--striped-even, &.table--even-striped { tbody tr:nth-child(even) { background-color: var(--op-color-neutral-plus-seven); @@ -110,6 +119,7 @@ } } + &.table--striped-odd, &.table--odd-striped { tbody tr:nth-child(odd) { background-color: var(--op-color-neutral-plus-seven); diff --git a/src/stories/Components/Table/Table.js b/src/stories/Components/Table/Table.js index 3eb4e519..894d9252 100644 --- a/src/stories/Components/Table/Table.js +++ b/src/stories/Components/Table/Table.js @@ -26,9 +26,9 @@ export const createTable = ({ table.className = [ 'table', style !== 'default' ? `table--${style}` : '', - `table--${layout}-layout`, - `table--${density}-density`, - striped === 'off' ? '' : `table--${striped}-striped`, + `table--layout-${layout}`, + `table--density-${density}`, + striped === 'off' ? '' : `table--striped-${striped}`, stickyClass, ] .filter(Boolean) diff --git a/src/stories/Components/Table/Table.mdx b/src/stories/Components/Table/Table.mdx index e868e47f..1bca39ae 100644 --- a/src/stories/Components/Table/Table.mdx +++ b/src/stories/Components/Table/Table.mdx @@ -56,13 +56,13 @@ Table can be used as a standalone component, however, it does have a few depende ### Layout -`.table.table--auto-layout`, `.table.table--fixed-layout` (with auto being the default) modify the table layout. Auto will adjust according to the contents, fixed will evenly divide based on the amount of columns. +`.table.table--layout-auto`, `.table.table--layout-fixed` (with auto being the default) modify the table layout. Auto will adjust according to the contents, fixed will evenly divide based on the amount of columns. ### Density -`.table.table--default-density`, `.table.table--comfortable-density`, `.table.table--compact-density` (with default being the default) modify the table cell padding to expand or contract how much space they use. +`.table.table--density-default`, `.table.table--density-comfortable`, `.table.table--density-compact` (with default being the default) modify the table cell padding to expand or contract how much space they use. @@ -70,7 +70,7 @@ Table can be used as a standalone component, however, it does have a few depende ### Striping -`.table.table--even-striped`, `.table.table--odd-striped` color every other (odd or even) row with a light color on the neutral scale. +`.table.table--striped-even`, `.table.table--striped-odd` color every other (odd or even) row with a light color on the neutral scale. From 234cef1f2ca7d2edbe6bdb60d7c31cc00963b7a1 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Thu, 1 Oct 2026 12:53:29 -0400 Subject: [PATCH 2/2] Bump version to prep for release --- .storybook/assets/example-layout.html | 2 +- .storybook/assets/login-layout.html | 2 +- .storybook/assets/spinner-layout.html | 2 +- CHANGELOG.md | 23 +++++++++++++++++++++++ package.json | 2 +- 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/.storybook/assets/example-layout.html b/.storybook/assets/example-layout.html index f11b7963..90a3b6a3 100644 --- a/.storybook/assets/example-layout.html +++ b/.storybook/assets/example-layout.html @@ -5,7 +5,7 @@ - + Optics Example Layout diff --git a/.storybook/assets/login-layout.html b/.storybook/assets/login-layout.html index a82daa0a..b1a3c89b 100644 --- a/.storybook/assets/login-layout.html +++ b/.storybook/assets/login-layout.html @@ -5,7 +5,7 @@ - + Optics Login Layout
Movie