Masala Design System (MDS) is an open-source design system built at Innovaccer. This is a simple and customisable component library to build faster, beautiful, and more accessible React applications on the guidelines and principles of Masala Design System.
Home Page: https://mds.innovaccer.com
License: MIT License
Delay on the tooltip to be added as per the design guidelines
https://design.innovaccer.com/0ee0e5c39/p/1014fc-tooltip/b/846c86
In the case of multi-select dropdowns, the clickable area is restricted to checkbox and corresponding labels. Clicking on the right of a dropdown item doesn't toggle the checkbox state.
The entire dropdown item should be clickable
maxWidth prop in Dropdown doesn't apply on the button when passed with any number below 128. This probably happens because of the min-width rule that restricts it to 128px
Button children are types as string. But when a condition is passed inside it throws an error at runtime
<Button> {true ? 'a' : 'b' } </Button>
Table header is not working properly on safari. Also, it has lost its sticky nature as well.
passing align: "right" to schema column doesn't have any impact on what renders..
I've seen errors in the past (in different modules, obv.), which nobody would have thought, occurred because a file with the same name but difference case existed.
When a dropdown is used inside a form and user opens the dropdown it submits the form
loading, error prop should be available so that user can control it externally.
Just like the async table fetches data when page changes in infinite scrolling it can fetch when few rows are left which can have some default and changeable through props.
<Table
{...props}
infiniteScroll
/>
Some pages have infinite scrolling, like the Care protocol audit
This is happening with Async table. If I sort the table on any column, then the corresponding down/up arrow comes for ascending/descending sort respectively besides its name in the header.
Next, I navigate away from the component containing the table and its componentWillUnmount is triggered. And I return to this component, then the first column is always sorted in descending order with the down arrow icon visible in the table.
I checked the same on Storybook also. It is happening there as well.
Issue gif:
There needs to be a boolean prop in column schema for separator in GridHead.
There is no way to not use separator in GridHead right now.
data/aria attributes should be available for all components
Dropdown triggers needs to be transparent.
Dropdown triggers needs to be transparent.
Dropdown triggers appearance is 'basic'
Add HTML attributes as per:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
Why are we doing this? What use cases does it support? What is the expected outcome?
Unintended behavior:
<DatePicker
inputOptions={{ icon: 'event', placeholder: 'MM/DD/YYYY' }}
/>
Feature requests:
Suddenly options in the checkbox group are horizontally stacked instead of being vertically stacked which is breaking our design. It is because of below change:
.Checkbox { display: flex} => .Checkbox { display: inline-flex}
Before
After
Tooltip support for truncated cell
The original object passed as data to the table evolves with the internal table operations
Should work in an immutable way instead
Brief explanation of the feature.
As per the current docs, there's no config to draw vertical grid lines(border) in the table. The table by default comes with horizontal lines for each row and that too is non-configurable as of now. all I'm asking is to allow both horizontal and verticals grid lines with the option to configure from outside.
Our design has both kinds of table:
with
without
withCheckbox: true is not supported with loaderSchema
Clear steps describing how to reproduce the issue.
Placeholders for row checkboxes should be present.
Placeholders for row checkboxes are missing.
Grid columns should be sorted on Grid Column Head click
It should achive the functionality same as MS-Excel.
OnChange event should not be called when user presses cancel button in Dropdown(checkboxes)
1.Open dropdown
2.Select/unselect and press cancel or simply press cancel
3.onChange event is called which is causing modal to popup
Cancel should close the dropdown
Cancel did not close the dropdown
No callback available for onSearchChange
There should be a callback which should be used when there is updated searchTerm in updateData argument
Pin Right doesn't pin the column to right.
Column should be pinned to left.
It unpins the column instead when the column is pinned left.
DatePicker shows Month and Year in the top center. Clicking on the year should take the user to year list. Currently goes to Month list in that year.
Click on the year (2020)
The following view should open
It is going to the month list view
The size of date picker is too large and cannot be customized
Date picker should match the design as described on https://design.innovaccer.com/0ee0e5c39/v/0/p/4364d9-date--time-picker/b/75b179
Clear steps describing how to reproduce the issue.
What should happen?
What happened.
When Dropdown is passed a list in options. When then item in list having selected true/false should be respectively checked/unchecked(pre-selected). Which is not working
1.Populate list with options as a list which some pre selected or pre selected
2. Open dropdown.
3. Selected values for not checked/unchecked
Values show be checked appropriately
Values were not checked at all.
For responsive layouts, need the option to specify cell width in percentage and also give min-width. As of now, cell width can only be given in pixels values.
Cells can be better adapted to the available table width.
Select All Button is missing to select all Records in case of Pagination.
There should be a way to select all Records in case of Pagination.
Cannot set ID for the following Control Types.
For some control types (like Radio), ID is set equal to the value supplied. Due to this if 2 different Radio items (present in separate Radio groups) on a page have the same value, on clicking the Label of the second one, the first one is getting selected.
While using the SearchInput, the search clear btn is not visible after typing text in the input box. The input was not disabled and I also provided the onClear prop.
Provide the onClear prop to Search Input. Enter text into input field.
After entering some text into the input field and defining the onClear callback, the input clear btn should be made visible.
After entering some text into the input field and defining the onClear callback, the input clear btn is NOT visible.
On fast scroll for multiple times, new empty rows are adding up in the table. Attaching the screenshot for reference.
Dropdown button should be in the active state during mouse down
On mouse click, dropdown button goes into active state
On mouse click, dropdown button moved to focus state
Table throws an error while rendering when the value present for one of the column name's is null. This can obviously be fixed by custom cell and all those options but i still feel that this should not break the Ui at the component level
hover/selected state is limited to last column
Clear steps describing how to reproduce the issue.
Entire row needs to be highlighted in case of hover/active/selected.
Row highlight is limited to last column.
Current Behaviour
If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
Why are we doing this? What use cases does it support? What is the expected outcome?
When passed with defaultValue the input renders to be in an empty state
The trigger button is not visible when dropdown list is open.
Observed in the case of modal. Working fine with table
Support for no previous state for Sorting
Right now we receive sortingList which contains history of sorting done. There should be a way to fetch only the last sorted column.
OnRowClick callback prop doesn't respond to user click action
"@innovaccer/design-system": "1.1.0-8",
Dropdown when used with modal, opens behind it.
Table footer with pagination should be there at the end of table items.
Right now it is fixed on footer (like header) which may give an illusion to the user that the table has only the items which are there above the footer and they may go to the next page without even scrolling to hidden items.
The scrollbar should begin after the column header row.
Right now scrollbar starts at the same vertical position with the column header:
Expected:
Give the option to set empty search template when a search returns 0 results.
If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
Why are we doing this? What use cases does it support? What is the expected outcome?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
