@innovaccer/design-system 2.13.2 → 2.13.4-1

package/docs/src/pages/components/chips/usage.mdx

@@ -26,6 +26,28 @@ Input chips are used inside inputs to behave as removable entries or tags.
 <Preview name="components-chip-input--input" />
 <br/>
 
+### States
+<br/>
+
+#### Selection chip
+Selection chips has seven states - default, hover, active, focus, disabled, selection and selection - disabled.
+
+![Interactive states of selection chip](./images/selectionchip-state.png)
+<br/>
+
+#### Action chip
+Action chips has seven states - default, hover, active, focus and disabled.
+
+![Interactive states of action chip](./images/actionchip-state.png)
+<br/>
+
+#### Input chip
+Input chips has seven states - default, hover, focus and disabled.
+
+![Selection states of input chip](./images/inputchips-state.png)
+<br/>
+<br/>
+
 ### Properties
 <table style="width: 100%">
   <tbody>
@@ -40,14 +62,14 @@ Input chips are used inside inputs to behave as removable entries or tags.
       <td>-</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Clear button<br/><em>(optional)</em></td>
+      <td>Clear button</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>True</td>
     </tr>
   </tbody>
 </table>

package/docs/src/pages/components/datePicker/usage.mdx

@@ -50,11 +50,11 @@ For selecting a date range.
       <td>Size</td>
       <td>
           <ul>
-              <li>Large</li>
+              <li>Regular</li>
               <li>Small</li>
           </ul>
       </td>
-      <td>Large</td>
+      <td>Regular</td>
     </tr>
   </tbody>
 </table>
@@ -87,6 +87,13 @@ As soon as a date or date range is selected, time picker dropdown should be trig
 
 ![Date and time picker together](./images/datePicker-5.png)
 <br/>
+
+#### Selecting day of the week or time of day
+Use selection chips for selecting day of the week or time of day.
+
+![Date and time picker together](./images/datePicker-6.png)
+
+
  
 
 

package/docs/src/pages/components/inlineEditableFields/usage.mdx

@@ -11,7 +11,7 @@ Inline editable fields enables users to edit the data right where they see it. T
 <br/>
 
 #### Basic input
-Inline editable input comes with two tiny action buttons to confirm or discard the changes.
+Inline editable input comes with two small action buttons to confirm or discard the changes.
 <Preview name="components-editableinput-all--all" />
 
 #### Input with chips
@@ -23,7 +23,7 @@ Dropdown type does not require explicit save/discard actions, as the result is s
 <Preview name="components-editabledropdown-all--all" />
 
 ### Sizes
-Inline editable input comes in **2 sizes** - regular and tiny. On the other hand, inline editable dropdown comes just in the regular size.
+Inline editable input comes in **2 sizes** - regular and small. On the other hand, inline editable dropdown comes just in the regular size.
 <Preview name="components-editableinput-variants-size--size" />
 
 ### States
@@ -36,12 +36,12 @@ Inline editable input comes in **2 sizes** - regular and tiny. On the other hand
 
 #### Input with chips
 
-![States of inline editable input with chips](./images/inlineEditableFields-2.png)
+![States of inline editable input with chips](./images/inlineEditableField-2.png)
 <br/>
 
 #### Dropdown
 
-![States of inline editable dropdown](./images/inlineEditableFields-3.png)
+![States of inline editable dropdown](./images/inlineEditableField-3.png)
 <br/>
 <br/>
 

package/docs/src/pages/components/inputs/usage.mdx

@@ -44,7 +44,7 @@ Inputs come in **3 sizes** - regular, tiny and large with a few exceptions. Basi
 <Preview name="components-input-variants-size--size" />
 
 ### States
-Inputs come in **5 states** - default, hover, focused, error and disabled.
+Inputs come in **5 states** - default, hover, focus, error and disabled.
 
 ![Input states](./images/inputs-2.png)
 <br/>
@@ -98,34 +98,34 @@ Inputs come in **5 states** - default, hover, focused, error and disabled.
       <th style="width:33%; text-align: left;">Default value</th>
     </tr>
     <tr style="vertical-align: top">
-      <td>Required<br/><em>(optional)</em></td>
+      <td>Required</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Optional<br/><em>(optional)</em></td>
+      <td>Optional</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Info<br/><em>(optional)</em></td>
+      <td>Info<br/></td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
   </tbody>
 </table>