Button component

The button component has five different types of variants, all of which should be supported according to the Figma specifications. Use the base button (above the section) to build the variants on top of. The following is the variants list:

Button type variants

• Default
• Only icons

Size variants

• XSmall (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Responsive (merge all)

Style variants

• Solid gray
• Solid primary
• Outline
• Ghost
• Link

State variants

• Normal
• Hover
• Disabled

Container variants

• Round
• Square

Checklist for rollout

• All variants supported
• Storybook component story
• Accessible buttons
• Automated tests for variants

Description
We need to modify the color builder to fix how lightning is calculated. It should take into account the base color and operate on that lightning setting instead of using fixed values.

Two colors are broken today -- lime and violet -- and we should use them to test out the fixed implementation.

Tests and corrections

• Lime 500 → (HSL 120, 54, 43)
• Lime 50 → (HSL 120, 54, 93)
• Lime 900 → (HSL 120, 54, 03)
• Lime All all the in between values will need to adjust to the ones above
• Violet 500 → (HSL 280, 64, 43)
• Violet 50 → (HSL 280, 64, 93)
• Violet 900 → (HSL 280, 64, 03)
• Violet All all the in between values will need to be adjusted based on the ones above

Description
We need to add the following description to the List component.

Component that is used to represent independent lines of content.

Description

Check all components to ensure they work on all screen sizes. We already have a plugin which allows you to change the viewport of the storybook. Test all components and all variations of all components to ensure they work on all screen sizes.

Type of Test

• Unit test (e.g. checking a loop, method, or function is working as intended)
• Integration test (e.g. checking if a certain group or set of functionality is working as intended)
• Regression test (e.g. checking if by adding or removing a module of code allows other systems to continue to function as intended)
• Stress test (e.g. checking to see how well a system performs under various situations, including heavy usage)
• Performance test (e.g. checking to see how efficient a system is as performing the intended task)
• Other...

Expected Behavior

All components and their variations must behave properly and work well on all screen sizes.

We want to create the first batch of atoms for OMUI based on the designs.

• Colors
• Gradients
• Typography
• Icons
• Images
• Avatars

• Header 3 = 3XL
• Header 4 = 2XL
• Header 5 = XL
• Header 6 = Sm Bold

Description
We need to add the following description to the Badge component.

Badges are used to indicate categories, rank, or classifier.

• Default color for xs, s, md, lg text = Gray 600
• Default color for xl, 2xl, 3xl, 4xl, 5xl, 6xl = Gray 800

Description
We need to add the following description to the Divider component.

Dividers are lines that fill their containers either vertically or horizontally. You can use the dividers below to help visually break your content or UI action areas.

Description
We need to add the following description to the Avatar component.

Avatars are used to condense a profile or persona into more of an icon impression. They come in 6 sizes and can have an alert indicator to show or hide.

Description
We need to add the following description to the field show in Avatar.

Indicates active alert or notification, or indicates online status

Description

Figure out Chromatic and ensure this is working as we intend it for both pushing and PR’s.

How to Reproduce

1. Modify a component
2. Submit a pull request
3. Review changes on https://www.chromatic.com/
4. See that tests aren't passing

Expected Behavior

The check statuses of reviewed pull requests in chromatic should pass or fail, and not pending