Docs tweaks

clauderic · Aug 24, 2023 · 7e5d0df · 7e5d0df
1 parent 2da869a
commit 7e5d0df
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/apps/docs/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.module.css b/apps/docs/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.module.css
@@ -36,9 +36,9 @@
 
 .Copy {
   position: absolute;
-  top: -10px;
+  top: -18px;
   right: -10px;
-  padding: 20px;
+  padding: 16px;
   outline: none;
   appearance: none;
   border: none;

diff --git a/apps/docs/stories/react/Sortable/docs/SortableDocs.mdx b/apps/docs/stories/react/Sortable/docs/SortableDocs.mdx
@@ -28,7 +28,20 @@ npm install @dnd-kit/react
 To create a vertical list, we can simply update the of the `flex-direction` property to `column`, without any other configuration changes.
 
 <Preview>
-  <Example vertical />
+  <Example style={{display: 'inline-flex', flexDirection: 'column', gap: 20}} />
+</Preview>
+
+To create a grid list, we can update the of the `display` property to `grid`, and set the `grid-template-columns` property to the desired number of columns.
+
+<Preview>
+  <Example
+    style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 150px)',
+      gridAutoRows: '150px',
+      gap: 20,
+    }}
+  />
 </Preview>
 
 ## Architecture

diff --git a/apps/docs/stories/react/Sortable/docs/examples/QuickStart.jsx b/apps/docs/stories/react/Sortable/docs/examples/QuickStart.jsx
@@ -3,7 +3,9 @@ import {DragDropProvider} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {move} from '@dnd-kit/state-management';
 
-export function Example({vertical}) {
+const styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};
+
+export function Example({style = styles}) {
   const [items, setItems] = useState([0, 1, 2, 3]);
 
   return (
@@ -19,7 +21,7 @@ export function Example({vertical}) {
         }
       }}
     >
-      <div style={{display: 'inline-flex', flexDirection: vertical ? 'column' : 'row', gap: 20}}>
+      <div style={style}>
         {items.map((id, index) => (
           <Sortable key={id} id={id} index={index} />
         ))}