Merge branch 'master' into layout-components-rc

Author: michaeltaranto

packages/braid-design-system/src/lib/components/Columns/Columns.docs.tsx

@@ -443,9 +443,9 @@ const docs: ComponentDocs = {
           </Text>
           <Notice>
             <Text>
-              Reversing is only applied in combination with the{' '}
-              <Strong>collapseBelow</Strong> prop. This ensures the columns are
-              reversed on the same row, and follow the document order when
+              Reverse is only applied in combination with the{' '}
+              <Strong>collapseBelow</Strong> prop to ensure the columns are
+              reversed on the same row, but follow the document order when
               collapsed.
             </Text>
           </Notice>
@@ -517,11 +517,11 @@ const docs: ComponentDocs = {
         </>
       ),
       code: source(
-        <Columns space="small" component="ul">
-          <Column component="li">
+        <Columns space="small" component="span">
+          <Column>
             <Placeholder height={40} />
           </Column>
-          <Column component="li">
+          <Column>
             <Placeholder height={40} />
           </Column>
         </Columns>,

packages/braid-design-system/src/lib/components/Columns/Columns.screenshots.tsx

@@ -340,6 +340,19 @@ export const screenshots: ComponentScreenshot = {
         </Columns>
       ),
     },
+    {
+      label: 'Reverse',
+      Example: () => (
+        <Columns space="small" collapseBelow="tablet" reverse>
+          <Column>
+            <Placeholder height={60} label="First" />
+          </Column>
+          <Column>
+            <Placeholder height={60} label="Second" />
+          </Column>
+        </Columns>
+      ),
+    },
     {
       label:
         'Test: Collapsed "content" columns should be full width when setting "alignY"',

packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx

@@ -220,21 +220,19 @@ const docs: ComponentDocs = {
             doubles as the screen reader order. The visual order can be flipped
             using the <Strong>reverse</Strong> prop.
           </Text>
+          <Text>
+            This is useful when navigating forward within a flow, where the
+            primary action is on the right when inline, and on top when
+            collapsed. For this reason, the default horizontal alignment when
+            reversed is to the <Strong>right</Strong>.
+          </Text>
           <Notice>
-            <Stack space="medium">
-              <Text>
-                Reversing is only applied in combination with the{' '}
-                <Strong>collapseBelow</Strong> prop. This ensures the content is
-                reversed on the same row, and follow the document order when
-                collapsed.
-              </Text>
-              <Text>
-                This is useful when navigating forward within a flow, where the
-                primary action is on the right when inline, and on top when
-                collapsed. For this reason, the default the horizontal alignment
-                when reversed is to the <Strong>right</Strong>.
-              </Text>
-            </Stack>
+            <Text>
+              Reverse is only applied in combination with the{' '}
+              <Strong>collapseBelow</Strong> prop to ensure the content is
+              reversed on the same row, but follows the document order when
+              collapsed.
+            </Text>
           </Notice>
         </>
       ),
@@ -245,9 +243,9 @@ const docs: ComponentDocs = {
               <Text tone="secondary" size="small">
                 On “tablet” and above
               </Text>
-              <Inline space="small" collapseBelow="tablet" align="right">
-                <Placeholder width={75} height={48} label="Second" />
-                <Placeholder width={75} height={48} label="First" />
+              <Inline space="small" align="right">
+                <Placeholder height={48} label="Second" />
+                <Placeholder height={48} label="First" />
               </Inline>
             </Stack>
             <Stack space="small">
@@ -264,8 +262,8 @@ const docs: ComponentDocs = {
 
         const { code: codeDemo } = source(
           <Inline space="small" collapseBelow="tablet" reverse>
-            <Placeholder width={75} height={48} label="First" />
-            <Placeholder width={75} height={48} label="Second" />
+            <Placeholder height={48} label="First" />
+            <Placeholder height={48} label="Second" />
           </Inline>,
         );
 
@@ -285,8 +283,8 @@ const docs: ComponentDocs = {
       ),
       code: source(
         <Inline component="span" space="small">
-          <Placeholder height={40} />
-          <Placeholder height={40} />
+          <Placeholder width={40} height={40} />
+          <Placeholder width={40} height={40} />
         </Inline>,
       ).code,
     },