theme designer: suggestions from Paul #23836

emmayjiang · 2022-07-07T21:48:22Z

Added the following features, at Paul's request

Reordered the ColorTokens to start with colorBrandBackground first - It's alphabetical AND when you change the first Assigned value, you can see the change immediately in the UI. So the customer knows that it's live and can see it update in real time
Provide a Reset button somewhere for the mapping in case the customer makes a mistake and wants to revert their changes (probably throw up a Popover/Dialog which we still need to build that says "Are you sure you want to revert your changes?)
Provide a visual indication that customer has made a change to the assigned value so they can keep track of what is changed vs not changed.

codesandbox-ci · 2022-07-07T21:55:19Z

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.

Latest deployment of this branch, based on commit d8a4347:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-07-07T21:55:50Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-avatar` AvatarGroup	`136.845 kB` `40.741 kB`	`137.325 kB` `40.831 kB`	`480 B` `90 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`554 B` `348 B`
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-accordion` Accordion (including children components)	`77.879 kB` `23.679 kB`
`react-alert` Alert	`80.938 kB` `20.342 kB`
`react-avatar` Avatar	`47.36 kB` `13.625 kB`
`react-avatar` AvatarGroupItem	`67.075 kB` `18.96 kB`
`react-badge` Badge	`21.653 kB` `6.862 kB`
`react-badge` CounterBadge	`22.557 kB` `7.172 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`35.704 kB` `9.499 kB`
`react-button` CompoundButton	`42.777 kB` `10.733 kB`
`react-button` MenuButton	`38.322 kB` `10.363 kB`
`react-button` SplitButton	`45.655 kB` `11.71 kB`
`react-button` ToggleButton	`50.929 kB` `10.919 kB`
`react-card` Card - All	`66.431 kB` `19.01 kB`
`react-card` Card	`62.113 kB` `17.911 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`73.805 kB` `23.899 kB`
`react-combobox` Dropdown (including child components)	`73.318 kB` `23.893 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.182 kB` `52.141 kB`
`react-components` react-components: FluentProvider & webLightTheme	`31.883 kB` `10.516 kB`
`react-divider` Divider	`16.321 kB` `5.837 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`22.861 kB` `7.512 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.082 kB` `4.88 kB`
`react-menu` Menu (including children components)	`116.803 kB` `35.477 kB`
`react-menu` Menu (including selectable components)	`120.002 kB` `35.962 kB`
`react-overflow` hooks only	`10.839 kB` `4.146 kB`
`react-popover` Popover	`104.924 kB` `31.964 kB`
`react-portal` Portal	`10.033 kB` `3.753 kB`
`react-positioning` usePositioning	`23.839 kB` `8.292 kB`
`react-provider` FluentProvider	`14.76 kB` `5.596 kB`
`react-radio` Radio	`30.481 kB` `10.406 kB`
`react-radio` RadioGroup	`14.319 kB` `5.711 kB`
`react-select` Select	`20.045 kB` `7.167 kB`
`react-slider` Slider	`26.136 kB` `8.387 kB`
`react-spinbutton` SpinButton	`43.53 kB` `12.346 kB`
`react-spinner` Spinner	`19.073 kB` `6.308 kB`
`react-switch` Switch	`26.621 kB` `8.596 kB`
`react-text` Text - Default	`11.572 kB` `4.537 kB`
`react-text` Text - Wrappers	`14.882 kB` `4.977 kB`
`react-textarea` Textarea	`22.228 kB` `7.523 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`28.995 kB` `6.215 kB`
`react-theme` Teams: Light theme	`16.973 kB` `4.86 kB`
`react-tooltip` Tooltip	`44.55 kB` `15.386 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 185ff7328615be1d8c0afd33cc8da767ea8dd891}

size-auditor · 2022-07-07T22:00:31Z

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: e1b9893

Possible causes

The baseline build e1b9893 is broken
The Size Auditor run for the baseline build e1b9893 was not triggered

Recommendations

Please merge your branch for this Pull request with the latest master build and commit your changes once again

packages/react-components/theme-designer/src/components/ColorTokens/useColorOverrideReducer.ts

…emmayjiang/fluentui into theme-designer-paul-suggestions

packages/react-components/theme-designer/package.json

Co-authored-by: Tristan Watanabe <[email protected]>

fabricteam · 2022-07-08T16:46:27Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1322	1305	5000
Button	mount	903	900	5000
FluentProvider	mount	1710	1725	5000
FluentProviderWithTheme	mount	536	607	10
FluentProviderWithTheme	virtual-rerender	584	590	10
FluentProviderWithTheme	virtual-rerender-with-unmount	631	638	10
MakeStyles	mount	1827	1743	50000
SpinButton	mount	2567	2633	5000

fabricteam · 2022-07-08T16:54:36Z

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	286	258	1.11:1
FormMinimalPerf.default	411	382	1.08:1
CarouselMinimalPerf.default	461	436	1.06:1
TreeWith60ListItems.default	160	152	1.05:1
ImageMinimalPerf.default	373	357	1.04:1
ListCommonPerf.default	620	597	1.04:1
SegmentMinimalPerf.default	335	322	1.04:1
TreeMinimalPerf.default	801	769	1.04:1
ButtonSlotsPerf.default	539	522	1.03:1
DropdownManyItemsPerf.default	662	643	1.03:1
ListNestedPerf.default	532	515	1.03:1
VideoMinimalPerf.default	641	621	1.03:1
AttachmentSlotsPerf.default	1051	1029	1.02:1
DialogMinimalPerf.default	748	731	1.02:1
FlexMinimalPerf.default	266	261	1.02:1
HeaderMinimalPerf.default	345	338	1.02:1
ListWith60ListItems.default	610	598	1.02:1
PopupMinimalPerf.default	610	597	1.02:1
PortalMinimalPerf.default	161	158	1.02:1
ProviderMergeThemesPerf.default	1248	1222	1.02:1
ProviderMinimalPerf.default	385	377	1.02:1
RadioGroupMinimalPerf.default	428	420	1.02:1
SkeletonMinimalPerf.default	329	323	1.02:1
SliderMinimalPerf.default	1680	1643	1.02:1
AnimationMinimalPerf.default	531	525	1.01:1
ChatMinimalPerf.default	731	727	1.01:1
DatepickerMinimalPerf.default	5607	5560	1.01:1
GridMinimalPerf.default	315	312	1.01:1
ListMinimalPerf.default	485	482	1.01:1
ReactionMinimalPerf.default	358	356	1.01:1
RefMinimalPerf.default	224	222	1.01:1
StatusMinimalPerf.default	647	640	1.01:1
TextMinimalPerf.default	332	329	1.01:1
AccordionMinimalPerf.default	136	136	1:1
AlertMinimalPerf.default	241	240	1:1
AvatarMinimalPerf.default	177	177	1:1
ButtonMinimalPerf.default	162	162	1:1
ButtonOverridesMissPerf.default	1453	1459	1:1
DividerMinimalPerf.default	334	333	1:1
DropdownMinimalPerf.default	3085	3086	1:1
LoaderMinimalPerf.default	679	679	1:1
MenuButtonMinimalPerf.default	1659	1655	1:1
TableManyItemsPerf.default	1871	1868	1:1
BoxMinimalPerf.default	327	330	0.99:1
CardMinimalPerf.default	524	531	0.99:1
EmbedMinimalPerf.default	4047	4080	0.99:1
HeaderSlotsPerf.default	714	721	0.99:1
LabelMinimalPerf.default	357	360	0.99:1
MenuMinimalPerf.default	816	822	0.99:1
SplitButtonMinimalPerf.default	4259	4285	0.99:1
IconMinimalPerf.default	562	569	0.99:1
TableMinimalPerf.default	382	385	0.99:1
CustomToolbarPrototype.default	2671	2708	0.99:1
TooltipMinimalPerf.default	1080	1088	0.99:1
InputMinimalPerf.default	1256	1277	0.98:1
ItemLayoutMinimalPerf.default	1131	1149	0.98:1
CheckboxMinimalPerf.default	2592	2668	0.97:1
LayoutMinimalPerf.default	336	346	0.97:1
RosterPerf.default	1077	1109	0.97:1
TextAreaMinimalPerf.default	461	480	0.96:1
ToolbarMinimalPerf.default	912	947	0.96:1
ChatWithPopoverPerf.default	354	373	0.95:1
AttachmentMinimalPerf.default	133	141	0.94:1

fabricteam · 2022-07-08T16:59:59Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	958	906	5000
Breadcrumb	mount	2809	2771	1000
Checkbox	mount	2646	2699	5000
CheckboxBase	mount	2291	2305	5000
ChoiceGroup	mount	4833	4769	5000
ComboBox	mount	990	990	1000
CommandBar	mount	10649	10729	1000
ContextualMenu	mount	11690	11901	1000
DefaultButton	mount	1148	1220	5000
DetailsRow	mount	3956	3953	5000
DetailsRowFast	mount	3937	4174	5000
DetailsRowNoStyles	mount	3739	3817	5000
Dialog	mount	2952	2920	1000
DocumentCardTitle	mount	174	173	1000
Dropdown	mount	3442	3404	5000
FocusTrapZone	mount	1897	1951	5000
FocusZone	mount	1930	1843	5000
IconButton	mount	1843	1807	5000
Label	mount	353	345	5000
Layer	mount	3025	2987	5000
Link	mount	482	471	5000
MenuButton	mount	1571	1503	5000
MessageBar	mount	2176	2213	5000
Nav	mount	3345	3397	1000
OverflowSet	mount	1168	1170	5000
Panel	mount	2294	2322	1000
Persona	mount	1032	1045	1000
Pivot	mount	1458	1468	1000
PrimaryButton	mount	1302	1348	5000
Rating	mount	7793	7860	5000
SearchBox	mount	1367	1379	5000
Shimmer	mount	2516	2490	5000
Slider	mount	2048	2018	5000
SpinButton	mount	5191	5308	5000
Spinner	mount	467	474	5000
SplitButton	mount	3194	3282	5000
Stack	mount	534	541	5000
StackWithIntrinsicChildren	mount	2320	2356	5000
StackWithTextChildren	mount	5449	5250	5000
SwatchColorPicker	mount	11949	11837	5000
TagPicker	mount	2881	2760	5000
TeachingBubble	mount	94243	93303	5000
Text	mount	426	411	5000
TextField	mount	1459	1422	5000
ThemeProvider	mount	1226	1220	5000
ThemeProvider	virtual-rerender	626	633	5000
ThemeProvider	virtual-rerender-with-unmount	1940	1937	5000
Toggle	mount	811	813	5000
buttonNative	mount	123	136	5000

packages/react-components/theme-designer/src/useThemeDesignerReducer.ts

packages/react-components/theme-designer/src/components/ColorTokens/useColorOverrideReducer.ts

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokensList.tsx

…'s props in favor on an onChange event handler prop

packages/react-components/theme-designer/src/components/ColorTokens/useColorOverrideReducer.ts

packages/react-components/theme-designer/src/useThemeDesignerReducer.ts

…rd coded

emmayjiang · 2022-07-11T22:05:05Z

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx

packages/react-components/theme-designer/src/components/Sidebar/Form.tsx

micahgodbolt

one suggestion, but not blocking

emmayjiang added 6 commits July 6, 2022 10:51

add new reducer to handle overrides

c5eb856

fix dom failing to update correctly

1a0b0b2

have colortokenslist update to reflect change in theme

76013b2

alphabetize tokens list

e76699e

add reset button

10dd057

indicator of change

6ad9e09

emmayjiang requested a review from a team as a code owner July 7, 2022 21:48

msft-fluent-ui-bot assigned bsunderhus Jul 7, 2022

emmayjiang changed the title ~~Theme Designer: Suggestions from Paul~~ Theme designer: suggestions from Paul Jul 7, 2022

emmayjiang changed the title ~~Theme designer: suggestions from Paul~~ theme designer: suggestions from Paul Jul 7, 2022

emmayjiang and others added 2 commits July 7, 2022 16:57

clean up code + fluentblocks color update

6a512d4

Update yarn lock

7cefbfe

emmayjiang requested a review from a team as a code owner July 8, 2022 13:41

emmayjiang and others added 2 commits July 8, 2022 08:52

revert to old contrast

9010153

Merge branch 'master' into theme-designer-paul-suggestions

cd5da0b

ling1726 reviewed Jul 8, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/useColorOverrideReducer.ts Outdated Show resolved Hide resolved

emmayjiang added 2 commits July 8, 2022 09:07

remove dispatch within reducer

f2c6724

Merge branch 'theme-designer-paul-suggestions' of https://github.com/…

ea08f3a

…emmayjiang/fluentui into theme-designer-paul-suggestions

TristanWatanabe reviewed Jul 8, 2022

View reviewed changes

packages/react-components/theme-designer/package.json Outdated Show resolved Hide resolved

Update packages/react-components/theme-designer/package.json

b3ed512

Co-authored-by: Tristan Watanabe <[email protected]>

fluent-blocks/color update

af92977

spmonahan reviewed Jul 8, 2022

View reviewed changes

emmayjiang added 2 commits July 8, 2022 11:18

rename handleButtonClick to handleResetClick

c526efc

remove dispatchState from useColorOverrideReducer

8b92c0d

emmayjiang added 3 commits July 8, 2022 11:26

rename state to appState

18a5ac8

create type ColorOverrideBrands

2fb038f

removing dispatchState and dispatchColorOverride from ColorTokensList…

ddadcbc

…'s props in favor on an onChange event handler prop

ling1726 reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/useColorOverrideReducer.ts Outdated Show resolved Hide resolved

micahgodbolt reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/useThemeDesignerReducer.ts Outdated Show resolved Hide resolved

emmayjiang added 4 commits July 11, 2022 10:01

hoist useColorOverrideReducer

b520cb7

move edittab form to usetab, changed theme reducer to no longer be ha…

fa3f990

…rd coded

continue editing code

ddfb942

lint errors

56e0079

micahgodbolt reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx Outdated Show resolved Hide resolved

micahgodbolt reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx Outdated Show resolved Hide resolved

micahgodbolt reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx Outdated Show resolved Hide resolved

micahgodbolt reviewed Jul 11, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx Show resolved Hide resolved

emmayjiang added 2 commits July 11, 2022 17:07

micah's suggestions

e534d2f

fix custom overrides not showing up

d8a4347

micahgodbolt reviewed Jul 12, 2022

View reviewed changes

packages/react-components/theme-designer/src/components/Sidebar/Form.tsx Show resolved Hide resolved

micahgodbolt approved these changes Jul 12, 2022

View reviewed changes

emmayjiang mentioned this pull request Jul 12, 2022

Theme designer: add states to overrides #23817

Closed

emmayjiang merged commit db22700 into microsoft:master Jul 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

theme designer: suggestions from Paul #23836

theme designer: suggestions from Paul #23836

emmayjiang commented Jul 7, 2022 •

edited

Loading

codesandbox-ci bot commented Jul 7, 2022 •

edited

Loading

fabricteam commented Jul 7, 2022 •

edited

Loading

size-auditor bot commented Jul 7, 2022 •

edited

Loading

fabricteam commented Jul 8, 2022 •

edited

Loading

fabricteam commented Jul 8, 2022 •

edited

Loading

fabricteam commented Jul 8, 2022 •

edited

Loading

emmayjiang commented Jul 11, 2022

micahgodbolt left a comment

theme designer: suggestions from Paul #23836

theme designer: suggestions from Paul #23836

Conversation

emmayjiang commented Jul 7, 2022 • edited Loading

codesandbox-ci bot commented Jul 7, 2022 • edited Loading

fabricteam commented Jul 7, 2022 • edited Loading

📊 Bundle size report

size-auditor bot commented Jul 7, 2022 • edited Loading

Asset size changes

fabricteam commented Jul 8, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Jul 8, 2022 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Jul 8, 2022 • edited Loading

Perf Analysis (@fluentui/react)

emmayjiang commented Jul 11, 2022

micahgodbolt left a comment

Choose a reason for hiding this comment

emmayjiang commented Jul 7, 2022 •

edited

Loading

codesandbox-ci bot commented Jul 7, 2022 •

edited

Loading

fabricteam commented Jul 7, 2022 •

edited

Loading

size-auditor bot commented Jul 7, 2022 •

edited

Loading

fabricteam commented Jul 8, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Jul 8, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react-northstar`)

fabricteam commented Jul 8, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)