Adjust flex wrap in UI examples. Fixes #731 (#831)

* Adjust flex wrap in UI examples.Fixes #731 * Add orange-turkey-work changeset Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>
primer · Aug 29, 2022 · 57f364a · 57f364a
1 parent 4a4219c
commit 57f364a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/orange-turkeys-work.md b/.changeset/orange-turkeys-work.md
@@ -0,0 +1,5 @@
+---
+'@primer/octicons': patch
+---
+
+Adjust flex wrap in UI examples.Fixes #731
diff --git a/docs/src/components/ui-examples-16.js b/docs/src/components/ui-examples-16.js
@@ -40,26 +40,26 @@ export default function UIExamples16({icon: Icon}) {
             </Timeline.Body>
           </Timeline.Item>
         </Timeline>
-        <Flex>
-          <Button mr={2}>
+        <Flex flexWrap={'wrap'} sx={{gap: 2}}>
+          <Button>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </Button>
-          <ButtonPrimary mr={2}>
+          <ButtonPrimary>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </ButtonPrimary>
-          <ButtonDanger mr={2}>
+          <ButtonDanger>
             <Icon />
             <Text ml={2} contentEditable>
               Button
             </Text>
           </ButtonDanger>
-          <ButtonOutline mr={2}>
+          <ButtonOutline>
             <Icon />
             <Text ml={2} contentEditable>
               Button