docs(docs): update pageheader back button and spacing guidelines

innovaccer · Oct 18, 2023 · 3d1b8e9 · 3d1b8e9
1 parent 6421715
commit 3d1b8e9
Show file tree

Hide file tree

Showing 44 changed files with 101 additions and 63 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,7 @@
     "@fontsource/nunito": "^4.5.0",
     "@fontsource/nunito-sans": "^4.5.0",
     "@fontsource/roboto-mono": "^4.5.0",
-    "@innovaccer/design-system": "2.22.0",
+    "@innovaccer/design-system": "2.23.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@storybook/theming": "^6.3.6",

diff --git a/docs/src/pages/components/pageHeaders/images/header-with-back-button.png b/docs/src/pages/components/pageHeaders/images/header-with-back-button.png
diff --git a/docs/src/pages/components/pageHeaders/images/recommended-navigation-items.png b/docs/src/pages/components/pageHeaders/images/recommended-navigation-items.png
diff --git a/docs/src/pages/components/pageHeaders/images/spacing-with-and-without-header.png b/docs/src/pages/components/pageHeaders/images/spacing-with-and-without-header.png
diff --git a/docs/src/pages/components/pageHeaders/images/tooltip-on-back-button.png b/docs/src/pages/components/pageHeaders/images/tooltip-on-back-button.png
diff --git a/docs/src/pages/components/pageHeaders/usage.mdx b/docs/src/pages/components/pageHeaders/usage.mdx
@@ -18,37 +18,61 @@ Level 0 page header is used at the topmost level in the hierarchy of pages where
 Level 1 header comes next in the navigation hierarchy. Users typically arrive here from a table or list present in Level 0. Hence, this header replaces the Level 0 header in the view.
 
 This header stays the same in structure when a user navigates further down to subsequent levels i.e. Level 2, Level 3, and so on.
+
+##### Level 1 with back button
+The back button in header takes you to the previous page.
+
+<Preview name="layout-pageheader-level-1-with-back-button-with-navigation--with-navigation" />
+
+##### Level 1 with breadcrumb
+The breadcrumb in header helps you traverse across different levels of page hierarchy.
+
 <Preview name="layout-pageheader-level-1-with-breadcrumb-level-1-with-stepper--level-1-with-stepper" />
 
 ### Variants
 Page header comes in **3 variants** - with navigation, with tabs and with steppers. Steppers are not required in Level 0 typically since the process of creating an entity lies in Level 1 and beyond.
 
 #### With navigation
-Both Level 0 and Level 1 page headers can accommodate horizontal navigation which allows users to navigate through the different sub-pages easily. Any variant of horizontal navigation (with icon & with count) can be used here.
+Level 0, level 1 and level 1 and beyond page headers can accommodate horizontal navigation which allows users to navigate through the different sub-pages easily. Any variant of horizontal navigation (with icon & with count) can be used here.
 
 ##### Level 0
 <Preview name="layout-pageheader-level-0-level-0-with-navigation--level-0-with-navigation" />
 
 ##### Level 1
-<Preview name="layout-pageheader-level-1-with-breadcrumb-level-1-with-navigation--level-1-with-navigation" />
+
+**Level 1 with back button**
+<Preview name="layout-pageheader-level-1-with-back-button-with-navigation--with-navigation" />
+
+**Level 1 with breadcrumb**
+<Preview name="layout-pageheader-level-1-with-breadcrumb-level-1-with-navigation--level-1-with-navigation"  />
 
 #### With tabs
-Both Level 0 and Level 1 page headers can accommodate tabs right beneath the page title to segregate the related content.
+Level 0, level 1 and level 1 and beyond page headers can accommodate tabs right beneath the page title to segregate the related content.
 
 ##### Level 0
 <Preview name="layout-pageheader-level-0-level-0-with-filter--level-0-with-filter" />
 
 ##### Level 1
+
+**Level 1 with back button**
+<Preview name="layout-pageheader-level-1-with-back-button-with-tabs--with-tabs" />
+
+**Level 1 with breadcrumb**
 <Preview name="layout-pageheader-level-1-with-breadcrumb-level-1-with-filter--level-1-with-filter" />
 
 #### With steppers
 In order to show a multi-step process, page headers can accommodate steppers inside them.  
 
-While using steppers, the actions in the header can be dynamic. The primary action can be 'Next' except for the last step where the primary action can be 'Continue' or 'Finish'.
+While using steppers, the actions in the header can be dynamic. The primary action can be 'Next' except for the last step where the primary action can be 'Launch' or 'Finish'.
 
 Generally, steppers are not required at Level 0 since the process of creating an entity lies in Level 1 and beyond. But if needed, steppers can replace the center-aligned navigation tabs in headers in Level 0 as well.
 
 ##### Level 1
+
+**Level 1 with back button**
+<Preview name="layout-pageheader-level-1-with-back-button-with-stepper--with-stepper" />
+
+**Level 1 with breadcrumb**
 <Preview name="layout-pageheader-level-1-with-breadcrumb-level-1-with-stepper--level-1-with-stepper" />
 
 ### Configurations
@@ -80,35 +104,37 @@ Generally, steppers are not required at Level 0 since the process of creating an
       <td>Horizontal divider</td>
       <td>-</td>
     </tr>
+    <tr style="vertical-align: top">
+      <td>Back button</td>
+      <td>True, False</td>
+      <td>False</td>
+    </tr>
   </tbody>
 </table>
 <br/>
 
 ### Usage
-#### Level 2 and beyond
-Page header can show multiple levels of hierarchy using different levels of breadcrumbs within the header in Level 1. Other components remain the same as in the Level 1 header.
+#### Level 1 and beyond
+Page header can show multiple levels of hierarchy using different levels of breadcrumbs within the header in Level 1.
 
-![A Level 2 page header with steppers](./images/pageHeaders-1.png)
-<Caption> A Level 2 page header with steppers </Caption>
+![A Level 1 page header with steppers](./images/pageHeaders-1.png)
+<Caption> A Level 1 page header with steppers </Caption>
 
 <br/>
 
-#### Responsiveness
-By default, only the tabs appear beneath the page title. But if there is a width constraint, navigation can also be adjusted beneath the page title as well.
-
-**Note**: Avoid using steppers when there is a width constraint as entity creation doesn’t usually take place in such conditions.
-
-##### A full width page header
+#### Header with back button
+It is recommended to use a back button in the header for less than 3 levels to save space.
 
-![A full width page header](./images/pageHeaders-2.png)
-<Caption> A full width page header </Caption>
+![Header with back button](./images/header-with-back-button.png)
+<Caption>Header with back button</Caption>
 
 <br/>
 
-##### Same header when there is width constraint
+#### Tooltip on back button
+Back button displays the title of the previous page in a tooltip on hover.
 
-![Same header when there is width constraint](./images/pageHeaders-3.png)
-<Caption> Same header when there is width constraint </Caption>
+![Tooltip on back button](./images/tooltip-on-back-button.png)
+<Caption>Tooltip on back button</Caption>
 
 <br/>
 
@@ -122,9 +148,21 @@ However, it is recommended to not use a divider if the content below is in a car
 
 <br/>
 
-##### Indentation
-Indented dividers should be used if the page header is not covering the full width of the screen e.g. when there is a sidebar.
+#### Spacing with and without divider
+Spacing of 12px is given below header when a divider is present, otherwise no spacing required.
+
+![Spacing with and without header](./images/spacing-with-and-without-header.png)
+<Caption>Spacing with and without header</Caption>
+
+<br/>
+
+#### Responsiveness
+By default, only the tabs appear beneath the page title. But if there is a width constraint, navigation can also be adjusted beneath the page title as well.
+
+**Note**: Avoid using steppers when there is a width constraint as entity creation doesn’t usually take place in such conditions.
+
+#### Recommended navigation items
+It is recommended to use less than three navigation items when there are numerous actions on the right side of header.
 
-![Indented divider (16px) in this case creates better division between sidebar and the page header](./images/pageHeaders-5.png)
-<Caption> Indented divider (16px) in this case creates better division between sidebar and the page header </Caption>
-<br/>
+![Recommended navigation items](./images/recommended-navigation-items.png)
+<Caption>Recommended navigation items</Caption>
diff --git a/docs/static/sb/components-chat-chat-message--chat-message.json b/docs/static/sb/components-chat-chat-message--chat-message.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       }
     },

diff --git a/docs/static/sb/others-design-tokens-colors--colors.json b/docs/static/sb/others-design-tokens-colors--colors.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-design-tokens-miscellaneous--miscellaneous.json b/docs/static/sb/others-design-tokens-miscellaneous--miscellaneous.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-design-tokens-spacing--spacing.json b/docs/static/sb/others-design-tokens-spacing--spacing.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-design-tokens-transitions--transitions.json b/docs/static/sb/others-design-tokens-transitions--transitions.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-design-tokens-typography--typography.json b/docs/static/sb/others-design-tokens-typography--typography.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-layout-all--all.json b/docs/static/sb/others-layout-all--all.json
@@ -619,7 +619,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       }
     },

diff --git a/docs/static/sb/others-styles-align--align.json b/docs/static/sb/others-styles-align--align.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-animation--animation.json b/docs/static/sb/others-styles-animation--animation.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-background--background.json b/docs/static/sb/others-styles-background--background.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-border--border.json b/docs/static/sb/others-styles-border--border.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-display--display.json b/docs/static/sb/others-styles-display--display.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-flex--flex.json b/docs/static/sb/others-styles-flex--flex.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-miscellaneous--miscellaneous.json b/docs/static/sb/others-styles-miscellaneous--miscellaneous.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-overflow--overflow.json b/docs/static/sb/others-styles-overflow--overflow.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-position--position.json b/docs/static/sb/others-styles-position--position.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-sizing--sizing.json b/docs/static/sb/others-styles-sizing--sizing.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-styles-spacing--spacing.json b/docs/static/sb/others-styles-spacing--spacing.json
@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

diff --git a/docs/static/sb/others-utilities-outsideclick-all--all.json b/docs/static/sb/others-utilities-outsideclick-all--all.json
@@ -74,7 +74,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-datepicker-date-and-time-picker--date-and-time-picker.json b/docs/static/sb/patterns-datepicker-date-and-time-picker--date-and-time-picker.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-datepicker-with-presets--with-presets.json b/docs/static/sb/patterns-datepicker-with-presets--with-presets.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-daterangepicker-with-custom-popover--with-custom-popover.json b/docs/static/sb/patterns-daterangepicker-with-custom-popover--with-custom-popover.json
@@ -433,7 +433,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-forms-basic-form--basic-form.json b/docs/static/sb/patterns-forms-basic-form--basic-form.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-forms-create-password--create-password.json b/docs/static/sb/patterns-forms-create-password--create-password.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-forms-create-user--create-user.json b/docs/static/sb/patterns-forms-create-user--create-user.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-forms-inline-form--inline-form.json b/docs/static/sb/patterns-forms-inline-form--inline-form.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

diff --git a/docs/static/sb/patterns-forms-inline-label-form--inline-label-form.json b/docs/static/sb/patterns-forms-inline-label-form--inline-label-form.json
@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.22.0",
+        "brandTitle": "Masala Design System v2.23.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {