chore: update color explorer swatches to be easier to interpret (micr…

…osoft#1744) * plumbing new swatch * cleanup * wire radio buttons * fixing overflow * adding checkbox input * fixing foreground contrast calculation * updating per comments
albertsadday · May 20, 2019 · 354a851 · 354a851
1 parent 64d0f93
commit 354a851
Show file tree

Hide file tree

Showing 9 changed files with 608 additions and 506 deletions.
diff --git a/packages/fast-color-explorer/app/app.tsx b/packages/fast-color-explorer/app/app.tsx
@@ -36,16 +36,7 @@ class App extends React.Component<AppProps, {}> {
                     <Row fill={true}>
                         <Canvas>
                             <Container jssStyleSheet={this.containerStyleOverrides}>
-                                <Row fill={true}>
-                                    <AutoSizer
-                                        onResize={
-                                            /* this lambda is intentional - it forces the pure component to re-render */ (): void => {}
-                                        }
-                                    >
-                                        {this.renderColorBlockList}
-                                    </AutoSizer>
-                                </Row>
-                                <Row>
+                                <Row height={20} minHeight={20}>
                                     <Gradient
                                         colors={palette(PaletteType.neutral)(
                                             this.props.designSystem
@@ -54,14 +45,23 @@ class App extends React.Component<AppProps, {}> {
                                         scrollToItem={this.handleGradientScroll}
                                     />
                                 </Row>
-                                <Row>
+                                <Row height={20} minHeight={20}>
                                     <Gradient
                                         colors={palette(PaletteType.accent)(
                                             this.props.designSystem
                                         )}
                                         createAnchors={false}
                                     />
                                 </Row>
+                                <Row fill={true}>
+                                    <AutoSizer
+                                        onResize={
+                                            /* this lambda is intentional - it forces the pure component to re-render */ (): void => {}
+                                        }
+                                    >
+                                        {this.renderColorBlockList}
+                                    </AutoSizer>
+                                </Row>
                             </Container>
                         </Canvas>
                         <Background value={DarkModeBackgrounds.L4}>
@@ -104,7 +104,11 @@ class App extends React.Component<AppProps, {}> {
 
         return (
             <div style={props.style} key={color}>
-                <ColorBlocks {...{ backgroundColor: color, index: props.index } as any} />
+                <Background value={color} style={{ minHeight: "100%" }}>
+                    <ColorBlocks
+                        {...{ backgroundColor: color, index: props.index } as any}
+                    />
+                </Background>
             </div>
         );
     };