feat: enhance support for the nested theme token structure #958
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
🦋 Changeset detectedLatest commit: 562b05f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
PR Reviewer Guide 🔍(Review updated until commit 4c99f66)Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
Bundle ReportChanges will increase total bundle size by 752 bytes (0.03%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## v2 #958 +/- ##
==========================================
+ Coverage 78.44% 78.46% +0.02%
==========================================
Files 406 403 -3
Lines 6693 6692 -1
==========================================
+ Hits 5250 5251 +1
+ Misses 1443 1441 -2 ☔ View full report in Codecov by Sentry. |
Tonic UI DemoOn 2024-12-18 11:41:22 +0000, PR #958 (562b05f) was successfully deployed. You can view it at the following link: |
|
/ask Provide several Jest tests with the new theme token structure for the PR. Here is the example usage: <Box color="white.primary" />
<Box color="black.primary" />The {
colors: {
white: {
primary: {
value: 'rgba(255, 255, 255, .92)',
},
secondary: {
value: 'rgba(255, 255, 255, .60)',
},
},
black: {
primary: {
value: 'rgba(0, 0, 0, .92)',
},
secondary: {
value: 'rgba(0, 0, 0, .65)',
},
},
},
} |
Ask❓Provide several Jest tests with the new theme token structure for the PR. Here is the example usage: Answer:Here are several Jest tests for the new theme token structure: describe('Theme token structure', () => {
const theme = {
colors: {
white: {
primary: {
value: 'rgba(255, 255, 255, .92)',
},
secondary: {
value: 'rgba(255, 255, 255, .60)',
},
},
black: {
primary: {
value: 'rgba(0, 0, 0, .92)',
},
secondary: {
value: 'rgba(0, 0, 0, .65)',
},
},
},
};
it('should resolve nested color tokens with dot notation', () => {
const result = getter(theme.colors, 'white.primary');
expect(result).toBe('rgba(255, 255, 255, .92)');
});
it('should resolve secondary color variants', () => {
const result = getter(theme.colors, 'black.secondary');
expect(result).toBe('rgba(0, 0, 0, .65)');
});
it('should fallback to original value when token path does not exist', () => {
const result = getter(theme.colors, 'white.nonexistent');
expect(result).toBe('white.nonexistent');
});
it('should handle undefined theme values', () => {
const result = getter(undefined, 'white.primary');
expect(result).toBe('white.primary');
});
it('should handle nested objects without value property', () => {
const customTheme = {
colors: {
custom: {
primary: 'rgb(100, 100, 100)',
},
},
};
const result = getter(customTheme.colors, 'custom.primary');
expect(result).toBe('rgb(100, 100, 100)');
});
});These tests cover:
Each test verifies a different aspect of the new theme token structure functionality while ensuring the getter function works as expected. |
|
/ask Enhance test coverage in "transforms.test.js" by adding test cases for the |
Ask❓Enhance test coverage in transforms.test.js by adding test cases for the Answer:I'll help you create test cases for the describe('positiveOrNegative', () => {
const scale = {
1: '4px',
2: '8px',
3: '12px',
4: '16px'
};
it('should handle positive values', () => {
expect(positiveOrNegative(scale, '2')).toBe('8px');
expect(positiveOrNegative(scale, 3)).toBe('12px');
expect(positiveOrNegative(scale, '4')).toBe('16px');
});
it('should handle negative values', () => {
expect(positiveOrNegative(scale, '-2')).toBe('-8px');
expect(positiveOrNegative(scale, -3)).toBe('-12px');
expect(positiveOrNegative(scale, '-4')).toBe('-16px');
});
it('should return original value when scale value is not found', () => {
expect(positiveOrNegative(scale, '5')).toBe('5');
expect(positiveOrNegative(scale, '-5')).toBe('-5');
});
it('should handle undefined scale', () => {
expect(positiveOrNegative(undefined, '2')).toBe('2');
expect(positiveOrNegative(undefined, '-2')).toBe('-2');
});
it('should handle non-numeric strings', () => {
expect(positiveOrNegative(scale, 'auto')).toBe('auto');
expect(positiveOrNegative(scale, '-auto')).toBe('-auto');
});
});These test cases cover:
You'll need to import the import { getter, positiveOrNegative } from '../transforms';This test suite will provide comprehensive coverage for the |
|
/review |
|
Persistent review updated to latest commit 4c99f66 |
PR Type
Enhancement
Description
valuepropertycolor="white.primary")valueproperty from object results, enabling more flexible theme token definitionsChanges walkthrough 📝
transforms.js
Support nested theme token structure with value propertypackages/styled-system/src/utils/transforms.js
valueproperty from object results
structure
tokens