Remove styled-components usage from DataTable.features.stories.tsx

[Copilot]

This PR removes the last remaining styled-components usage from DataTable.features.stories.tsx as part of the migration away from styled-components to CSS modules.

Changes Made

• Removed import Box from '../Box' - the deprecated styled-components-based Box component
• Created DataTable.features.stories.module.css with a .RepositoryHeader class for story-specific styling
• Replaced Box component usage in the WithRightAlignedColumns story with a <div> using the CSS module class

Technical Details

The Box component was only used in one place within the WithRightAlignedColumns story to create a flex container for the Repository header with an icon:

Before:

header: () => (
  <Box display="flex" alignItems="center" sx={{gap: 1}}>
    <RepoIcon size={16} />
    Repository
  </Box>
),

After:

header: () => (
  <div className={classes.RepositoryHeader}>
    <RepoIcon size={16} />
    Repository
  </div>
),

The equivalent CSS module provides the same styling:

.RepositoryHeader {
  display: flex;
  align-items: center;
  gap: var(--base-size-4); /* equivalent to sx={{gap: 1}} */
}

Verification

• ✅ All linting passes (ESLint and stylelint)
• ✅ Build completes successfully
• ✅ Storybook builds without errors
• ✅ Visual verification confirms identical rendering

The file now has zero styled-components dependencies and follows the project's CSS modules migration guidelines.

Fixes #6500.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dd6e7fa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.2 KB (0%)
packages/react/dist/browser.umd.js	90.38 KB (0%)

[hectahertz]

@copilot you can remove this comment

[Copilot]

Removed the unnecessary comment. Changes are in commit dd6e7fa.

[Copilot]

Pull Request Overview

This PR removes the last remaining styled-components usage from DataTable.features.stories.tsx by migrating to CSS modules as part of the project's styled-components migration effort.

• Removes the deprecated Box component import and usage
• Creates a new CSS module file with equivalent styling
• Replaces Box component with a div using CSS module class

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/react/src/DataTable/DataTable.features.stories.tsx	Removes Box import and replaces Box usage with div using CSS module class
packages/react/src/DataTable/DataTable.features.stories.module.css	Creates new CSS module with RepositoryHeader class providing equivalent flex styling

Comments suppressed due to low confidence (1)

packages/react/src/DataTable/DataTable.features.stories.module.css:4

• The comment incorrectly states '0.25rem' when var(--base-size-4) typically equals 0.25rem * 4 = 1rem. The comment should clarify that var(--base-size-4) is equivalent to gap: 1 in the spacing scale, not the literal rem value.

  gap: var(--base-size-4); /* 0.25rem equivalent to sx={{gap: 1}} */