Add doc for Border Radius Global Prop

powerhome · Jul 18, 2024 · 7d04ae3 · 7d04ae3
1 parent b509b0b
commit 7d04ae3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/BorderRadius.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/BorderRadius.tsx
@@ -3,13 +3,16 @@ import React from 'react'
 import {
   Background,
   Body,
+  Button,
   Caption,
   Flex,
+  Icon,
   Title,
 } from 'playbook-ui'
 
 import Example from '../Templates/Example'
 
+const BORDER_RADIUS_VALUES = [ "none", "extra small", "small", "medium", "large", "extra large", "rounded" ]
 const TOKENS = {
   'Rounded': '$border_radius_rounded',
   'Extra Large': '$border_radius_xl',
@@ -30,7 +33,7 @@ const DATASET = [
   { name: 'None', class: 'border_radius_none' },
 ]
 
-const BorderRadius = ({ tokensExample }: { tokensExample: string }) => (
+const BorderRadius = ({ example, tokensExample }: { example: string, tokensExample: string }) => (
   <React.Fragment>
     <Background
       className="token-wrapper"
@@ -43,11 +46,34 @@ const BorderRadius = ({ tokensExample }: { tokensExample: string }) => (
         text='Border Radius'
       />
       <Body
-        marginBottom='lg'
+        marginBottom='xxs'
         marginTop='xs'
         text='We have very specific settings for border radius to keep the interface looking consistent and clean. If you ever need to access these to build new things here are examples for how to do that.'
       />
+      <Button
+        link="https://playbook.powerapp.cloud/kits/card/react#border-radius"
+        newWindow
+        padding="none"
+        tabIndex={0}
+        variant="link"
+      >
+        <Body
+          variant="link"
+        >
+          {'See this prop in action in our Card Kit'}
+          <Icon
+            fixedWidth
+            icon="angle-right"
+          />
+        </Body>
+      </Button>
     </Background>
+    <Example
+        example={example}
+        globalProps={{
+          borderRadius: BORDER_RADIUS_VALUES,
+        }}
+    />
     <Example
       example={tokensExample}
       tokens={TOKENS}

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/index.tsx b/playbook-website/app/javascript/components/VisualGuidelines/index.tsx
@@ -60,7 +60,9 @@ const VisualGuidelines = ({
       case "typography":
         return <Typography example={examples.typography_tokens}/>;
       case "border_radius":
-        return <BorderRadius tokensExample={examples.border_radius_tokens}/>;
+        return <BorderRadius example={examples.border_radius_jsx}
+                  tokensExample={examples.border_radius_tokens}
+                />;
       case "display":
         return <Display example={examples.display_in_use_jsx}/>;
       case "cursor":

diff --git a/playbook-website/app/views/pages/code_snippets/border_radius_jsx.txt b/playbook-website/app/views/pages/code_snippets/border_radius_jsx.txt
@@ -0,0 +1,12 @@
+<Card borderRadius="md"> {'Medium (6px)'} </Card>
+
+<Card
+  borderRadius={{
+    none: "none",
+    xs: "extra small",
+    sm: "small",
+    lg: "large",
+    xl: "extra large",
+    rounded: "rounded"
+  }}
+/>