lifeomic / chroma-react Goto Github PK
View Code? Open in Web Editor NEWOpen source design system from LifeOmic, built with React
Home Page: https://lifeomic.github.io/chroma-react/
License: MIT License
Open source design system from LifeOmic, built with React
Home Page: https://lifeomic.github.io/chroma-react/
License: MIT License
A major version of Storybook is out and it has MDX support. It would be neat to migrate to the latest version and also potentially move to using MDX instead of storybook-readme
?
We should re-evaluate the Modal component props. In particular, size
and fullWidth
are extremely confusing. We have some feedback on this on #116 (comment). What would be nice is if we have a new height
and width
props, with four different size options for each, allowing a bit deeper customization.
We can make this a breaking change if it makes sense, or provide new props and deprecate the old ones. We could even look at replacing the underpinnings with another library that may help us out a bit too ๐
When providing a background image and refreshing the page, the default background image flashes before rendering the provided backgroundImage
.
I tried this:
In backgroundCover
styles, I remove the background style and added the background color.
backgroundColor: theme.palette.primary.main
Then in the inline style I updated it to this.
{
backgroundImage: backgroundImage
? `url(${backgroundImage})`
: `url(${PageLayoutDefaultHero})`,
}
But no luck. I wonder if there is some lag in ConditionalWrapper
and the styles are painting before the inline styles. ๐คทโโ๏ธ
it only supports a flat array items in the <InfiniteScroll />
component.
Supports InfiniteData
type from @tanstack/react-query
to reduce developer's effort to transform paged data into a flat array
Popovers, Menus, Selects, Comboxes, and Tooltips currently always render a portal + display: 'none'
elements in the DOM. Here's an example in a LifeOmic app with a TableModule and tooltips for multiple actions.
As you can see from the image, some of this is the due to the way Reakit works with portals. Maybe we shouldn't portal as much or should cut back on what we do portal?
role="checkbox"
needs added to sidebar toggle button to pass a11y checks.
When testing a Radio Group Minimal component with Voice Over, I could not get the radio options to receive keyboard focus. I was not read the label / description either.
ButtonLink text should be text-aligned center
Instead of re-exporting the feather icons and having a mix of custom icons, we should migrate to the new Chromicons package once we have icon parity: https://github.com/lifeomic/chromicons
Create prop that adds flex: 1
to direct children of <Box
so children will flex to full width/height of parent
We are missing stories for NumberFormat/PhoneNumberFormatField
and NumberFormat/UnitNumberFormatField
One of the feedback items we received is adding a Skeleton Loader component. There are two ways to build these normally:
From my experience, the second option is normally the least hacky / error prone, but I don't want to put too much bias on that decision if someone can get something working well!
Here's an example of a Select Loading Skeleton I've done in Marketplace. Styles are with tailwind, but you can map those over to a CSS class name.
export const SelectLoadingSkeleton: React.FC<SelectLoadingSkeletonProps> = ({
...rootProps
}) => (
<div
className="flex flex-col"
{...rootProps}
data-testid={loadingSkeletonTestId}
>
<svg
className="w-full h-5 bg-gray-300 rounded-md mb-2 animate-pulse"
role="presentation"
aria-hidden
>
<rect fill="currentColor" />
</svg>
<svg
className="w-full h-10 bg-gray-300 rounded-md mb-2 animate-pulse"
role="presentation"
aria-hidden
>
<rect fill="currentColor" />
</svg>
</div>
);
Checkout TanStack Table.
This is a follow up of #330 to cover:
config
of TableModule, no changes to existing apps that use it.columns: ColumnRef[]
to configure TableModule , it will use react-table
's implementation.A generic autocomplete component would be helpful. Downshift can help us a lot here as it takes care of the accessibility pieces nicely.
This is similar to #36, but specific for the <Tooltip
component. Even when the tooltip is not visible, a portal is still put in the DOM. If a page has a table with many actions, there may be 30+ portals due to this. We should look at other options instead. One of the requirements is that it needs to be fully accessible.
A few that come to mind:
I saw these msg when running this repo:
A new version (7.2.1) is available!
โ
โ Upgrade now: npx storybook@latest upgrade
โ
โ Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
At the moment, we have two "sources of truth" for a typography scale:
<Text
component (https://github.com/lifeomic/chroma-react/blob/master/src/components/Text/Text.tsx)While somewhat similar, there are differences between the two. Part of the reasoning for this is because Material-UI provides a typography scale on the theme. Our existing app heavily leveraged the theme typography scale for MUI components, and while migrating to Chroma components, we didn't want to totally break the app by shifting font sizes/line-heights/letter-spacing.
We should look at taking the Text component typography scale and adding that to the theme. Once this is completed, the Text component can derive all of Text styles from the theme instead of being hardcoded in the component.
One unanswered question is if we should remove the MUI-specific typography options (h2-h6 for example) from the theme, or instead, add them to our proper typography scale and update <Text
to expose these. If we end up removing font sizes from the theme, does that break existing MUI components as they're no longer on the theme?
Chroma should provide a Slider component. This is something @HaleyWardo and @dexterca have already (to some degree) in one of our apps. It'd be awesome to move it over as a proper component.
Some research is needed with the Stepper component to see what is expected of these types of components and what gaps need filled when it comes to accessibility.
Having built-in date picker components would be extremely helpful. Probably need to work with design to figure out our use cases and how it should look/work from a UI/UX perspective
To really make Chroma powerful, it'd be great if consumers could add whatever they wanted to the theme
object (and have types as well).
Some examples:
This would allow for the above scenarios, instead of defining them outside of the theme as raw objects or something.
Since all modern browsers now support flexbox gap
property, add gap
support to <Box
.
Some of our form components throw runtime errors in dev mode. The most common case is when a label
is falsy, we want to require aria-label
for a11y reasons. Instead of doing a runtime error, we should be able to leverage discriminated unions https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions
It looks like in the v4.12 release, they renamed the module failure and it causes webpack errors at dev time
The problematic change
mui/material-ui@bf65be2
The failure during webpack with v4.12
node_modules/@material-ui/core/styles/createMuiTheme.ts doesn't exist
From @epeters3
Idea: Include a Changelog page or a "What's New in Chroma" section on the home page of the Chroma site that allows consumers to see what's new.
I've seen some OSS repos automated changelog.md updates as part of release process via github actions. comments are welcome
Title: WCAG 1.3.1,WCAG 4.1.2: Ensures every form element has a label (#textArea-a7f1824c85aaa71f36e2a4b784193ed9)
Tags: Accessibility, WCAG 1.3.1, WCAG 4.1.2, label
Issue: Ensures every form element has a label (label - https://accessibilityinsights.io/info-examples/web/label)
Target application: Form Components / TextArea - Default โ Storybook - http://localhost:9001/?path=/story/form-components-textarea--default
Element path: #storybook-preview-iframe;#textArea-a7f1824c85aaa71f36e2a4b784193ed9
Snippet: <textarea aria-describedby="error-for-textArea-a7f1824c85aaa71f36e2a4b784193ed9" class="ChromaTextArea-textarea-90 ChromaTextArea-textareaInverse-91 ChromaTextArea-textareaError-92" cols="1" id="textArea-a7f1824c85aaa71f36e2a4b784193ed9"></textarea>
How to fix:
Fix all of the following:
Form element has explicit that is hidden
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Form element does not have an implicit (wrapped)
Form element does not have an explicit
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"
Environment: Chrome version 89.0.4389.82
====
This accessibility issue was found using Accessibility Insights for Web 2.24.0 (axe-core 4.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
Title: WCAG 4.1.2: Ensure every ARIA input field has an accessible name (.ChromaSelect-ul-5785[role="listbox"])
Tags: Accessibility, WCAG 4.1.2, aria-input-field-name
Issue: Ensures every ARIA input field has an accessible name (aria-input-field-name - https://accessibilityinsights.io/info-examples/web/aria-input-field-name)
Target application: Form Components / Select - Default โ Storybook - http://localhost:9001/?path=/story/form-components-select--default
Element path: #storybook-preview-iframe;#id-nov4f0 > .ChromaSelect-ul-5785[role="listbox"]
Snippet:
How to fix:
Fix any of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Environment: Chrome version 89.0.4389.82
====
This accessibility issue was found using Accessibility Insights for Web 2.24.0 (axe-core 4.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
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.