metlifelegalplans / wui Goto Github PK
View Code? Open in Web Editor NEWThe Willing-branded UI toolkit for React's material-design library
The Willing-branded UI toolkit for React's material-design library
Currently, the project requires a specific version of Node.js (<= v16) to function correctly. However, we would like to make it more accessible and compatible with a variety of Node.js versions.
To achieve this goal, we need to add support for multiple versions of Node.js to our project. This will ensure that users can install and run our project in diverse environments without strict restrictions on Node.js version.
To do this, we will update the package.json file to specify a range of supported versions in the “engines” field. This will allow users to install Node.js within this version range and use our project without compatibility issues.
Remembering that nodejs v16 has already been announced and is deprecated:
https://nodejs.org/en/blog/announcements/nodejs16-eol
running with LTS 21 version:
running with v18 version:
running with v16:
Add demos for the following components using mdx files:
Also include Button
and RadioGroup
from the input section.
See https://react-styleguidist.js.org/docs/documenting for markup guide
getting this error on attorneys, putting here so it doesn't get forgotten:
Material-UI: the createMuiTheme function was renamed to createTheme.
You should use `import { createTheme } from '@material-ui/core/styles'`
as we work with a lot of tables in attorneys, i'm wondering whether that should be supported in here.
pros would be that it would be easy to make tables that match our design. it would be nice, if it's not considered too much, to add in options to paginate and sort out of the box. i found myself basically working on creating this component within attorneys so that moving some things into tables is easier.
cons would be all the reasons we decided to clear out the old custom wui components.
opinions/thoughts?
Right now the textbox component doesn't seem to be able to accept a starting value in addition to the existing controlled value. Seems like it needs a new prop for this.
Investigate, make any appropriate changes.
A demo in the md file for this would also be nice.
just because it's showing up in frontend logs and is confusing if you don't see its a warning:
DeprecationWarning: Invalid 'main' field in '/code/node_modules/@bequestinc/wui/package.json' of 'lib/index.js'. Please either fix that or report it to the module author
This will solve the following issue
https://github.com/MetLifeLegalPlans/estate-planning/issues/2954
look into automating the versioning process so we don't have to keep manually updating package.json. something like changesets changeset-bot
Upgrade MRT to V2 https://www.material-react-table.com/
this issue will keep track of all of the related estate-planning issues that need to be fixed through wui (will update here as we go through a11y tickets)
Issues:
https://github.com/MetLifeLegalPlans/estate-planning/issues/2958
https://github.com/MetLifeLegalPlans/estate-planning/issues/2985
Main changes:
The following block should provide an initial point for the changes requested.
customButton: {
'& button': {
height: '44px',
boxSizing: 'border-box',
},
'& :focus': {
outline: '2px solid 2A4283',
outlineOffset: '3px',
},
},
Tabs needs OnKeyDown Property or some sort of focus indicator.
The original focus indicator seems to have been replaced by a custom indicator.
From original issue:
When you use the keyboard and navigate to the Summary tab, then a focus indicator should appear
When you use the keyboard and navigate to the Help tab, then a focus indicator should appear
The focus indicator should have a contrast of at least 3:1 versus the unfocused components
The focus indicator should have padding of at least 2 CSS versus the unfocused components
Original Issues:
https://github.com/MetLifeLegalPlans/estate-planning/issues/2961
https://github.com/MetLifeLegalPlans/estate-planning/issues/2957
https://github.com/MetLifeLegalPlans/estate-planning/issues/2951
Add demos for the following components using mdx files:
See https://react-styleguidist.js.org/docs/documenting for markup guide
Issue trigger:
Given the "+" button was selected on the Healthcare page, when a member uses the keyboard to focus on the button, the focus indicator has a color contrast of at least 3:1
Expected
Change the button color to #3752A9 on active and focus states
For the focus state, add a custom 2px white outline, as shown in the attached image.
The button size should be 44px by 44px except on focus, which should be 48px by 48px
The focus state should be using the OS native focus state
solves https://github.com/MetLifeLegalPlans/estate-planning/issues/2986
This should be released as a new major version because it is a breaking change.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.