Skip to content

Commit 32a62d2

Browse files
eljefe223eljefe223
authored
fix: density slider and color pickers in component explorer (#1804)
* onChange * fix: design system controls no longer work * added accent base color to app * removed unused imports * updated to no longer use accentBaseColor * removed unnecessary state from app * added design system hook in dev site * fixed console errors for boolean in quotes * got color pickers working again * fixed spelling error * chnaged to object assigns
1 parent 2e94862 commit 32a62d2

File tree

4 files changed

+63
-68
lines changed

4 files changed

+63
-68
lines changed

‎packages/fast-components-react-msft/app/app.tsx

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -77,27 +77,15 @@ const formPlugins: Array<Plugin<PluginProps>> = [
7777
}),
7878
];
7979

80-
const hypertextStyles: ComponentStyles<HypertextClassNameContract, undefined> = {
81-
hypertext: {
82-
margin: "0 8px",
83-
display: "inline-block",
84-
lineHeight: "1",
85-
whiteSpace: "nowrap",
86-
},
87-
};
88-
8980
enum ThemeName {
9081
dark = "dark",
9182
light = "light",
9283
custom = "custom",
9384
}
9485

9586
export interface AppState extends ColorConfig {
96-
accentPalette: string[];
97-
neutralPalette: string[];
9887
theme: ThemeName;
99-
direction: Direction;
100-
density: DensityOffset;
88+
designSystem: DesignSystem;
10189
}
10290

10391
export default class App extends React.Component<{}, AppState> {
@@ -120,12 +108,15 @@ export default class App extends React.Component<{}, AppState> {
120108

121109
this.state = {
122110
accentColor: accent,
123-
accentPalette: this.createColorPalette(parseColor(accent)),
124-
neutralPalette: this.createColorPalette(new ColorRGBA64(0.5, 0.5, 0.5, 1)),
125-
direction: Direction.ltr,
111+
designSystem: Object.assign({}, DesignSystemDefaults, {
112+
accentPalette: this.createColorPalette(parseColor(accent)),
113+
neutralPalette: this.createColorPalette(
114+
new ColorRGBA64(0.5, 0.5, 0.5, 1)
115+
),
116+
direction: Direction.ltr,
117+
}),
126118
backgroundColor: DesignSystemDefaults.backgroundColor,
127119
theme: ThemeName.light,
128-
density: DesignSystemDefaults.density,
129120
};
130121
}
131122

@@ -141,8 +132,9 @@ export default class App extends React.Component<{}, AppState> {
141132
showTransparencyToggle={true}
142133
styleEditing={true}
143134
designSystemEditing={{
144-
data: DesignSystemDefaults,
135+
data: this.state.designSystem,
145136
schema: designSystemSchema,
137+
designSystemOnChange: this.handleDesignSystemUpdate,
146138
}}
147139
>
148140
<SiteTitle slot={"title"}>
@@ -158,11 +150,7 @@ export default class App extends React.Component<{}, AppState> {
158150
</SiteCategoryIcon>
159151
</SiteCategory>
160152
<SiteCategory slot={"category"} name={"Components"}>
161-
{this.sortExamples(
162-
componentFactory(examples, {
163-
...this.generateDesignSystem(),
164-
})
165-
)}
153+
{this.sortExamples(componentFactory(examples))}
166154
</SiteCategory>
167155
<div slot={ShellSlot.infoBar}>
168156
<div
@@ -176,7 +164,7 @@ export default class App extends React.Component<{}, AppState> {
176164
<input
177165
type="range"
178166
name="density"
179-
defaultValue="0"
167+
value={this.state.designSystem.density}
180168
min="-3"
181169
max="3"
182170
onChange={this.handleDensityUpdate}
@@ -200,45 +188,60 @@ export default class App extends React.Component<{}, AppState> {
200188
);
201189
}
202190

203-
private generateDesignSystem(): DesignSystem {
204-
const designSystem: Partial<DesignSystem> = {
205-
accentPalette: this.state.accentPalette,
206-
neutralPalette: this.state.neutralPalette,
207-
direction: this.state.direction,
208-
backgroundColor: this.state.backgroundColor,
209-
density: this.state.density,
210-
};
211-
212-
return Object.assign({}, DesignSystemDefaults, designSystem);
213-
}
214-
215191
private handleUpdateDirection = (direction: Direction): void => {
216192
const newDir: Direction =
217-
this.state.direction === Direction.ltr ? Direction.rtl : Direction.ltr;
193+
direction === Direction.ltr ? Direction.rtl : Direction.ltr;
218194

219-
if (this.state.direction === newDir) {
195+
if (this.state.designSystem.direction === newDir) {
220196
return;
221197
}
222198

223199
this.setState({
224-
direction: newDir,
200+
designSystem: Object.assign({}, this.state.designSystem, {
201+
direction: newDir,
202+
}),
225203
});
226204
};
227205

206+
private getNeutralPallete(colorSource: string): string[] {
207+
const color: ColorRGBA64 = parseColor(colorSource);
208+
const hslColor: ColorHSL = rgbToHSL(color);
209+
const augmentedHSLColor: ColorHSL = ColorHSL.fromObject({
210+
h: hslColor.h,
211+
s: hslColor.s,
212+
l: 0.5,
213+
});
214+
return this.createColorPalette(hslToRGB(augmentedHSLColor));
215+
}
216+
228217
private handleUpdateTheme = (theme: ThemeName): void => {
229218
if (theme !== ThemeName.custom) {
230219
this.setState({
231220
theme,
232221
backgroundColor: theme === ThemeName.dark ? dark : light,
222+
designSystem: Object.assign({}, this.state.designSystem, {
223+
backgroundColor: theme === ThemeName.dark ? dark : light,
224+
neutralPalette: this.getNeutralPallete(
225+
theme === ThemeName.dark ? dark : light
226+
),
227+
}),
233228
});
234229
} else {
235-
this.setCustomThemeBackground(this.state.backgroundColor);
230+
this.setCustomThemeBackground(this.state.designSystem.backgroundColor);
236231
this.setState({
237232
theme,
238233
});
239234
}
240235
};
241236

237+
private handleDesignSystemUpdate = (data: any): void => {
238+
if (data !== this.state.designSystem) {
239+
this.setState({
240+
designSystem: data,
241+
});
242+
}
243+
};
244+
242245
/**
243246
* Handles any changes made by the user to the color picker inputs
244247
*/
@@ -251,20 +254,16 @@ export default class App extends React.Component<{}, AppState> {
251254
updates.theme = ThemeName.custom;
252255
}
253256

254-
const color: ColorRGBA64 = parseColor(config.backgroundColor);
255-
const hslColor: ColorHSL = rgbToHSL(color);
256-
const augmentedHSLColor: ColorHSL = ColorHSL.fromObject({
257-
h: hslColor.h,
258-
s: hslColor.s,
259-
l: 0.5,
257+
updates.designSystem = Object.assign({}, this.state.designSystem, {
258+
neutralPalette: this.getNeutralPallete(config.backgroundColor),
260259
});
261-
updates.neutralPalette = this.createColorPalette(hslToRGB(augmentedHSLColor));
260+
updates.designSystem.backgroundColor = config.backgroundColor;
262261
}
263262

264263
if (config.accentColor !== this.state.accentColor) {
265-
updates.accentPalette = this.createColorPalette(
266-
parseColor(config.accentColor)
267-
);
264+
updates.designSystem = Object.assign({}, this.state.designSystem, {
265+
accentPalette: this.createColorPalette(parseColor(config.accentColor)),
266+
});
268267
}
269268

270269
this.setState(updates as AppState);
@@ -281,7 +280,9 @@ export default class App extends React.Component<{}, AppState> {
281280

282281
private handleDensityUpdate = (e: React.ChangeEvent<HTMLInputElement>): void => {
283282
this.setState({
284-
density: parseInt(e.target.value, 10) as DensityOffset,
283+
designSystem: Object.assign({}, this.state.designSystem, {
284+
density: parseInt(e.target.value, 10) as DensityOffset,
285+
}),
285286
});
286287
};
287288
/**

‎packages/fast-components-styles-msft/src/design-system/design-system.schema.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"backgroundColor": {
99
"title": "Background color",
1010
"type": "string",
11-
"default": "#FFFFFF"
11+
"default": "#FFFFFF",
12+
"disabled": true
1213
},
1314
"contrast": {
1415
"title": "Contrast",
@@ -18,6 +19,7 @@
1819
"density": {
1920
"title": "Density",
2021
"type": "number",
22+
"disabled": true,
2123
"enum": [
2224
-3,
2325
-2,
@@ -51,7 +53,8 @@
5153
"ltr",
5254
"rtl"
5355
],
54-
"default": "ltr"
56+
"default": "ltr",
57+
"disabled": true
5558
},
5659
"fontWeight": {
5760
"title": "Font weight",

‎packages/fast-development-site-react/src/components/site/configuration-panel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import manageJss, {
1414
export interface DesignSystemEditingConfig {
1515
data: any;
1616
schema: any;
17+
designSystemOnChange?: (data: any) => void;
1718
}
1819

1920
export interface ConfigurationPanelProps {
@@ -22,7 +23,6 @@ export interface ConfigurationPanelProps {
2223
data: any;
2324
dataLocation: string;
2425
onChange: any;
25-
designSystemOnChange: (data: any) => void;
2626
onLocationUpdate: (dataLocation: string) => void;
2727
styleEditing?: boolean;
2828
designSystemEditing?: DesignSystemEditingConfig;
@@ -151,7 +151,7 @@ class ConfigurationPanel extends React.Component<
151151
jssStyleSheet={{ form: { height: "unset" } }}
152152
schema={this.props.designSystemEditing.schema}
153153
data={this.props.designSystemEditing.data}
154-
onChange={this.props.designSystemOnChange}
154+
onChange={this.props.designSystemEditing.designSystemOnChange}
155155
/>
156156
</React.Fragment>
157157
);

‎packages/fast-development-site-react/src/components/site/index.tsx

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,7 @@ class Site extends React.Component<
455455
this.setState({
456456
componentData: this.getComponentData(),
457457
detailViewComponentData: this.getDetailViewComponentData(),
458+
designSystem: get(this.props, "designSystemEditing.data"),
458459
});
459460
}
460461
}
@@ -804,12 +805,6 @@ class Site extends React.Component<
804805
}
805806
};
806807

807-
private handleDesignSystemDataChange = (data: any): void => {
808-
this.setState({
809-
designSystem: data,
810-
});
811-
};
812-
813808
private handleToggleDevToolsView = (): void => {
814809
this.setState({
815810
devToolsView: !this.state.devToolsView,
@@ -964,15 +959,14 @@ class Site extends React.Component<
964959
onLocationUpdate: this.handleLocationUpdate,
965960
styleEditing: this.props.styleEditing,
966961
designSystemEditing: void 0,
967-
designSystemOnChange: void 0,
968962
};
969963

970964
if (!!this.props.designSystemEditing) {
971965
props.designSystemEditing = {
972966
schema: this.props.designSystemEditing.schema,
973-
data: this.state.designSystem,
967+
data: this.props.designSystemEditing.data,
968+
designSystemOnChange: this.props.designSystemEditing.designSystemOnChange,
974969
};
975-
props.designSystemOnChange = this.handleDesignSystemDataChange;
976970
}
977971

978972
return props;
@@ -1005,10 +999,7 @@ class Site extends React.Component<
1005999
transparentBackground={
10061000
this.state.componentBackgroundTransparent
10071001
}
1008-
designSystem={
1009-
this.state.designSystem ||
1010-
componentItem.props.designSystem
1011-
}
1002+
designSystem={this.state.designSystem}
10121003
active={index === this.state.activeComponentIndex}
10131004
view={this.state.componentView}
10141005
>

0 commit comments

Comments
 (0)