feat(react): add createTheme for theme customization
#947
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
🦋 Changeset detectedLatest commit: db02958 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 83288bc)Here are some key observations to aid the review process:
|
|
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. |
Tonic UI DemoOn 2024-11-29 14:04:23 +0000, PR #947 (db02958) was successfully deployed. You can view it at the following link: |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## v2 #947 +/- ##
==========================================
+ Coverage 78.41% 78.45% +0.03%
==========================================
Files 405 406 +1
Lines 6677 6692 +15
==========================================
+ Hits 5236 5250 +14
- Misses 1441 1442 +1 ☔ View full report in Codecov by Sentry. |
|
/ask Add test cases for the |
Ask❓Add test cases for the Answer:To add test cases for the
Here is an example of how you might write these tests using a testing framework like Jest: import createTheme from '../src/theme/createTheme';
describe('createTheme', () => {
it('should create a default theme', () => {
const theme = createTheme();
expect(theme).toHaveProperty('colors');
expect(theme).toHaveProperty('config');
});
it('should merge custom theme options', () => {
const customTheme = createTheme({ colors: { primary: 'blue' } });
expect(customTheme.colors.primary).toBe('blue');
});
it('should enable CSS variables when specified', () => {
const theme = createTheme({ config: { useCSSVariables: true } });
expect(theme.config.useCSSVariables).toBe(true);
expect(theme).toHaveProperty('__cssVariableMap');
});
it('should apply custom prefix to CSS variables', () => {
const theme = createTheme({ config: { prefix: 'custom' } });
const cssVariableMap = theme.__cssVariableMap;
expect(Object.keys(cssVariableMap)[0]).toMatch(/^--custom-/);
});
it('should merge additional arguments into the theme', () => {
const additionalConfig = { components: { Button: { defaultProps: { size: 'large' } } } };
const theme = createTheme({}, additionalConfig);
expect(theme.components.Button.defaultProps.size).toBe('large');
});
it('should generate a CSS variable map', () => {
const theme = createTheme({ config: { useCSSVariables: true } });
expect(theme.__cssVariableMap).toBeDefined();
expect(Object.keys(theme.__cssVariableMap).length).toBeGreaterThan(0);
});
});These tests cover the basic functionality and expected behaviors of the |
|
/review |
|
/improve |
|
Persistent review updated to latest commit 6b4e3e8 |
![codiumai-pr-agent-free[bot]](https://avatars.githubusercontent.com/in/354216?s=60&v=4){kind=small}
|
/describe |
|
PR Description updated to latest commit (782ad84)
|
|
/ask Add a test case to |
Ask❓Add a test case to Answer:To add a test case in import createTheme from '../createTheme';
describe('createTheme', () => {
// Existing test cases...
it('should allow an empty prefix for CSS variables', () => {
const theme = createTheme({ cssVariables: { prefix: '' } });
expect(theme.vars).toBeDefined();
expect(theme.vars.prefix).toBe('');
// Check that CSS variables are generated without a prefix
const cssVariableKeys = Object.keys(theme.vars).filter(x => x.startsWith('--'));
expect(cssVariableKeys.length).toBeGreaterThan(0);
cssVariableKeys.forEach(key => {
expect(key).toMatch(/^--[a-zA-Z0-9-_]+$/); // Ensure no prefix is added
});
});
});Explanation:
|
…riablePrefix` for improved clarity
|
/review |
|
/improve |
PR Code Suggestions ✨Latest suggestions up to 83288bc
Previous suggestions✅ Suggestions up to commit 6b4e3e8
✅ Suggestions up to commit efb03a3
|
|
Persistent review updated to latest commit 83288bc |
|
/ask Add test case for custom |
Ask❓Add test case for custom Answer:To add a test case for a custom
import createTheme from '../createTheme';
describe('createTheme with custom rootSelector', () => {
it('should apply custom rootSelector for CSS variables', () => {
const customRootSelector = '.custom-root';
const theme = createTheme({
cssVariables: {
rootSelector: customRootSelector,
},
});
expect(theme.rootSelector).toBe(customRootSelector);
expect(theme.cssVariables).toBeDefined();
// Additional checks can be added here to verify the CSS variables are applied to the custom rootSelector
});
});
By following these steps, you can ensure that the |
User description
Demo: https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-947
Theme Configuration:
https://mui.com/material-ui/customization/css-theme-variables/configuration/
Description
createThemefunction to simplify theme customization across the application.createThemefor consistent theme management.TonicProviderby setting default values forcolorModeandcolorStyleprops.ThemeProviderby removing redundant CSS variable map logic.createThemein expected exports.createThemein the theme package, indicating a shift to a new implementation.Changes walkthrough 📝
8 files
_app.page.js
Integrate `createTheme` for theme customizationpackages/react-docs/pages/_app.page.js
createThemeimport for theme customization.createThemefunction.create-react-app.js
Use `createTheme` and `merge` for theme and color customizationpackages/react-docs/sandbox/create-react-app.js
createThemeimport for theme customization.createThemefunction.mergeutility for color style customization.TonicProvider.js
Set default values for TonicProvider propspackages/react/src/provider/TonicProvider.js
colorModeandcolorStyleprops.ThemeProvider.js
Simplify ThemeProvider by removing CSS variable map logicpackages/react/src/theme/ThemeProvider.js
createTheme.js
Introduce `createTheme` function for customizable themespackages/react/src/theme/createTheme.js
createThemefunction for theme customization.index.js
Export `createTheme` from theme indexpackages/react/src/theme/index.js
createThemeexport.theme.js
Use `createTheme` for default theme configurationpackages/react/src/theme/theme.js
createTheme.createCSSVariableMap.js
Add utility for creating CSS variable mappackages/react/src/theme/utils/createCSSVariableMap.js
1 files
index.test.js
Update tests to include `createTheme` exportpackages/react/tests/index.test.js
createThemeto the list of expected exports.3 files
index.js
Deprecate `createTheme` in theme packagepackages/theme/src/index.js
createThemeas deprecated.index.page.mdx
Update usage documentation for `createTheme`packages/react-docs/pages/getting-started/usage/index.page.mdx
createThemefor theme customization.index.page.mdx
Update breakpoints documentation for `createTheme`packages/react-docs/pages/theme/breakpoints/index.page.mdx
createTheme.PR Type
enhancement, tests, documentation
Description
createThemefunction to simplify theme customization, allowing for CSS variable generation with optional prefixes.createTheme, replacing deprecated theme configuration methods.createThemefunction, ensuring correct theme merging and CSS variable handling.CodeBlockwithPreformattedTextin documentation for better code display.Changes walkthrough 📝
4 files
ThemeProvider.js
Simplify ThemeProvider by removing redundant logicpackages/react/src/theme/ThemeProvider.js
useMemo.themeprop inStyledEngineThemeProvider.css-vars.js
Introduce utility functions for CSS variable generationpackages/react/src/theme/utils/css-vars.js
toCSSVariableandmapThemeToCSSVariablesfunctions.createTheme.js
Implement createTheme function for theme customizationpackages/react/src/theme/createTheme.js
createThemefunction for theme customization.theme.js
Simplify theme initialization with createThemepackages/react/src/theme/theme.js
createTheme.2 files
createTheme.test.js
Add tests for createTheme functionpackages/react/src/theme/tests/createTheme.test.js
createThemefunction.InputControl.test.js
Update InputControl tests to use CSS variablespackages/react/src/input/tests/InputControl.test.js
useCSSVariablesoption from render options.4 files
index.page.mdx
Update usage examples with createThemepackages/react-docs/pages/getting-started/usage/index.page.mdx
createThemefor theme customization.index.page.mdx
Update color style documentation with PreformattedTextpackages/react-docs/pages/components/color-style/index.page.mdx
CodeBlockwithPreformattedTextfor displaying code.index.page.mdx
Update installation guide with dynamic descriptionspackages/react-docs/pages/getting-started/installation/index.page.mdx
usage.js
Replace CodeBlock with PreformattedText in modal usagepackages/react-docs/pages/components/modal/usage.js
CodeBlockwithPreformattedTextfor code display.