Part 5: Update building ui docs (#1215)

mui · Oct 27, 2022 · d726a82 · d726a82
1 parent c93d609
commit d726a82
Show file tree

Hide file tree

Showing 27 changed files with 12 additions and 12 deletions.
diff --git a/docs/data/toolpad/building-ui/canvas-and-inspector.md b/docs/data/toolpad/building-ui/canvas-and-inspector.md
@@ -12,13 +12,13 @@ The canvas will highlight the location where a component can be dropped. Release
 
 Click any component in the canvas to select it. An overlay indicates the selected components.
 
-<img src="/static/toolpad/docs/canvas-selected.png" width="232px" alt="Canvas controls" />
+<img src="/static/toolpad/docs/building-ui/ui-2.png" width="309px" alt="Canvas controls" />
 
 ### Moving components around
 
 In order to change position of a component select it first then click on the overlay handle, drag and drop it in the new location. The canvas will highlight available drop location with green indicator.
 
-<img src="/static/toolpad/docs/canvas-move.png" width="578px" alt="Canvas controls" />
+<img src="/static/toolpad/docs/building-ui/ui-3.png" width="890px" alt="Canvas controls" />
 
 ### Removing components
 
@@ -28,7 +28,7 @@ Select the component you want to remove. Click the bin icon in the overlay to re
 
 In the inspector panel you can see the values of the selected component's properties. Each component has a specific set of properties that you can tweak in the inspector panel.
 
-<img src="/static/toolpad/docs/inspector.png" width="291px" alt="Inspector" />
+<img src="/static/toolpad/docs/building-ui/ui-4.png" width="291px" alt="Inspector" />
 
 You can either use a static or dynamic values as described in [data binding](/toolpad/data-binding/) section
 
@@ -38,26 +38,26 @@ You can either use a static or dynamic values as described in [data binding](/to
 
 Toolpad canvas uses a grid layout where you can use rows to position components:
 
-<img src="/static/toolpad/docs/canvas-rows.png" width="586px" alt="Canvas rows" />
+<img src="/static/toolpad/docs/building-ui/ui-5.png" width="886px" alt="Canvas rows" />
 
 ### Columns
 
 Or place them in a dedicated column besides other components:
 
-<img src="/static/toolpad/docs/canvas-columns.png" width="578px" alt="Canvas rows" />
+<img src="/static/toolpad/docs/building-ui/ui-6.png" width="891px" alt="Canvas rows" />
 
 ### Resizing components
 
 Components placed in columns can be horizontally resized within the grid boundaries:
 
-<img src="/static/toolpad/docs/canvas-grid.png" width="655px" alt="Canvas grid" />
+<img src="/static/toolpad/docs/building-ui/ui-7.png" width="900px" alt="Canvas grid" />
 
 ## Custom styling
 
 In order to provide a personalised styling to the components used in the application you can use style overrides via [sx](https://mui.com/system/getting-started/the-sx-prop/) prop.
 
-<img src="/static/toolpad/docs/sx.png" width="276px" alt="SX" />
+<img src="/static/toolpad/docs/building-ui/ui-8.png" width="273px" alt="SX" />
 
 Click on **sx** button in the Inspector to bring up JSON editor and define style overrides:
 
-<img src="/static/toolpad/docs/sx-editor.png" width="627px" alt="SX" />
+<img src="/static/toolpad/docs/building-ui/ui-9.png" width="637px" alt="SX" />
diff --git a/docs/data/toolpad/building-ui/component-library.md b/docs/data/toolpad/building-ui/component-library.md
@@ -6,7 +6,7 @@
 
 In order to access a list of built in components hover over **Component library**
 
-<img src="/static/toolpad/docs/component-library.png" width="348px" alt="Component library" />
+<img src="/static/toolpad/docs/building-ui/ui-1.png" width="281px" alt="Component library" />
 <br />
 <br />
 

diff --git a/docs/data/toolpad/building-ui/custom-components.md b/docs/data/toolpad/building-ui/custom-components.md
@@ -6,15 +6,15 @@
 
 In order to create a new custom component locate **+** button in the Explorer near Components section and click it:
 
-<img src="/static/toolpad/docs/custom-component-1.png" width="241px" alt="Custom component" />
+<img src="/static/toolpad/docs/building-ui/ui-10.png" width="253px" alt="Custom component" />
 
 Choose the name for your component and click **Create**:
 
-<img src="/static/toolpad/docs/custom-component-2.png" width="460px" alt="Custom create" />
+<img src="/static/toolpad/docs/building-ui/ui-11.png" width="434px" alt="Custom create" />
 
 You can now use code editor (on the left) and live preview (on the right) to define your custom component:
 
-<img src="/static/toolpad/docs/custom-component-3.png" width="990px" alt="Custom component IDE" />
+<img src="/static/toolpad/docs/building-ui/ui-12.png" width="1243px" alt="Custom component IDE" />
 <br />
 <br />
 

diff --git a/docs/public/static/toolpad/docs/building-ui/ui-1.png b/docs/public/static/toolpad/docs/building-ui/ui-1.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-10.png b/docs/public/static/toolpad/docs/building-ui/ui-10.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-11.png b/docs/public/static/toolpad/docs/building-ui/ui-11.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-12.png b/docs/public/static/toolpad/docs/building-ui/ui-12.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-2.png b/docs/public/static/toolpad/docs/building-ui/ui-2.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-3.png b/docs/public/static/toolpad/docs/building-ui/ui-3.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-4.png b/docs/public/static/toolpad/docs/building-ui/ui-4.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-5.png b/docs/public/static/toolpad/docs/building-ui/ui-5.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-6.png b/docs/public/static/toolpad/docs/building-ui/ui-6.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-7.png b/docs/public/static/toolpad/docs/building-ui/ui-7.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-8.png b/docs/public/static/toolpad/docs/building-ui/ui-8.png
diff --git a/docs/public/static/toolpad/docs/building-ui/ui-9.png b/docs/public/static/toolpad/docs/building-ui/ui-9.png
diff --git a/docs/public/static/toolpad/docs/canvas-columns.png b/docs/public/static/toolpad/docs/canvas-columns.png
diff --git a/docs/public/static/toolpad/docs/canvas-grid.png b/docs/public/static/toolpad/docs/canvas-grid.png
diff --git a/docs/public/static/toolpad/docs/canvas-move.png b/docs/public/static/toolpad/docs/canvas-move.png
diff --git a/docs/public/static/toolpad/docs/canvas-rows.png b/docs/public/static/toolpad/docs/canvas-rows.png
diff --git a/docs/public/static/toolpad/docs/canvas-selected.png b/docs/public/static/toolpad/docs/canvas-selected.png
diff --git a/docs/public/static/toolpad/docs/component-library.png b/docs/public/static/toolpad/docs/component-library.png
diff --git a/docs/public/static/toolpad/docs/custom-component-1.png b/docs/public/static/toolpad/docs/custom-component-1.png
diff --git a/docs/public/static/toolpad/docs/custom-component-2.png b/docs/public/static/toolpad/docs/custom-component-2.png
diff --git a/docs/public/static/toolpad/docs/custom-component-3.png b/docs/public/static/toolpad/docs/custom-component-3.png
diff --git a/docs/public/static/toolpad/docs/inspector.png b/docs/public/static/toolpad/docs/inspector.png
diff --git a/docs/public/static/toolpad/docs/sx-editor.png b/docs/public/static/toolpad/docs/sx-editor.png
diff --git a/docs/public/static/toolpad/docs/sx.png b/docs/public/static/toolpad/docs/sx.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ @@
     In order to access a list of built in components hover over **Component library**
-    <img src="/static/toolpad/docs/component-library.png" width="348px" alt="Component library" />
+    <img src="/static/toolpad/docs/building-ui/ui-1.png" width="281px" alt="Component library" />
     <br />
     <br />
@@ Expand Down @@