The oxygen-ui from wso2

oxygen-ui's Introduction

The Design System powering WSO2's core products.

Oxygen UI is the underlying design system that powers WSO2's core products like Asgardeo, Choreo, WSO2 Identity Server, etc.

This repository contains the source code of the key components that works together for building resilient UIs.

Packages

@oxygen-ui/primitives - Low level building blocks of Oxygen UI (e.g. icons, fonts)
@oxygen-ui/react - The React implementation of Oxygen UI.
@oxygen-ui/logger - Logger for the Oxygen UI packages

Examples

💅 Multi Brand Identity Demo

Sample app to showcase Oxygen Design System's multi-branding capabilities.

✨ Features
- Ability to switch between different WSO2 brand identities. i.e. Asgardeo, Choreo, etc.
- Ability to integrate with Asgardeo Branding feature.
Click here → for the source code 🧑‍💻

Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our guidelines for contributing to get started.

License

Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.

oxygen-ui's People

Contributors

Stargazers

Watchers

oxygen-ui's Issues

Need a way to automatically prefix css classes.

Is your suggestion related to an experience ? Please describe.
ATM, we are hardcoding the oxygen prefix in SCSS files.

Ex:

.oxygen-button {
  font-size: 1rem;
  padding: 8px 16px;
}

Describe the improvement
Need a way to automate this.

N/A

Need to add `Stylelint` to validate the styles

Is your feature request related to a problem? Please describe.

Need to add Stylelint to validate the styles.

Describe the solution you would prefer

Integrate @wso2/stylelint-config to the repository.

Additional context

N/A

💅 Components Development Progress

We will be adding the following set of components to the @oxygen-ui/react package and this issue is created to track the progress.

We are focusing on the components marked with a ⭐️ as high priority.

Component list

Inputs

Box ⭐️ - @brionmario - #13
Button ⭐️ - @brionmario - #1
Button Group
Icon Button - @brionmario ⭐️ - #15

Navigation

Data Display

Feedback

CircularProgress - @savindi7 - #35
CircularProgressAvatar - @savindi7 - #31

Layout

Container ⭐️ - @brionmario - #32
Grid ⭐️ - @brionmario - #13
AppShell ⭐️ - @brionmario - #29

Theme

Color Mode Toggle ⭐️ - @brionmario - #13

Icons

Icons ⭐️ - @brionmario - #6

Surfaces

AppBar ⭐️ - @brionmario - #13
Card - @savindi7 - #34
CardHeader - @savindi7 - #34
CardContent - @savindi7 - #34
CardActions - @savindi7 - #34
Toolbar ⭐️ - @brionmario - #16
ActionCard ⭐️ - @thivi - #20
Stepper ⭐️ - @thivi

Patterns

Sign In ⭐️ - @brionmario - #13
Account Overview ⭐️ - @savindi7

The definition of done (DOD) of the development of a component is defined as follows.

Implementation of the component along with the supplementary hooks, utils, etc.
Unit Tests (With Jest & RTL).
Visual Testing & Accessibility Compliance Testing (With Playwright).
Story with proper documentation.

Recommend Projects

wso2 / oxygen-ui Goto Github PK