feat(docs): update overview and do and don't sections in button group…

… page (#726) * feat(docs): update overview and do and donts sections * feat(docs): update code base on code review * feat(docs): update code base on code review
bigcommerce · Feb 22, 2022 · 1aae508 · 1aae508
1 parent d4909c4
commit 1aae508
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/packages/docs/pages/button-group.tsx b/packages/docs/pages/button-group.tsx
@@ -1,8 +1,8 @@
 import { Box, ButtonGroup, H1, Panel, Text } from '@bigcommerce/big-design';
 import { CheckIcon, InfoIcon } from '@bigcommerce/big-design-icons';
-import React from 'react';
+import React, { Fragment } from 'react';
 
-import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List, NextLink } from '../components';
 import { ButtonGroupPropTable } from '../PropTables';
 
 const ButtonGroupPage = () => {
@@ -17,7 +17,7 @@ const ButtonGroupPage = () => {
         <Text bold>When to use:</Text>
         <List>
           <List.Item>
-            In <Code primary>Tables</Code> as a list of bulk actions available for the selected items.
+            In <NextLink href="/table">Tables</NextLink> as a list of bulk actions available for the selected items.
           </List.Item>
         </List>
       </Panel>
@@ -30,11 +30,11 @@ const ButtonGroupPage = () => {
               id: 'basic',
               title: 'Basic',
               render: () => (
-                <>
+                <Fragment key="basic">
                   <Text>
                     The <Code primary>ButtonGroup</Code> component is used for grouping actions like{' '}
-                    <Code primary>Button</Code>. Allows to save space and reduce visual overload when there are multiple
-                    actions available for the same entity.
+                    <NextLink href="/button">Button</NextLink>. Allows to save space and reduce visual overload when
+                    there are multiple actions available for the same entity.
                   </Text>
 
                   <CodePreview>
@@ -52,14 +52,14 @@ const ButtonGroupPage = () => {
                     </Box>
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
             {
               id: 'action-type-destructive',
               title: 'Action type destructive',
               render: () => (
-                <>
+                <Fragment key="action-type-destructive">
                   <Text>
                     By default action with <Code>actionsType: 'destructive'</Code> hides under the ellipsis.
                   </Text>
@@ -75,14 +75,14 @@ const ButtonGroupPage = () => {
                     />
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
             {
               id: 'icon-property',
               title: 'Icon property',
               render: () => (
-                <>
+                <Fragment key="icon-property">
                   <Text>Icon is available only for actions which is hidden under the ellipsis.</Text>
 
                   <CodePreview>
@@ -100,7 +100,7 @@ const ButtonGroupPage = () => {
                     </Box>
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
           ]}
@@ -114,15 +114,27 @@ const ButtonGroupPage = () => {
       <Panel header="Do's and Don'ts" headerId="guidelines">
         <GuidelinesTable
           recommended={[
-            'Hide secondary actions or actions that doesn’t fit the container under ellipsis.',
-            'Hide destructive actions under ellipsis.',
-            'Keep all the controls in the same outlined style.',
-            'Show only actions that are available for the entity.',
+            <>
+              Hide <Code>secondary</Code> actions or <Code primary>actions</Code> that don’t fit the container under
+              ellipsis.
+            </>,
+            <>
+              Hide <Code>destructive</Code> actions under ellipsis.
+            </>,
+            <>Keep all the controls in the same outlined style.</>,
+            <>
+              Show only <Code primary>actions</Code> that are available for the entity.
+            </>,
           ]}
           discouraged={[
-            'Move some controls to the second row.',
-            'Stylize some of the actions in the group differently (disabled, primary, destructive, etc.)',
-            'Use icons or text + icon for actions (except for ellipsis).',
+            <>Move some controls to the second row.</>,
+            <>
+              Stylize some of the <Code primary>actions</Code> in the group differently (disabled, primary, destructive,
+              etc.).
+            </>,
+            <>
+              Use icons or text + icon for <Code primary>actions</Code>(except for ellipsis).
+            </>,
           ]}
         />
       </Panel>