@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/pages/introduction/get-started/designers.mdx

@@ -1,205 +1,45 @@
 ---
 title: For Designers
-description: If you're just starting out designing with Masala Design System, here's a checklist of everything you need to get up and running.
+description: Welcome to the Masala Design System (or MDS as we call it). If you’re just starting out designing with MDS, here is a checklist of everything you need to get up and running.
 ---
 
-### Getting access
+### Enabling Figma libraries
 <br/>
 
-#### Using within Innovaccer
-If you do not have access to Figma already, feel free to reach out to get the invitation.
+#### Sign in to Figma
+First and foremost, sign in to Figma using your organization account.
 
-##### Signing up
-Once you get the invite, sign up using your Innovaccer account to get access to Innovaccer org in Figma. It is highly recommended to add a profile picture so that it is easy to identify you across Figma.
+#### Getting the library files
+Duplicate the files from the Figma community.
+1. [Masala Design System - Branding](https://www.figma.com/community/file/1075022843491691382)
+	<br/>
+    Includes the core colors, logos and the pre-defined color styles.
+2. [Masala Design System - Web guidelines](https://www.figma.com/community/file/974368355920553546)
+	<br/>
+    Includes the components and patterns that can be used to build web products as per the Innovaccer design language.
 
-##### Inviting other stakeholders
-You can invite the product managers, developers, and other stakeholders from your team to a particular project/file using the Share feature of Figma.
-
-Make sure the access permission is set to **‘can view’** when sharing unless you want them to edit the file. Please note that editors are paid seats in Figma.
-
-
-![Inviting other stakeholders](./images/designers-1.png)
-<br/>
-<br/>
-
-##### Guests
-Guests are folks who are not part of our organization; however, you can still share your work with them. You may give them **‘can view’** or **‘can edit’** access but be wary that they are not part of Innovaccer Inc.
+![Duplicating the library from Figma community](./images/designers-1.png)
+<Caption>Duplicating the library from Figma community</Caption>
 <br/>
 
-#### Using within your own organization
-If you want to use the Masala Design System in your own organization in Figma, you can download the files from the community and then publish each of them as a library.
+**Note:** You will not be able to get real-time updates as the duplicate instance of the library is not connected with the main library file available on the community.
 
-* [Masala Design System - Branding](https://www.figma.com/community/file/1075022843491691382)
-* [Masala Design System - Web Guidelines](https://www.figma.com/community/file/974368355920553546)
-
-**Note:** You will not be able to get real-time updates in this case.
-<br/>
-
-### Teams
-The root level in Figma is an organization which in our case is Innovaccer Inc. An organization can have many teams depending on how it operates. We have a predefined set of teams and projects to begin with.
-
-#### Joining an existing team
-Once you sign up, you will be able to see all the teams in Innovaccer Inc. You can easily become a member of a team by just clicking on the respective **Join** button.
-<br/>
-
-![Joining a team](./images/designers-2.png)
-<br/>
-<br/>
-
-#### Requesting edit access
-When you join a team, the permission is set to **‘Can view’** by default. You’ll need to contact the owner or the admin of the team to get **‘Can edit’** access.
-<br/>
-
-### Projects
-Projects help you group similar files. A team in Figma can have as many projects as you would want. However, to avoid overcrowding it is recommended to follow the predefined projects as shared earlier.
-
-#### Files in a project
-A project can have multiple files. You can create different files within a project as per the requirements. If a feature or workflow is too large or complex to fit in a single file, it should be in a separate file.
-
-For example, the project InNote can have the following files-
-* InNote
-* InNote - Referrals
-
-#### Naming files in a project
-A file should be tagged using a prefix, if needed, for easy identification. Tagging is also helpful when two or more files have the same name but serve different purposes.
-
-InConnect can have the following files, for example -
-* Campaigns - Admin
-* [Demo] Campaigns - Banner
-* [iOS] InConnect
-* [mWeb] InConnect
-
-<br/>
-
-![Naming files in a project](./images/designers-3.png)
-<br/>
-<br/>
-
-### Files
-It is recommended to maintain and respect file hygiene so that if someone visits your file they should be able to get a rough idea of the workflow.
-
-#### Divide content into pages
-In a single file, categorize parts of your projects into Pages as shown. This helps in keeping the file organized and easy to understand for others.
-
-#### Organizing content within a page
-* If there are a lot of screens in a single page, break them into non-assorted groups as per their functions. Use large and bold titles to identify groups easily when zoomed out.
-* Arrange your workflow and hence the frames in the Left→Right (maximum of 10 frames) and Top→Bottom direction, like character ‘Z’. This helps in easy scanning of a page/workflow.
-* Name your frames/artboards in such a way that they represent what the screen is all about. The recommended arrangement is - **Primary occurrence - Secondary occurrence - Tertiary occurrence** and so on.
-
-Example: Patient List - Filters - ICU Applied. This name indicates that the screen contains a list of patients. There are filters present to filter the list. The ‘ICU’ filter has been applied to that list.
-<br/>
-
-![Organizing content in pages](./images/designers-4.png)
-<br/>
-
-### Pages
-In a single file, categorize parts of your projects into pages as shown. This helps in keeping the file organized and easy to understand for others.
-
-![Type of pages](./images/designers-5.png)
-<br/>
-
-#### Cover
-You should have a separate page for cover, typically the first one. You can set a frame as thumbnail which acts as a cover for your projects outside the canvas for easy identification.
-
-To ease this process, we are providing a Cover component in Design Library (can be found in Utility). 
-* In the 📕 Cover page, draw a 1600 x 960 frame.
-* Drop 01 Cover from Design Library -> Utility.
-* Add project and owner name. Right click and choose -> Set as Thumbnail.
-
-On top of this, you may also add frames for intro, personas, etc. in this page.
-<br/>
-
-#### Resources
-* Anything related to your research should go inside this page.
-* If you have imported a file from Sketch for reference, make sure to move the required frames/artboards to this page.
-
-<br/>
-
-#### Playground*
-As the name suggests, this page acts as a playground for your project. Anything that you want to try out goes here.
-<br/>
-
-#### Regular pages
-* These are the pages where your UI mockups will live. This is where most of your project resides.
-* To make sure the file is well organized, you can have as many such pages as you want albeit it is suggested to divide the content into pages sensibly.
-<br/>
-
-#### Prototype*
-If you need to show a short and quick workflow out of your project to an external stakeholder, this is the place. Keeping these sorts of prototypes in a separate page helps in keeping the main prototype (present in Page 1, Page 2, etc.) clean and organized.
-<br/>
-
-#### Components*
-Any local symbols/components you create in your file go in this page.
-
-***=optional**
-<br/>
-
-### Version control
-#### Creating a branch
-Figma has started offering version control recently. You can create branches just like Abstract and request for review. This feature is not as expansive as Abstract though.
-
-##### When should you create a branch
-Just like Abstract, you should create a branch for -
-* Sprint Stories
-* New Features
-* Bug Fixes
-* Quick Improvements
-
-This way the main file which is shared with the developers and other stakeholders, stays unaltered until the designs have been finalized and merged into it.
-
-**P.S.:** Avoid making changes in your main file if you do not want the developers/stakeholders to act surprised of the changes every time they open the file.
-
-##### Creating a branch
-* Make sure nothing is selected on the canvas.
-* Click on the Down arrow where the file name is (top-center).
-* Click Create branch...
-
-![Creating a branch in Figma](./images/designers-6.png)
-<br/>
-<br/>
-
-#### Branch nomenclature
-Following good naming practices helps understand what a branch is all about at a glance.
-
-##### Naming your branch
-A typical branching nomenclature is as follows -
-
-**{PREFIX} {ISSUE-ID or MODULE NAME} - {FEATURE NAME or DESCRIPTION}**
-
-Prefix make it easier to identify and understand the purpose behind your branch.
-<br/>
-
-![Naming your branches](./images/designers-7.png)
-<br/>
-<br/>
-
-##### Types of prefixes
-* Feature indicated by 🚀
-* Quick fix indicated by 🔥
-* Bug fix indicated by 🐞
-* Lab/Test indicated by 🧪
-
-##### Examples
-* Sprint stories - 🚀 Sprint 22.04.1 - Dismissible Tabs
-* Features - 🚀 Global Search - Section Title - Behavior
-* Bug fix - 🐞 NCR-1320 - Global Search - Sections
+#### Publishing the libraries
+Publish the duplicated files as libraries in Figma in order to make them available for use in your organization.
 
+![Publishing the library in Figma](./images/designers-2.png)
+<Caption>Publishing the library in Figma</Caption>
 <br/>
 
 ### Start designing
-#### Enabling design libraries
-You can enable a specific design library by going to Assets panel and clicking on the **‘Open book’** icon.
+#### Foundations
+Masala Design System is a set of guidelines, components, and patterns to speed up product design and development. In order to design and build products on top of Innovaccer’s platform, go through the [Foundations](/foundations/principles/) section to get familiar with the design principles, colors, layouts, typography, etc. that are used throughout our products.
 
-![Enabling design libraries](./images/designers-8.png)
-<br/>
-<br/>
+#### Components and patterns
+For any [component](/components/overview/all-components) or [pattern](/patterns/overview/all-patterns) that you want to use, there is a respective guideline page which includes its overview, types, variants, states, usage guidelines, etc. It is crucial that you get familiar with these when incorporating the components/patterns in your designs.
+
+#### Content
+There is a separate section for [voice and tone guidelines](/content/voice-and-tone-guidelines/tabs/voice-and-tone/) which should be referred for concise and consistent copywriting.
 
-#### Jump on the canvas
-* Create a new file within a project and name it properly.
-* Create pages as recommended earlier.
-* Make sure to have a frame in Cover page to be used as a thumbnail.
-* Target frames of size 1440 X 1024.
-* Use the shortcut Shift + I to insert components from a design library.
-* Create local components when needed or create a library if you anticipate a component to be used across multiple projects.
-* Use plugins from the right click menu.
-<br/>
+#### Reach out to us
+If you have any question or feedback about any aspect of the Masala Design System, feel free to reach out to us via [email](mailto:designers@innovaccer.com) or on [twitter](https://twitter.com/innovaccerdsgn).

package/docs/src/pages/introduction/what's-new.mdx

@@ -12,7 +12,8 @@ We’re continually improving our Masala Design System. The following changes ar
 <br/>
 <br/>
 
-## 2.5.0-2  (2021-09-29) 
+
+## 2.13.1  (2022-06-24)
 
 ### Highlights
 NA
@@ -27,23 +28,25 @@ NA
 NA
 
 ### Features
-* Calendar and DatePicker has new design and features for today date selection now. (7c3df346)
-* EmptyState component now supports inline SVG image. (863d69b0)
+NA
 
 ### Fixes
-* Table/Grid horizontal scrolling issue is fixed. (a6949715)
-* Modal is now vertically centered and can have flexible heights. (ef6072a7)
-* Dropzone icon is visible now when we bring mouse to drop file over it. (5ba93be9)
+*  fix(daterangepicker): fix error state on blur event (fcc00594)
+*  fix(daterangepicker): fix dateRangePicker input freeze (c98352c0)
+*  fix(popover): fix boundary element story (ca351ed5)
+*  fix(metricInput): fix default metric input story (0eb7e111)
 
 ### Improvements
 NA
 
 ### Documentation
-* Guideline for branch naming convention added. (1ef3cd96)
+*  fix(docs): update distribution id for docs-dev (6e21010d)
+*  fix(docs): update distribution id for docs-dev (6c23c6ed)
+*  feat(docs): add component images (3f9e1fc4)
+*  feat(docs): add helptext component (4601c1e0)
 
 -------------------
-
-## 2.5.0-1  (2021-09-27) 
+## 2.13.0  (2022-06-21)
 
 ### Highlights
 NA
@@ -59,18 +62,69 @@ NA
 
 ### Features
 NA
+
 ### Fixes
-* Fixes the table header scroll when table body scroll (502cb1d1)
-* Fixes the Tabs Component rendering issue with checking children component type (8525a4e7)
-* Fixes the Datepicker snapshot which was getting updated as date changes (c001e925)
+*  fix(timepicker): fix placeholder value getting disappear (1ac69560)
+*  fix(modal): fix modal closing animation (d0236cfe)
+*  fix(popover): fix popover animation flickering issue (3c01529b)
+*  fix(inputMask): fix cursor position on input mask (cbd7f31a)
+*  fix(grid): fix grid loading state (aa3672bb)
+*  fix(grid): fix loading state in grid (0a8719d5)
+*  fix(datepicker): reset to default on blur state (d5565fd2)
+*  fix(docs): remove checkbox from mobile nav (3d4aa0f1)
+*  fix(datePicker): fix event handlers for datepicker (f79e3c29)
+*  fix(docs): fix links on mobile overview page (17e621ba)
+*  fix(docs): add missing images (17483411)
+
 ### Improvements
 NA
+
 ### Documentation
+*  docs(docs): add checkbox in mobile (929861d6)
+*  docs(docs): add help text in web components (c5e9fd8a)
+
+-------------------
+
+## 2.13.0-0  (2022-06-20)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
 NA
 
+### Fixes
+*  fix(timepicker): fix placeholder value getting disappear (1ac69560)
+*  fix(modal): fix modal closing animation (d0236cfe)
+*  fix(popover): fix popover animation flickering issue (3c01529b)
+*  fix(inputMask): fix cursor position on input mask (cbd7f31a)
+*  fix(grid): fix grid loading state (aa3672bb)
+*  fix(grid): fix loading state in grid (0a8719d5)
+*  fix(datepicker): reset to default on blur state (d5565fd2)
+*  fix(docs): remove checkbox from mobile nav (3d4aa0f1)
+*  fix(datePicker): fix event handlers for datepicker (f79e3c29)
+*  fix(docs): fix links on mobile overview page (17e621ba)
+*  fix(docs): add missing images (17483411)
+
+### Improvements
+NA
+
+### Documentation
+*  docs(docs): add checkbox in mobile (929861d6)
+*  docs(docs): add help text in web components (c5e9fd8a)
+
 -------------------
 
-## 2.5.0-0  (2021-09-22) 
+## 2.10.0-0  (2022-03-30)
 
 ### Highlights
 NA
@@ -85,14 +139,267 @@ NA
 NA
 
 ### Features
-* Added previous and next month dates in current month's date in Calendar Component (4fe810bf)
+* (docs): add design for no results in components search (5594cb28)
+* (docs): add design for 404 page (4dfef4de)
+* (docs) : add copy to clipboard for codeblocks and headings (78cb4501)
+
+### Fixes
+* (DateRangePicker): popover not closing on range selection (b5597056)
+* (doc): fix tooltip message while copying code on introduction page (58a7c313)
+* (docs): fix page layout overflow scroll to auto (93176391)
+* (chips): fix input chips hover and selection and active  chips border (e64d8e85)
+* (docs) fix actionsheet navigation issue (1ab2ed4f)
+* (toast): fix toast close button width (ee95e19f)
+* (docs): fix description in container (9f826bcc)
+* (docs): fix font family for react tab in show code (3933bb9f)
+* (docs): fix scroll jump in right nav bar (549ce214)
+* (input): update input icon appearance (1b1e1e1a)
+* (docs): add separate navigation for mobile and web components (97632861)
+* (docs): fix leftnav highlight on tab changes (4bee0cfb)
+
+### Improvements
+NA
+
+### Documentation
+* (docs): updated images in web overview (7292d892)
+* (docs): update front-matter for components and patterns (24fabc67)
+* (docs): add content for lists in mobile (7952a33b)
+* (docs): add documentation for dialogs in mobile (addeef3e)
+* (docs): add documentation for inputs in mobile (d7267f29)
+* (docs): add content for page headers in mobile (4a1e4898)
+* (docs): add documentation for chips in mobile (dc6deb57)
+* (docs): add documentation for cards in mobile (de6766c4)
+* (docs): add content for radio in mobile (067fd7b7)
+* (docs): add content for switch in mobile (02e91667)
+* (docs): add content for tabs in mobile (c5b7ab5b)
+* (docs): add content for toast in mobile (6e756ddd)
+* (docs): update empty state for description (9fffbe8a)
+* (docs): update email-guidlines md files (a358874e)
+* (docs) add documentation for bottom sheet in mobile (8ad96de9)
+* (docs): update error-messages md file (3b77abe1)
+* (docs): update placeholder-text md file (25f8dbbb)
+* (docs): add content for layouts (285bb162)
+* (docs): add alt text in an image in forms (d01d33a8)
+* (docs):Added content for Patterns - Forms (22077e0c)
+* (docs): add content for page headers (d9ffab58)
+* (docs): Added content for UI states (4344340d)
+* (docs) add documentation for buttons in mobile (59bbfea1)
+* (docs) add documentation of action sheet (6587a47e)
+* (docs): update email guidelines content (c6220015)
+* (docs): update error messages  content (b2dd0586)
+* (docs): update empty states content (2b7156d4)
+* (docs): add documentation for navigation, meta list, pagination (2a9cb91f)
+* (docs): added content for file uploader (ec8ffca3)
+
+-------------------
+
+## 2.9.0-0  (2022-02-01)
+### Highlights
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+
+### Fixes
+* fix(verticalnav): fix verticalnav active hover state shadow (1b341516)
+* fix(button): fix button hover background color (1e696743)
+* fix(button): fix button hover and focus style (795ae48b)
+* fix(dropdown): fix dropdown items closing animation (dc8c6102)
+* fix(tabs): fix tabs conflict in selected focused state style (fa4ff904)
+* fix(toast): add message to  discription story (1cac895d)
+* fix(button): props table not showing (70ac3e39)
+* fix(leftNav): fix left navbar highlighting on tab changes (d836a42e)
+* fix(table): add border in table for mdx and fix overflow behaviour (233293ed)
+* fix(table): make scrollbar width consistent (af5da8f6)
+* fix(table): fix table data issue when rows are more than 27 (b33aafc1)
+
+### Improvements
+NA
+
+### Documentation
+* Adds documentations for components.
+
+-------------------
+
+## 2.8.0-0  (2022-01-12)
+### Highlights
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+* Fix chip inline alignment problem (253ba672)
+* Fix progressbar background color (938be99b)
+* Fix disabled  slider knob shadow (aff1ddb6)
+* Fix broken alignment due to inlineLabel in Dropdown (d7b51053)
+* Resolve tooltip close issue on disabled button (cc0c693d)
+
+### Improvements
+* Add popover transitions (f1873f65)
+* Add support for three characters in Avatar component (ba6bc35b)
+
+### Documentation
+NA
+
+-------------------
+
+## 2.7.0  (2021-12-23)
+### Highlights
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+* Button: appearance "success" is deprecated, please use "primary" (375c9aef)
+* Fileuploader component is deprecated, please use Dropzone type="tight" (c5d8ef43)
+* Toast: appearance "default" is deprecated, please use "info" (d589cf6f)
+* Message: appearance "default" is deprecated, please use "info" (3cd54421)
+
+
+### Features
+* Option to use custom search placeholder in Dropdown search input (9fcb2b65)
+* Adds keyboard interactions in Dropzone component. (8541a26d)
+* Adds subinfo option when checkbox is true Dropdown (96a581a3)
+* Adds transition to switch component (f8cbba79)
+* Transition in sidesheet component added (8c61ef05)
+
 ### Fixes
+* fix: updates docpage for stories without components exported (d5138109)
+* fix(storybook): update package json file to fix storybook docs page (149f8ec8)
+* fix(InputMask): fixes issue with fast input (4d1f8330)
+* fix(switch): add styling for hover and active state (3a54a934)
+* Button re-rendering issue is fixed, which was sometimes causing button to be clicked twice. (6b46d66f)
+* FileList truncates long file names now. (0c2a07b6)
+* Breadcrumbs separator color updated. (5b88f5c5)
+* Fixed loader issue when Table has nested rows. (f41f7f96)
+
+### Improvements
+*  Added transitions to fullscreenModal component (98cac857)
+*  Selected state for a disabled chips is now visible (c619c571)
+
+### Documentation
+* Example for custom header in sidesheet added (edc300cc)
+* Input examples (stories) are interactive now (ead16746)
+* add npm ci command to use package.lock freezed versions on CI environments on github actions (621d0934)
+* updates versions of dev dependencies for security issues (3c3d5288)
+* adds manual release workflow (e31559d3)
+
+
+-------------------
+
+## 2.6.0  (2021-12-09)
+### Highlights
+* Calender exposes onHover events on date month and year values (bcaa4aed)
+* New component Divider is added (7dc6034d)
+* Library is now compatible with Node version 14.x LTS (33c736fd)
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
 NA
+
+### Features
+* Datepicker has example for date presets for date selections  (d1a0f30c)
+* Switch and Button components are new accessible (AA) (1b64c361)
+* Calender exposes onHover events on date month and year values (bcaa4aed)
+* New component Divider is added (7dc6034d)
+
+### Fixes
+* Navigation center alignment bug is fixed in Pageheader component (c6c08ba4)
+* Chip component's pointer style is fixed for hovering (01f2f9fc)
+* Design of Calendar component is improved (e4ea85df)
+* Options with checkbox in dropdown can have truncated text now. (c4e8f3a3)
+* Text height of InlineMessage is corrected. (00bbd7e6)
+* Table search results going blank is now fixed. (d2a96002)
+* Table cell can render and position the dropdown inside properly. (3dea79b4)
+
+
 ### Improvements
-* Added test cases for Calendar Component (f22df8b6)
+* Library is now compatible with Node version 14.x LTS (33c736fd)
+* Accessibility linting plugin is added. (6fbb5883)
+
+
 ### Documentation
 NA
 
+
+-------------------
+
+## 2.5.0  (2021-10-25) 
+
+### Highlights
+* A now component ChoiceList is added to use group of check box or radio inputs to work as a choice selector (2d9bb1ed)
+* Calendar and DatePicker has new design and features for today date selection now. (7c3df346)
+* All existing contributors are added to Readme, an option to create request for getting added as contributor and documentation for the same is added. (07db26e9)
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* A now component ChoiceList is added to use group of check box or radio inputs to work as a choice selector (2d9bb1ed)
+* New helper classes for applying border or removing border of an element are added. (7675c8b3)
+* Calendar and DatePicker has new design and features for today date selection now. (7c3df346)
+* EmptyState component now supports inline SVG image. (863d69b0)
+* Added previous and next month dates in current month's date in Calendar Component (4fe810bf)
+
+### Fixes
+* fix(button.css): fix active state in transparent button (1c499f0d)
+* fix(nestedtable): fix expand and collapse button issue (be69d5e5)
+* Issue in scrolling horizontally on a Table body not scrolled table header is resolved. (e71ea1c2)
+* Icons on Table header and column menu to sort the table are now pointed in correct directions. (718a1a37)
+* DateRangePicker pattern example now uses selection cheap in stead of radios for pre defined date range selections. (a1d0ee53)
+* Table/Grid horizontal scrolling issue is fixed. (a6949715)
+* Modal is now vertically centered and can have flexible heights. (ef6072a7)
+* Dropzone icon is visible now when we bring mouse to drop file over it. (5ba93be9)
+* Fixes the table header scroll when table body scroll (502cb1d1)
+* Fixes the Tabs Component rendering issue with checking children component type (8525a4e7)
+* Fixes the Datepicker snapshot which was getting updated as date changes (c001e925)
+
+### Improvements
+* Improved test coverage to cover more than 92% of the code base.
+
+### Documentation
+* FileUploader component example is now more interactive (509a9053)
+* Navigation is more structured on story book for css and other utilities (56999d6b)
+* Message component example improved for versatile use-cases. (16fe6be6)
+* Readme is structured and updated for easy to access the required information (7d9c262d)
+* All existing contributors are added to Readme, an option to create request for getting added as contributor and documentation for the same is added. (07db26e9)
+* Guideline for branch naming convention added. (1ef3cd96)
+
 -------------------
 ## 2.4.0  (2021-09-22)