Skip to content

Commit d4dcb51

Browse files
dreamwaspdreamwasp
authored
Merge branch 'main' into cass-ajr-GMT-1479
2 parents c0bb30d + ac2df13 commit d4dcb51

File tree

11 files changed

+61
-12
lines changed

11 files changed

+61
-12
lines changed

‎packages/gamut-kit/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
### [0.6.562](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-07)
7+
8+
**Note:** Version bump only for package @codecademy/gamut-kit
9+
610
### [0.6.561](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-04)
711

812
**Note:** Version bump only for package @codecademy/gamut-kit

‎packages/gamut-kit/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "@codecademy/gamut-kit",
33
"description": "Styleguide & Component library for Codecademy",
4-
"version": "0.6.561",
4+
"version": "0.6.562",
55
"author": "Codecademy Engineering <[email protected]>",
66
"dependencies": {
7-
"@codecademy/gamut": "67.3.0",
7+
"@codecademy/gamut": "67.3.1",
88
"@codecademy/gamut-icons": "9.52.1",
99
"@codecademy/gamut-illustrations": "0.55.1",
1010
"@codecademy/gamut-patterns": "0.10.19",

‎packages/gamut/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
### [67.3.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-07)
7+
8+
### Bug Fixes
9+
10+
- **List, DataList, DataTable:** fix background colors + non-interactive table header spacing ([ceb1162](https://github.com/Codecademy/gamut/commit/ceb116292ee92ef716c59a504b2a45c348877602))
11+
612
## [67.3.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-04)
713

814
### Features

‎packages/gamut/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@codecademy/gamut",
33
"description": "Styleguide & Component library for Codecademy",
4-
"version": "67.3.0",
4+
"version": "67.3.1",
55
"author": "Codecademy Engineering <[email protected]>",
66
"dependencies": {
77
"@codecademy/gamut-icons": "9.52.1",

‎packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const TableHeaderRow: HeaderComponent = ({
7878
columnHeader
7979
dataTablePadding={dataTablePadding}
8080
>
81-
<FlexBox alignItems="flex-end" gap={8} width="100%">
81+
<FlexBox alignItems="flex-end" gap={8} height="100%" width="100%">
8282
{filters && (
8383
<FilterControl
8484
columnKey={rowProperty}

‎packages/gamut/src/List/ListRow.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
126126
c_sm: undefined,
127127
}}
128128
isOl={renderNumbering}
129-
parentEl
130129
role={role}
131130
scrollable={scrollable}
132131
tabIndex={tabIndex}

‎packages/gamut/src/List/elements.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ const rowStates = states({
7575
flexDirection: { _: 'column', c_base: 'row', c_sm: 'column' },
7676
},
7777
/**
78-
* Only the outermost element needs to inherit the background - otherwise it can stack with semitransparent bg colors and look off.
78+
* Overrides the background of the element to transparent.
7979
*/
80-
parentEl: {
81-
bg: 'inherit',
80+
transparentBg: {
81+
bg: 'transparent',
8282
},
8383
});
8484

@@ -120,11 +120,10 @@ const spacingVariants = variant({
120120

121121
const rowVariants = variant({
122122
prop: 'variant',
123-
base: {
124-
bg: 'background',
125-
},
123+
base: {},
126124
variants: {
127125
default: {
126+
bg: 'background',
128127
border: 1,
129128
borderTop: 'none',
130129
'&:first-of-type': {
@@ -138,10 +137,12 @@ const rowVariants = variant({
138137
},
139138
},
140139
card: {
140+
bg: 'background',
141141
border: 1,
142142
borderRadius: 'sm',
143143
},
144144
block: {
145+
bg: 'background',
145146
border: 'none',
146147
borderRadius: 'sm',
147148
},

‎packages/styleguide/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
### [78.3.1](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-07)
7+
8+
### Bug Fixes
9+
10+
- **List, DataList, DataTable:** fix background colors + non-interactive table header spacing ([ceb1162](https://github.com/Codecademy/gamut/commit/ceb116292ee92ef716c59a504b2a45c348877602))
11+
612
## [78.3.0](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2025-11-04)
713

814
### Features

‎packages/styleguide/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@codecademy/styleguide",
33
"description": "Styleguide & Component library for codecademy.com",
4-
"version": "78.3.0",
4+
"version": "78.3.1",
55
"author": "Codecademy Engineering",
66
"license": "MIT",
77
"publishConfig": {

‎packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,29 @@ You can set the `shadow` prop to `true` to add a shadow to the DataTable when it
140140

141141
<Canvas of={DataTableStories.Scrollable} />
142142

143+
## Background colors
144+
145+
DataTable's background is linked to the `current-background` token. You can change the color scheme of a DataTable by wrapping it in a `<Background />` component from `@codecademy/gamut-styles`.
146+
147+
When you wrap a DataTable in `Background`, the component will also automatically adjust its colors to ensure proper contrast and accessibility. For example, using a dark background like `bg="black"` will switch the DataTable to dark mode, making text and UI elements light-colored for better contrast. You can find more information about the `Background` component in the <LinkTo id="Foundations/ColorMode">ColorMode documentation</LinkTo>.
148+
149+
### Usage
150+
151+
```tsx
152+
import { Background } from '@codecademy/gamut-styles';
153+
import { DataTable } from '@codecademy/gamut';
154+
155+
const MyDarkDataTable = () => {
156+
return (
157+
<Background bg="black" p={8}>
158+
<DataTable id="dark-table" idKey="id" rows={data} columns={columns} />
159+
</Background>
160+
);
161+
};
162+
```
163+
164+
<Canvas of={DataTableStories.BackgroundColors} />
165+
143166
## Container Query Control
144167

145168
DataTable inherits container query functionality from the underlying List component. By default, DataTable uses CSS container queries to determine responsive behavior based on the container width rather than viewport width. This ensures optimal display when DataTable is placed in constrained layouts.

0 commit comments

Comments
 (0)