From 57f364a7e234080781355cd57fcf3bdd75b05af4 Mon Sep 17 00:00:00 2001
From: Josep Martins <josepmartins@github.com>
Date: Mon, 29 Aug 2022 21:47:04 +0200
Subject: [PATCH] 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>
---
 .changeset/orange-turkeys-work.md     |  5 +++++
 docs/src/components/ui-examples-16.js | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/orange-turkeys-work.md

diff --git a/.changeset/orange-turkeys-work.md b/.changeset/orange-turkeys-work.md
new file mode 100644
index 000000000..1c2a2016b
--- /dev/null
+++ 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
index 6d7093a41..6f58272c4 100644
--- 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