[PLAY-317] - Visual Guidelines Improvements (#2055)

* PLAY-317- fixed spacing example styling * Fixed overflow and wrapping issue in spacing, lineheight,positioning
powerhome · Sep 10, 2022 · 9d82fca · 9d82fca
1 parent 2fa261d
commit 9d82fca
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 28 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/LineHeight.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/LineHeight.tsx
@@ -8,6 +8,7 @@ import {
   Body,
   Caption,
   Card,
+  Flex
 } from 'playbook-ui'
 
 const HEIGHTS = ['tightest', 'tighter', 'tight', 'normal', 'loose', 'looser', 'loosest']
@@ -35,7 +36,12 @@ const LineHeight = ({ example, tokensExample }: {example: string, tokensExample?
         example={tokensExample}
         tokens={TOKENS}
     >
-      <div className="zindex-wrapper">
+      <Flex
+        align='center'
+        flexWrap='wrap'
+        justifyContent='center'
+        orientation='row'
+      >
         {Object.keys(TOKENS).map((token) => (
           <Card
               borderNone
@@ -51,7 +57,7 @@ const LineHeight = ({ example, tokensExample }: {example: string, tokensExample?
             />
           </Card>
         ))}
-      </div>
+      </Flex>
     </Example>
   </React.Fragment>
 )

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Positioning.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Positioning.tsx
@@ -6,6 +6,7 @@ import {
   Body,
   Caption,
   Card,
+  Flex
 } from 'playbook-ui'
 
 import Example from '../Templates/Example'
@@ -38,10 +39,16 @@ const Positioning = ({ example, tokensExample }: {example: string, tokensExample
         example={tokensExample}
         tokens={TOKENS}
     >
-      <div className="zindex-wrapper">
+      <Flex
+        align='center'
+        flexWrap='wrap'
+        justifyContent='center'
+        orientation='row'
+      >
+
         {Object.keys(TOKENS).map((token) => (
           <Card
-              className="zIndex one-z-index-example"
+              className="zIndex zIndex-card"
               key={`token-example-${token}`}
               shadow="deeper"
               zIndex={TOKENS[token]}
@@ -50,7 +57,7 @@ const Positioning = ({ example, tokensExample }: {example: string, tokensExample
             <Caption size="md">{`value: ${TOKENS[token]}`}</Caption>
           </Card>
         ))}
-      </div>
+      </Flex>
     </Example>
   </React.Fragment>
 )

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Spacing.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Spacing.tsx
@@ -10,25 +10,24 @@ import {
 } from 'playbook-ui'
 
 import Example from '../Templates/Example'
+import SpacingProps from '../Templates/SpacingProps'
 
 const PROPVALUES = ['none', 'xs', 'sm', 'md', 'lg', 'xl']
-
-const PROPS = {
-  margin: PROPVALUES,
-  marginLeft: PROPVALUES,
-  marginBottom: PROPVALUES,
-  marginRight: PROPVALUES,
-  marginTop: PROPVALUES,
-  marginX: PROPVALUES,
-  marginY: PROPVALUES,
-  padding: PROPVALUES,
-  paddingLeft: PROPVALUES,
-  paddingBottom: PROPVALUES,
-  paddingRight: PROPVALUES,
-  paddingTop: PROPVALUES,
-  paddingX: PROPVALUES,
-  paddingY: PROPVALUES,
-}
+const PROPNAMES = [
+  'margin', 
+  'marginLeft', 
+  'marginBottom', 
+  'marginRight', 
+  'marginTop', 
+  'marginX', 
+  'marginY', 
+  'padding', 
+  'paddingBottom', 
+  'paddingTop', 
+  'paddingLeft', 
+  'paddingRight', 
+  'paddingX', 
+  'paddingY' ]
 
 const TOKENS = {
   'Extra Small': 'space_xs',
@@ -41,16 +40,17 @@ const TOKENS = {
 const Spacing = ({ example, tokensExample }: {example: string, tokensExample?: string}) => (
   <React.Fragment>
     <Example
-        description="Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow."
-        example={example}
-        globalProps={PROPS}
-        title="Spacing"
-    />
+      description="Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow."
+      example={example}
+      title="Spacing"
+    >
+      <SpacingProps propValues={PROPVALUES} propNames={PROPNAMES} />
+    </Example>
     <Example
         example={tokensExample}
         tokens={TOKENS}
     >
-      <Flex justify="evenly">
+      <Flex justify="evenly" wrap>
         { Object.keys(TOKENS).map((token) => (
           <Flex
               key={token}

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Templates/SpacingProps.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Templates/SpacingProps.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable flowtype/no-types-missing-file-annotation */
+// React Pure component - do not use state!
+
+// This template is specifically for props section of the Spacing example.
+// All other examples use PropsValues.tsx
+// This template does not have a Visual Guide section.
+
+import React from "react";
+import {
+  Caption,
+  Card,
+  Flex,
+  FlexItem,
+  Pill,
+  SectionSeparator,
+} from "playbook-ui";
+
+type Props = {
+  propValues: string[];
+  propNames: string[];
+};
+
+const SpacingProps = ({ propNames, propValues }: Props): React.ReactElement => {
+  return (
+    <Flex
+      inline="flex-container"
+      justifyContent="center"
+      orientation="row"
+      vertical="stretch"
+    >
+      <FlexItem flex={1}>
+        <Card.Body>
+          <Caption marginBottom="sm" text="Props" />
+          {propNames.map((prop) => (
+            <Pill
+              key={prop}
+              text={prop}
+              marginRight="xs"
+              textTransform="none"
+            />
+          ))}
+        </Card.Body>
+      </FlexItem>
+      <SectionSeparator
+        marginBottom="md"
+        marginTop="md"
+        orientation="vertical"
+        variant="card"
+      />
+
+      <FlexItem flex={1}>
+        <Card.Body>
+          <Caption marginBottom="sm" text="Values" />
+          {propValues.map((value) => (
+            <Pill
+              key={value}
+              text={value}
+              marginRight="xs"
+              textTransform="none"
+              variant="warning"
+            />
+          ))}
+        </Card.Body>
+      </FlexItem>
+    </Flex>
+  );
+};
+
+export default SpacingProps;
diff --git a/playbook-website/app/javascript/site_styles/_visual_guidelines.scss b/playbook-website/app/javascript/site_styles/_visual_guidelines.scss
@@ -54,6 +54,9 @@
       //width: 20%;
       background-color: white;
     }
+    .zIndex-card {
+      max-width: 100px;
+    }
     .two-zIndex {
       //width: 20%;
       //transform: translateX(-10px);