🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.
Home Page: https://medly.github.io/medly-components/
License: MIT License
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
bug: column separator is getting hidden on hide/show column
Steps to reproduce the behavior:
Should show column separator on hide/show column
If applicable, add screenshots to help explain your problem
Migrate to Storybook 6
https://medium.com/storybookjs/storybook-6-0-1e14a2071000
https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5
Currently TableTheme can be customised to change Table Row's bgColor for even/odd/selected and disabled state, would like to have option to customise Row's TextColor also.
It is very likely for someone to change text-color/foreground-color if the background color is changed, depending upon the color scheme/theme followed in the project
Current tableTheme.row object
{ 'bgColor': { 'odd': '#F7F8F9', 'even': '#ffffff', 'selected': '#D0E1FE', 'disabled': '#eff2f4' }, 'selectedBorderColor': '#126AFA' }
add an object field for textColor
{ 'bgColor': { 'odd': '#F7F8F9', 'even': '#ffffff', 'selected': '#D0E1FE', 'disabled': '#eff2f4' }, 'textColor' : { 'odd': '#F7F8F9', 'even': '#ffffff', 'selected': '#D0E1FE', 'disabled': '#eff2f4' }, 'selectedBorderColor': '#126AFA' }
Add a prop to table component to show rows as card on white background.
The SingleSelect component's onChange handler is being invoked with argument undefined on initial render.
Change event should only fire when value is actively set by the user
@medly-components/[email protected]
@medly-components/[email protected]
@medly-components/[email protected]
@medly-components/[email protected]
@medly-components/[email protected]
@medly-components/[email protected]
@medly-components/[email protected]
Tabs component should follow the latest design
S | M | LwhiteBackground and darkBackgrounddefault, hovered, active & disabled statestitle & helperText propicon prop to show the iconsuperscriptText prop to show count or other helpful infoDependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__react in /yarn.lock:
Couldn't find package "storybook__react@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
Currently, form fields take individual validator functions, but when we have a case where 1 of 3 fields in a form must be filled out, there's no built-in way to do that validation. For example, if one of home, cell, and email must be filled out before submitting a form.
To be able to define validation groups for form validations, or some other way to validate related fields together instead of individually.
You can define a validator function that checks the state of the fields within the context of the component and pass that function as each of the individual fields' validator, but the error messaging behavior becomes confusing for users since the validator runs onBlur of the specific fields.
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__react in /yarn.lock:
Couldn't find package "storybook__react@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
The hoverBgColor prop doesnt seem to do anything.
<DeleteIcon hoverBgColor='#E5E5E5'/>
Version:
"@medly-components/core": "^1.0.0-beta.24",
"@medly-components/forms": "^1.0.0-beta.3",
"@medly-components/layout": "^1.0.0-beta.37",
"@medly-components/theme": "^1.0.0-beta.12",
"@medly-components/icons": "^1.0.0-beta.25",
Table footer scrolls when there is a vertical scroll in a table and gets hidden when we are at the top of the table.
Table footer should always be visible like table header when scrolling, it should be positioned sticky
Try to set minWidth props, it is not setting that width.
we have code like this in DatePicker:
const minWidth = props.minWidth || size === 'S' ? '25rem' : '29rem';
it should be like this:
const minWidth = props.minWidth || (size === 'S' ? '25rem' : '29rem');
Add animation in the background and popup of modal component
Add keyframes for the animation in background and popup
Dependabot can't evaluate your JavaScript dependency files.
As a result, Dependabot couldn't check whether any of your dependencies are out-of-date.
The error Dependabot encountered was:
Workspaces can only be enabled in private projects.
Redesign DateRangePicker.
Figma Link : https://www.figma.com/file/vA4EQdxl0d0ETtYpw2uSjW/Medly-Pattern-Library-B2B-Internal?node-id=9721%3A0
Additional Context ---->
Design date picker component based on the current Tango implementation of the date picker.
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__react in /yarn.lock:
Couldn't find package "storybook__react@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
MultiSelect component shows value instead of label as the display value in input when options are selected. It results in a problem with internal values being exposed in the input fields.
Steps to reproduce the behavior:
MultiSelect component with different values for label and value fields in options.The input display value after selecting any option should be label and not value.
Options provided to MultiSelect
Notice label starts with capital 'L' in Lorem Pharmacy
Though the input display values show selected option Lorem Pharmacy with small 'l' which is the value field lorem pharmacy
Add any other context about the problem here.
Datepicker is disabling minSelectableDate in calendar if minimumSelectableDate is not start of the day.
Try to set minimumSelectableDate as 'today' like this it will exclude today from calendar
<DatePicker
variant="outlined"
size="S"
minSelectableDate={new Date()}
...
/>
in Calendar component this code has been written:
<Styled.Date
key={index}
title={_date.toDateString()}
isInActiveMonth={isInActiveMonth}
isSelected={isSelected}
isCurrentDate={isCurrentDate}
disabled={_date > maxSelectableDate || _date < minSelectableDate}
onClick={handleDateChange(_date)}
>
<Text>{_date.getDate()}</Text>
</Styled.Date>
here if minSelectableDate's time is other than start of the day '00.00.00', then the condition _date < minSelectableDate become true and it will disable that date. One possible solution might be, we change this condition something like this endOfDay(_date) < minSelectableDate
@medly-components/core
Default Email validator on email field is treating abc.aaa@com as correct
Steps to reproduce the behavior:
Email with patterns <something>@<something>.<somthing> should only be treated as valid mails
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__addon-actions in /yarn.lock:
Couldn't find package "storybook__addon-actions@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
When the table is in loading state (isLoading={true}) then the content passed to rowHoverActions prop should not be visible
Steps to reproduce the behavior:
The content passed to rowHoverActions prop should not be visible.
Checkbox should follow the latest design.
https://www.figma.com/file/vA4EQdxl0d0ETtYpw2uSjW/Medly-Pattern-Library-B2B-Internal?node-id=239%3A0
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__react in /yarn.lock:
Couldn't find package "storybook__react@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
Feature Input Masking is mostly related to Credit Cards and Phone Numbers. For Example -
US Phone Numbers are added displayed in 123-456-7891 or (123) 456-7891. Its easy to format number when you are dispalying but Medly UI Mockups suggests to have Text Inputs have this type of Masking also.
Same Case is with Credit Cards 4444-4444-4444-4444
Text Input having Props maskPattern where you can define Pattern like above and then Input will consider it automatically.
I tried an alternative where we override the event.target.value using onInputChange function by the help of a Regex like (\d{3})(\d{3})(\d{4})
But its a very bad solution to override event.target.value on every input change.
Need something like this => https://www.npmjs.com/package/react-input-mask
Table Component shows ellipses on text wrap, after hovering on ellipses it is not showing the tooltip
Steps to reproduce the behavior:
On hover of ellipses tooltip should be shown
Card.styled.js?5d28:formatted:1 Uncaught TypeError: Cannot read property 'S' of undefined at w (Card.styled.js?5d28:formatted:1) error inside @medly-components/core/dist/es/components/Card/Card.styled.js
Prior to the update, the component above was being used with no error but the update is triggering a TypeError within the package, specifically inside @medly-components/core/dist/es/components/Card/Card.styled.js
Steps to reproduce the behavior:
yarn installyarn docker:update-depsyarn docker:image-buildyarn docker:devSince I am not yet pulling in any new components from medly-components/core, I shouldn't see any errors from just updating the package.
"@medly-components/core": "^1.40.0",
"@medly-components/forms": "^1.13.2",
"@medly-components/icons": "^1.4.9",
"@medly-components/layout": "^1.14.2",
"@medly-components/loaders": "^1.0.33",
"@medly-components/theme": "^1.24.1",
"@medly-components/utils": "^1.6.2",
If I change the component being used in NoApp (if I replace import Card to import Modal), the error goes away. So it seems like the error is only within Card component.
If I revert back to the older @medly-components/core package the error is gone.
Ability to create new options along with choosing existing options in multi select component
In multi select component we have to provide pre defined options. But if we want to add our custom option on-the-fly there is no way to do it.
React-select has a creatable component that can be used to achieve the same effect
Example: How Trello handles tags
Update the standard single-select design to reflect multi-select.
A clear and concise description of the feature request
A clear and concise description of what you want to happen.
A clear and concise description of any alternative solutions or features you've considered.
Add any other context or screenshots about the feature request here.
Steps to reproduce the behavior:
Clear option should not be there for disabled multiselect. If it is there then it should be disabled.
@medly-components/core
Table component
Add information about custom cell component
With required property true, while selecting date from datePicker calendar at the first time, error message will be appeared even if value is there.
Error message should not be displayed if user selecting value via calendar.
Create HiddenJS and HiddenCSS component to hide the children component based on screen sizes.
Create HiddenJS and HiddenCSS component which should take props like up|down|between prop to denote the screen sizes and then the component should show and hide the children component based on the current screen size
Add a prop to table component to show rows as card on dark background.
Radio button should follow the latest design.
https://www.figma.com/file/vA4EQdxl0d0ETtYpw2uSjW/Medly-Pattern-Library-B2B-Internal?node-id=239%3A0
Checkbox group should follow the latest design
Search component to show options matched to input value.
S | MHTMLInputElement propsoptions as prop to display search results optionsmaxHeight as prop to limit the height of search results containeronOptionSelected prop to select the option from search resultssize prop to update the size of search boxThere should be an override point to alter cell data before passing it to Cell component. like for example we can have a method cellValue in TableColumnConfig, or we can somehow use existing formatter method for this purpose. This will unlock many possibilities i.e. CustomComponent can also receive custom modified data without polluting existing data array.
Example:
Currently we have:
<Cell
rowId={id}
key={fieldName}
rowData={rowData}
data={rowData[config.field]}
...
/>
The new proposal is to pass modified value:
// method format
cellValue: (cellData, rowData) => {
return 'something'
}
.....
<Cell
rowId={id}
key={fieldName}
rowData={rowData}
data={cellValue(rowData[config.field], rowData)}
...
/>
Suppose we have order data:
[
{
orderNumber: 'some number',
amount: 'some number',
placedOn: 'some date',
deliveredOn: 'some date',
receivedOn: 'some date',
},
...
]
Now we need to construct table with three field => orderNumber, amount, status. We need to calculate status by looking at fields => placedOn, deliveredOn, receivedOn. By using cellValue method we can achieve this easily without polluting original data array, and even if we are using CustomComponent then it can be used there also.
One argument here may be like we are anyway passing rowData to CustomComponent, then why we need this extra cellValue?, we still need this because in that CustomComponent we have to depend upon strings like 'placedOn' etc to extract data from rowData, which will harm CustomComponent's reusability.
A wrong type has been mentioned for rowData in Table => Cell component. It should not be list of record, it should be one record itself.
rowData: Data;
Data => {
[key: string]: any;
}[];
rowData: {
[key: string]: any;
}
Currently, if a field should be disabled/enabled or required based on the value of another field in the form, I have to check that field's value on every form change and update the fieldSchema to toggle whether it's required or disabled/enabled. For example, if Other is chosen from a Single Select, I may need to change a TextField from disabled to required.
Some way of linking dependent fields in the fieldSchema
As mentioned above, I currently am doing this manually on every form change
show character count in TextField component
component should accept max character limit and display the exhausted, max character limit
Currently, the date range picker stays open even when both start and end dates are selected. There is no way to know when both start and end dates are selected. The front-end needs a way to know when the user has finished selecting the date-ranges.
A prop which takes a function (A) as a parameter and calls A when both the start and end dates are selected on the calendar.
The <DateRangePicker> component can call the onChange prop only when both start and end dates are selected. Currently, the onChange props is called on every date selection.
When we use DatePicker component in the Form and have the required set as true. Then Even on selecting the date it shows error message "Please fill in this field."
Although it doesn't have any impact on the Form Submission.
Steps to reproduce the behavior:
The Error Message should be removed if there is already a value assigned to it.
Add any other context about the problem here.
Radio group should follow the latest design
When you navigate to the last page of the <Table/> element, then in pagination the data range shows incorrect end limit.
eg, Viewing 31 - 40 of 34 Results
The pagination shows 31-40 when there are only 34 results.
The end limit number should match the total results count.
Steps to reproduce the behaviour :
The pagination's end-limit number should match with the total results count.
Eg Viewing 31-34 for 34 Results.
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.