refactor(emotion): migrate the docs app to the new theming engine - #2680
refactor(emotion): migrate the docs app to the new theming engine#2680ToMESSKa wants to merge 1 commit into
Conversation
|
Visual regression report
Diff images (33)alert.png — baseline no longer producedavatar.png — baseline no longer producedbadge.png — baseline no longer producedbillboard.png — baseline no longer producedbreadcrumb.png — baseline no longer producedbutton-and-derivatives.png — baseline no longer producedbyline.png — baseline no longer producedcalendar.png — baseline no longer producedcheckbox.png — baseline no longer producedcheckboxgroup.png — baseline no longer producedcolorpicker.png — baseline no longer producedcontextview.png — baseline no longer producedcustom-and-lucide-icons.png — baseline no longer produceddateinput-dateinput2.png — baseline no longer produceddatetimeinput.png — baseline no longer produceddiff-demo.png — 6324 pixels differdrilldown.png — baseline no longer producedfiledrop.png — baseline no longer producedform-errors.png — baseline no longer producedheading.png — baseline no longer producedimg.png — baseline no longer producedlink.png — baseline no longer producedmenu.png — baseline no longer producedmetric-pill-tag-timeselect-text.png — baseline no longer producedoptions.png — baseline no longer producedpagination.png — baseline no longer producedprogressbar.png — baseline no longer producedselect-simpleselect.png — baseline no longer producedtable.png — baseline no longer producedtabs.png — baseline no longer producedtooltip.png — baseline no longer producedtreebrowser.png — baseline no longer producedview.png — baseline no longer producedBaselines come from the |
| borderRadius: '0rem', | ||
| warningBorderColor: '#BF32A4', | ||
| warningIconBackground: '#BF32A4', | ||
| boxShadow: 'none' |
There was a problem hiding this comment.
This was replaced with hasShadow={false} as v2 removed Alert's boxShadow token.
| label: 'app__hamburger', | ||
| position: 'fixed', | ||
| zIndex: componentTheme.menuToggleZIndex, | ||
| zIndex: 1, |
There was a problem hiding this comment.
new theming system has no stacking tokens in semantics or sharedTokens so a hard-coded value was used
| flexShrink: 0, | ||
| borderInlineEndColor: componentTheme.navBorderColor, | ||
| borderInlineEndWidth: componentTheme.navBorderWidth, | ||
| borderInlineEndColor: semantics.color.stroke.muted, |
There was a problem hiding this comment.
new values were chosen to match the old value (resolved to a concrete hex/rem) everywhere in styles.ts files
| margin={smallScreen ? 'none none medium' : 'none none x-small'} | ||
| margin={ | ||
| smallScreen | ||
| ? 'none none general.spaceXl' |
There was a problem hiding this comment.
mapping the old spacing values to the new ones were based on previous mapping e.g. #2647
| return { | ||
| ...componentVariables | ||
| } | ||
| export default function GithubLogo() { |
There was a problem hiding this comment.
Lucide has no brand GitHub logo so I created this, similar to Header/instui-panda.tsx
c32fa6e to
21bfb45
Compare
| borderRadius="medium" | ||
| > | ||
| <Table caption={label} layout="fixed"> | ||
| <Table caption={() => label} layout="fixed"> |
There was a problem hiding this comment.
Table's caption changed type in v2
| <InstUISettingsProvider | ||
| theme={{ | ||
| componentOverrides: { | ||
| themeOverride={{ |
There was a problem hiding this comment.
this was changed to the new form
| padding={ | ||
| layout === 'small' ? 'xx-large large' : 'x-large xx-large' | ||
| } | ||
| padding="general.space2xl general.space2xl" |
There was a problem hiding this comment.
x-large and xx-large all map to general.space2xl so both branches became identical. Padding is bit smaller here now vs the current docs app.
| export { mirrorShorthandEdges } from './mirrorShorthandEdges.js' | ||
| export { calcSpacingFromShorthand } from './calcSpacingFromShorthand.js' | ||
| export { calcFocusOutlineStyles } from './calcFocusOutlineStyles.js' | ||
| export { applyColorModifiers } from './applyColorModifiers.js' |
There was a problem hiding this comment.
withStyleForDocs decorator needs it to resolve {value, modify} tokens the way withStyleNew does but it was not exported.
HerrTopi
left a comment
HerrTopi
left a comment
There was a problem hiding this comment.
On first load, the components' theme is light mode despite the dropdown showing canvas
Closes INSTUI-5087
21bfb45 to
29879e2
Compare
| ) | ||
| this.setState({ | ||
| docsData, | ||
| themeKey: Object.keys(docsData.themes)[0] |
There was a problem hiding this comment.
On first load, the components' theme is light mode despite the dropdown showing canvas
@HerrTopi The examples showed light theme instead of canvas because the first one in this list was taken ['legacy-canvas', 'legacy-canvas-high-contrast', 'canvas', 'canvas-high-contrast', 'light', 'dark', 'shared-tokens'], when it should have been 'canvas'. The preview examples never could use 'legacy-canvas' as a theme so they defaulted to the App's theme (which was coincidentally canvas). Switching the App to the light theme exposed this bug.
@HerrTopi great catch, I fixed this. |
2 participants
Closes INSTUI-5087
OVERVIEW:
TEST PLAN: