docs(table): add table selection documentation

innovaccer · Sep 5, 2024 · 1e6f33d · 1e6f33d
1 parent d05dde9
commit 1e6f33d
Show file tree

Hide file tree

Showing 17 changed files with 349 additions and 61 deletions.
diff --git a/docs/src/pages/components/table/images/all-items-selected.png b/docs/src/pages/components/table/images/all-items-selected.png
diff --git a/docs/src/pages/components/table/images/all-items-with-filters.png b/docs/src/pages/components/table/images/all-items-with-filters.png
diff --git a/docs/src/pages/components/table/images/appearance-of-bulk-actions.gif b/docs/src/pages/components/table/images/appearance-of-bulk-actions.gif
diff --git a/docs/src/pages/components/table/images/bulk-action-in-space-constraint.png b/docs/src/pages/components/table/images/bulk-action-in-space-constraint.png
diff --git a/docs/src/pages/components/table/images/bulk-action-in-table.png b/docs/src/pages/components/table/images/bulk-action-in-table.png
diff --git a/docs/src/pages/components/table/images/clear-selection.png b/docs/src/pages/components/table/images/clear-selection.png
diff --git a/docs/src/pages/components/table/images/fading-bulk-actions.gif b/docs/src/pages/components/table/images/fading-bulk-actions.gif
diff --git a/docs/src/pages/components/table/images/few-items-selected.png b/docs/src/pages/components/table/images/few-items-selected.png
diff --git a/docs/src/pages/components/table/images/few-selection-before-filters.png b/docs/src/pages/components/table/images/few-selection-before-filters.png
diff --git a/docs/src/pages/components/table/images/global-bulk-action.png b/docs/src/pages/components/table/images/global-bulk-action.png
diff --git a/docs/src/pages/components/table/images/items-selected-with-filters.png b/docs/src/pages/components/table/images/items-selected-with-filters.png
diff --git a/docs/src/pages/components/table/images/no-item-selected.png b/docs/src/pages/components/table/images/no-item-selected.png
diff --git a/docs/src/pages/components/table/images/no-selection-before-filters.png b/docs/src/pages/components/table/images/no-selection-before-filters.png
diff --git a/docs/src/pages/components/table/images/primary-bulk-action.png b/docs/src/pages/components/table/images/primary-bulk-action.png
diff --git a/docs/src/pages/components/table/images/selection-bulk-action.png b/docs/src/pages/components/table/images/selection-bulk-action.png
diff --git a/docs/src/pages/components/table/interactions.mdx b/docs/src/pages/components/table/interactions.mdx
@@ -1,3 +1,6 @@
+import bulkSelection from './images/appearance-of-bulk-actions.gif'
+import fadingBulkSelection from './images/fading-bulk-actions.gif'
+
 ### Hover
 
 <br/>
@@ -43,47 +46,240 @@ A Popover is used to show additional information about an exception.
 <br/>
 <br/>
 
-### States
-
-<br/>
-
-#### Active State
-
-<br/>
-
-![Active state](./images/table-27.png)
-
-<br/>
-
-#### Selected State
-
-<br/>
-
-![Selected state](./images/table-28.png)
-
-<br/>
-
-#### Focused State
-
-<br/>
-
-![Active state](./images/table-29.png)
-
-<br/>
-
-#### Disabled State
-
-Disable items individually except the action icon button. 
-*Not yet available in components.*
-
-![Active state](./images/table-30.png)
-
-<br/>
-<br/>
-
-
-
-
-
-
-
+### Table Selection
+
+<br />
+<br />
+
+<img src={bulkSelection} width='100%' height='auto' />
+
+<br />
+<br />
+
+#### Row(s) To Be Selected
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>State</td>
+      <td>Default</td>
+      <td>Selected</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Duration</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Delay</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0.2, 0, 0.38, 0.9)</td>
+      <td>120ms</td>
+      <td>80ms</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+<br />
+
+#### Appearance Of Bulk Actions
+
+##### Checkbox And Show N Items Row
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Opacity</td>
+      <td>100%</td>
+      <td>0</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"50%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"50%",  textAlign: "left"}}>Duration</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0.2, 0, 1, 0.9)</td>
+      <td>120ms</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+<br />
+
+##### Selected N Items And Bulk Actions Row
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Opacity</td>
+      <td>0</td>
+      <td>100%</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Duration</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Delay</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0, 0, 0.38, 0.9)</td>
+      <td>160ms</td>
+      <td>80ms</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+<br />
+
+### Deselection In Table
+
+<br />
+
+<img src={fadingBulkSelection} width='100%' height='auto' />
+
+<br />
+<br />
+
+#### Row(s) To Be Deselected
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>State</td>
+      <td>Selected</td>
+      <td>Default</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"50%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"50%",  textAlign: "left"}}>Duration</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0.2, 0, 0.38, 0.9)</td>
+      <td>120ms</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+#### Fading Away Of Bulk Actions
+
+##### Checkbox And Show N Items Row
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Opacity</td>
+      <td>0</td>
+      <td>100%</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Duration</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Delay</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0, 0, 0.38, 0.9)</td>
+      <td>160ms</td>
+      <td>80ms</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+##### Selected N Items And Bulk Actions Row
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"33%",  textAlign: "left"}}>Property</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Initial</th>
+      <th style={{width:"33%",  textAlign: "left"}}>Final</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Opacity</td>
+      <td>100%</td>
+      <td>0</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+<table style={{width: "100%"}}>
+  <tbody>
+    <tr>
+      <th style={{width:"50%",  textAlign: "left"}}>Curve</th>
+      <th style={{width:"50%",  textAlign: "left"}}>Duration</th>
+    </tr>
+    <tr style={{verticalAlign: "top"}}>
+      <td>Cubic-bezier (0.2, 0, 1, 0.9)</td>
+      <td>120ms</td>
+    </tr>
+  </tbody>
+</table>