fix(development-site): update styling (#416)

nicholasrice · web-flow · commit 97ac11a7bbf2 · 2018-05-11T11:02:19.000-08:00
* polish

* fixing border

* fixing lint error

* fixing snapshots
diff --git a/packages/fast-components-react-msft/src/image/__snapshots__/image.spec.ts.snap b/packages/fast-components-react-msft/src/image/__snapshots__/image.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`image image: 0 1`] = `
   alt="Placeholder with grey background and dimension watermark without any imagery"
   className="image-0-1-1 image_round-0-1-2"
   sizes={null}
-  src="https://placehold.it/2048x600/2F2F2F/171717"
+  src="https://placehold.it/600x600/2F2F2F/171717"
   srcSet={null}
 />
 `;
@@ -15,8 +15,8 @@ exports[`image image: 1 1`] = `
   alt="Placeholder with grey background and dimension watermark without any imagery"
   className="image-0-1-4 image_round-0-1-5"
   sizes="100vw"
-  src="https://placehold.it/539x300/2F2F2F/171717"
-  srcSet="https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 0w"
+  src="https://placehold.it/300x300/2F2F2F/171717"
+  srcSet="https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 0w"
 />
 `;
 
@@ -25,7 +25,7 @@ exports[`image image: 2 1`] = `
   alt="Placeholder with grey background and dimension watermark without any imagery"
   className="image-0-1-7 image_round-0-1-8"
   sizes={null}
-  src="https://placehold.it/539x300/2F2F2F/171717"
+  src="https://placehold.it/300x300/2F2F2F/171717"
   srcSet={null}
 />
 `;
@@ -35,7 +35,7 @@ exports[`image image: 3 1`] = `
   alt="Placeholder with grey background and dimension watermark without any imagery"
   className="image-0-1-10"
   sizes={null}
-  src="https://placehold.it/2048x600/2F2F2F/171717"
+  src="https://placehold.it/600x600/2F2F2F/171717"
   srcSet={null}
 />
 `;
diff --git a/packages/fast-components-react-msft/src/image/examples.data.ts b/packages/fast-components-react-msft/src/image/examples.data.ts
@@ -10,34 +10,34 @@ export default {
     data: [
         {
             round: true,
-            src: "https://placehold.it/2048x600/2F2F2F/171717",
-            vp5: "https://placehold.it/1778x600/2F2F2F/171717",
-            vp4: "https://placehold.it/1399x600/2F2F2F/171717",
-            vp3: "https://placehold.it/1083x500/2F2F2F/171717",
-            vp2: "https://placehold.it/767x400/2F2F2F/171717",
-            vp1: "https://placehold.it/539x300/2F2F2F/171717",
+            src: "https://placehold.it/600x600/2F2F2F/171717",
+            vp5: "https://placehold.it/600x600/2F2F2F/171717",
+            vp4: "https://placehold.it/600x600/2F2F2F/171717",
+            vp3: "https://placehold.it/500x500/2F2F2F/171717",
+            vp2: "https://placehold.it/400x400/2F2F2F/171717",
+            vp1: "https://placehold.it/300x300/2F2F2F/171717",
             alt: "Placeholder with grey background and dimension watermark without any imagery"
         },
         {
             round: true,
-            src: "https://placehold.it/539x300/2F2F2F/171717",
+            src: "https://placehold.it/300x300/2F2F2F/171717",
             /* tslint:disable-next-line */
-            srcSet: "https://placehold.it/2048x600/2F2F2F/171717 2048w, https://placehold.it/1778x600/2F2F2F/171717 1778w, https://placehold.it/1399x600/2F2F2F/171717 1399w, https://placehold.it/1083x500/2F2F2F/171717 1083w, https://placehold.it/767x400/2F2F2F/171717 767w, https://placehold.it/539x300/2F2F2F/171717 0w",
+            srcSet: "https://placehold.it/600x600/2F2F2F/171717 2048w, https://placehold.it/600x600/2F2F2F/171717 1778w, https://placehold.it/1600x600/2F2F2F/171717 1399w, https://placehold.it/500x500/2F2F2F/171717 1083w, https://placehold.it/400x400/2F2F2F/171717 767w, https://placehold.it/300x300/2F2F2F/171717 0w",
             sizes: "100vw",
             alt: "Placeholder with grey background and dimension watermark without any imagery"
         },
         {
             round: true,
-            src: "https://placehold.it/539x300/2F2F2F/171717",
+            src: "https://placehold.it/300x300/2F2F2F/171717",
             alt: "Placeholder with grey background and dimension watermark without any imagery"
         },
         {
-            src: "https://placehold.it/2048x600/2F2F2F/171717",
-            vp5: "https://placehold.it/1778x600/2F2F2F/171717",
-            vp4: "https://placehold.it/1399x600/2F2F2F/171717",
-            vp3: "https://placehold.it/1083x500/2F2F2F/171717",
-            vp2: "https://placehold.it/767x400/2F2F2F/171717",
-            vp1: "https://placehold.it/539x300/2F2F2F/171717",
+            src: "https://placehold.it/600x600/2F2F2F/171717",
+            vp5: "https://placehold.it/600x600/2F2F2F/171717",
+            vp4: "https://placehold.it/600x600/2F2F2F/171717",
+            vp3: "https://placehold.it/500x500/2F2F2F/171717",
+            vp2: "https://placehold.it/400x400/2F2F2F/171717",
+            vp1: "https://placehold.it/300x300/2F2F2F/171717",
             alt: "Placeholder with grey background and dimension watermark without any imagery"
         },
         {
diff --git a/packages/fast-development-site-react/src/components/shell/action-bar.tsx b/packages/fast-development-site-react/src/components/shell/action-bar.tsx
@@ -15,7 +15,7 @@ const style: ComponentStyles<IShellActionBarManagedClasses, IDevSiteDesignSystem
         background: (config: IDevSiteDesignSystem): string => {
             return config.backgroundColor;
         },
-        height: toPx(39),
+        height: toPx(40),
         overflow: "hidden",
         borderBottom: `${toPx(1)} solid #CCCCCC`
     }
diff --git a/packages/fast-development-site-react/src/components/shell/index.tsx b/packages/fast-development-site-react/src/components/shell/index.tsx
@@ -30,7 +30,9 @@ const style: ComponentStyles<IShellManagedClasses, IDevSiteDesignSystem> = {
     shell: {
         fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif",
         fontSize: toPx(14),
-        height: "100vh"
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column"
     }
 };
 
diff --git a/packages/fast-development-site-react/src/components/shell/pane.tsx b/packages/fast-development-site-react/src/components/shell/pane.tsx
@@ -17,7 +17,7 @@ export interface IShellPaneManagedClasses {
 
 const style: ComponentStyles<IShellPaneManagedClasses, IDevSiteDesignSystem> = {
     shellPane: {
-        display: "inline-block",
+        flexShrink: "0",
         overflowX: "hidden",
         backgroundColor: (config: IDevSiteDesignSystem): string => {
             return config.lightGray;
diff --git a/packages/fast-development-site-react/src/components/shell/row.tsx b/packages/fast-development-site-react/src/components/shell/row.tsx
@@ -14,7 +14,7 @@ const style: ComponentStyles<IShellRowManagedClasses, IDevSiteDesignSystem> = {
     shellRow: {
         display: "flex",
         alignItems: "stretch",
-        height: (config: IDevSiteDesignSystem): string => `calc(100% - ${toPx(config.navigationBarHeight * 2)}`
+        flexGrow: "1"
     }
 };
 
diff --git a/packages/fast-development-site-react/src/components/site/action-bar.tsx b/packages/fast-development-site-react/src/components/site/action-bar.tsx
@@ -87,20 +87,14 @@ const styles: ComponentStyles<IActionBarClassNameContract, IDevSiteDesignSystem>
         flexGrow: "1"
     },
     actionBar_menu_button: {
-        ...menuButtonBase()
+        ...menuButtonBase(),
+        "&:active": {
+            background: "#EBEBEB"
+        }
     },
     actionBar_menu_button__active: {
         ...menuButtonBase(),
-        background: "#EBEBEB",
-        "&::after": {
-            content: "''",
-            position: "absolute",
-            display: "block",
-            width: "100%",
-            bottom: "0",
-            height: toPx(2),
-            background: (config: IDevSiteDesignSystem): string => config.brandColor
-        }
+        background: "#EBEBEB"
     }
 };
 
diff --git a/packages/fast-development-site-react/src/components/site/component-view.tsx b/packages/fast-development-site-react/src/components/site/component-view.tsx
@@ -20,7 +20,9 @@ const style: ComponentStyles<IComponentViewManagedClasses, IDevSiteDesignSystem>
     componentView: {
         overflow: "auto",
         flexGrow: "1",
-        width: "100%"
+        width: "100%",
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr",
     }
 };
 
diff --git a/packages/fast-development-site-react/src/components/site/component-wrapper.tsx b/packages/fast-development-site-react/src/components/site/component-wrapper.tsx
@@ -21,22 +21,27 @@ export interface IComponentWrapperProps<T> {
     onClick: (activeIndex: number) => void;
 }
 
-const baseStyle: ICSSRules<IDevSiteDesignSystem> = {
-    display: "flex",
-    flexWrap: "wrap",
-    margin: toPx(24),
-    borderTop: `${toPx(1)} solid rgb(226, 226, 226)`,
-    borderLeft: `${toPx(1)} solid rgb(226, 226, 226)`
-};
-
+const componentWrapperBorder: string = `${toPx(1)} solid rgb(226, 226, 226)`;
 const styles: ComponentStyles<IComponentWrapperManagedClasses, IDevSiteDesignSystem> = {
-    componentWrapper: baseStyle,
+    componentWrapper: {
+        display: "block",
+        padding: toPx(24),
+        borderBottom: componentWrapperBorder,
+        "&:last-child:not(:nth-child(3n + 3)), &:nth-child(3n + 1)": {
+            borderRight: componentWrapperBorder,
+        },
+        "&:nth-child(3n + 3)": {
+            borderLeft: componentWrapperBorder
+        },
+    },
     componentWrapper__active: {
-        ...baseStyle,
         position: "relative",
         "&::before": {
             content: "''",
             position: "absolute",
+            top: toPx(0),
+            bottom: toPx(0),
+            left: toPx(0),
             background: (config: IDevSiteDesignSystem): string => {
                 return config.brandColor;
             },
@@ -74,7 +79,7 @@ class ComponentWrapper extends React.Component<IComponentWrapperProps<IDevSiteDe
 
     private getClassNames(): string {
         return this.props.active
-            ? this.props.managedClasses.componentWrapper__active
+            ? `${this.props.managedClasses.componentWrapper} ${this.props.managedClasses.componentWrapper__active}`
             : this.props.managedClasses.componentWrapper;
     }
 
diff --git a/packages/fast-development-site-react/src/components/site/index.tsx b/packages/fast-development-site-react/src/components/site/index.tsx
@@ -62,6 +62,7 @@ export enum SiteSlot {
 }
 
 export interface ISiteManagedClasses {
+    "@global": string;
     site_canvasContent: string;
     site_headerTitle: string;
     site_paneToc: string;
@@ -73,6 +74,12 @@ export interface ISiteManagedClasses {
 }
 
 const styles: ComponentStyles<ISiteManagedClasses, IDevSiteDesignSystem> = {
+    "@global": {
+        "body, html": {
+            padding: toPx(0),
+            margin: toPx(0)
+        }
+    },
     site_canvasContent: {
         height: `calc(100% - ${toPx(40)})`,
         display: "flex",

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const style: ComponentStyles<IShellActionBarManagedClasses, IDevSiteDesignSystem`
`15`	`15`	`background: (config: IDevSiteDesignSystem): string => {`
`16`	`16`	`return config.backgroundColor;`
`17`	`17`	`},`
`18`		`- height: toPx(39),`
	`18`	`+ height: toPx(40),`
`19`	`19`	`overflow: "hidden",`
`20`	`20`	borderBottom: `${toPx(1)} solid #CCCCCC`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const style: ComponentStyles<IShellRowManagedClasses, IDevSiteDesignSystem> = {`
`14`	`14`	`shellRow: {`
`15`	`15`	`display: "flex",`
`16`	`16`	`alignItems: "stretch",`
`17`		- height: (config: IDevSiteDesignSystem): string => `calc(100% - ${toPx(config.navigationBarHeight * 2)}`
	`17`	`+ flexGrow: "1"`
`18`	`18`	`}`
`19`	`19`	`};`
`20`	`20`