Skip to content

Docs/motion components styling#35866

Draft
robertpenner wants to merge 8 commits intomicrosoft:masterfrom
robertpenner:docs/motion-components-styling
Draft

Docs/motion components styling#35866
robertpenner wants to merge 8 commits intomicrosoft:masterfrom
robertpenner:docs/motion-components-styling

Conversation

@robertpenner
Copy link
Collaborator

Previous Behavior

New Behavior

Related Issue(s)

  • Fixes #

…d component and improve layout

Replace plain divs with Card/CardHeader components and simplify grid layout in Blur stories.
Move toggle button below examples in BlurRadius story.
…d component and improve styling

Replace plain divs with Card/CardHeader components and add maxHeight/overflow constraints in all Fade story variants.
…rd component and improve styling

Replace plain divs with Card/CardHeader components. Remove manual border/shadow styles from ScaleSnappy controls in favor of Card defaults.
… Card component and add content wrapper

Replace plain divs with Card/CardHeader components. Add cardContent wrapper div needed because Collapse controls maxHeight on its child to animate height.
…radius combinations grid

Add inRadius support alongside outRadius, reorganize layout to a 2x2 grid showing combinations, and use CardFooter for controls.
@github-actions
Copy link

Pull request demo site: URL

@github-actions
Copy link

📊 Bundle size report

✅ No changes found

@@ -0,0 +1,7 @@
{

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 6 Changed
vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed
vr-tests-react-components/Menu 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png 13 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 16 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 744 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed
vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3154 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 498 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.1st selected.chromium_2.png 119 Changed
vr-tests/react-charting-LineChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed
vr-tests/react-charting-MultiStackBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - RTL.default.chromium.png 343 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant