wso2 / oxygen-ui Goto Github PK

View Code? Open in Web Editor NEW

42.0 159.0 23.0 6.67 MB

The Design System powering WSO2 products.

Home Page: https://wso2.github.io/oxygen-ui

License: Apache License 2.0

JavaScript 8.42% TypeScript 60.48% SCSS 10.18% HTML 0.01% CSS 0.60% Handlebars 0.09% MDX 20.22%

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

Package	Description	Version
`@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/react-icons`	React components for Oxygen UI icons.
`@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 🧑‍💻

Documentation

For more information on how to use Oxygen UI, check out the documentation website.

Changelog

You can find the latest changes and updates for Oxygen-UI in the Changelog section. This includes information on new features, bug fixes, and improvements made to the project with each release.

💡 It's recommended to review the changelog before upgrading to a new version of Oxygen-UI.

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

Deprecated defaultProps in @oxygen-ui/react components

Describe the issue:

The components in the @oxygen-ui/react library are using defaultProps, which is deprecated in function components in React. This results in console warnings, such as the one shown for the Typography component.

Refer react docs.

How to reproduce:

Create a new react application.
Install the @oxygen-ui/react library by running pnpm i @oxygen-ui/react.
Import and use a component from the @oxygen-ui/react library which uses default props (e.g., Typography, Input, Drawer).
Start the application and observe the warnings in the browser's console.

Expected behavior:

No deprecation warnings should be shown in the console when using any component from the @oxygen-ui/react library.

Environment information

Affected Package: @oxygen-ui/react
Library Version: 1.11.0
OS: Windows
Browser: Google Chrome Version 123.0.6312.107

Add "Diamond" icon

Is your suggestion related to an experience ? Please describe.
Currently a "Diamond" icon is not available in the design system.

Describe the improvement
Add a "Diamond" icon to the design system.

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

Need to deploy docs

Is your suggestion related to an experience ? Please describe.
Currently, the docs are still in the POC deployment (Vercel: https://oxygen-ui.vercel.app/).
They have to be deployed somewhere that's managed by WSO2.

Describe the improvement
As the first cut, it would be easier to deploy the docs site to gh-pages.

Additional context
Deploying to gh-pages would require to combine the root docs, storybook and examples under one domain.

Add changesets to automate release workflow

Is your suggestion related to an experience ? Please describe.

Related to DX

Describe the improvement

Adding changesets[1] to oxygen-ui repo can greatly improve DX regarding versioning and releasing packages.

[1] https://github.com/changesets/changesets

Additional context

N/A

Update the pnpm version of the `release Github action`

Describe the issue:
Recently the pnpm version of the release Github action was locked to 8.15.7, due to an incompatibility of the newest version of pnpm. This need to be resolved and update the version of the pnpm to the latest.

How to reproduce:

Update the pnpm version of the release action and run the action.

Expected behavior:

Github action should run successfully.

Intellisense Support Issue for MUI Extended Properties in @oxygen-ui/react

Describe the issue:

Intellisense is not supported for the properties extended by Material-UI (MUI) for certain components of the @oxygen-ui/react library.

Intellisense support for the box component:

How to reproduce:

Create a React application with Typescript.
Install @oxygen-ui/react.
Observe the intellisense support when trying to add props that are extended by MUI for some components(ex: Box, Typography, Card ...).

Expected behavior:

Suggest properties when typing the first part of the prop, in line with typical Intellisense behavior, facilitating faster and more accurate development

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.11.0
OS: Windows
Browser: Google Chrome Version 124.0.6367.119

Bump MUI to `v6`

Is your suggestion related to an experience ? Please describe.

MUI v6 is still in beta. We need to upgrade when the major release is done.

✨ What's new in MUI X v6? ✨
https://next.mui.com/x/whats-new/

Describe the improvement
Bump from v5 to v6.

Add new icons: password related and brand icons

Is your feature request related to a problem? Please describe.
Have more options for icons related to security, passwords and connectors

Describe the solution you would prefer
Add icons related to passwords and brands, Apple and Github.

Additional context
Github issue - wso2/product-is#18510

[Design] - Improvements related to `react-icons`

The following improvements are required for the react-icons library

All icons should have one size (Preferably 16 x 16 and the view box should be 0 0 16 16)
Icons must have fill and strokes must be removed. It is difficult to add styling when icons are styles with a mix of both (refer Choreo icons)
Have a compound, single path to simplify icons (E.g. - fontawesome icons)
Must have a consistent stroke width
Must have a consistent color
Must have generic icon names and renamed similar to -> check-circle-16
Should not use style attribute
Should be pure SVGs.
Re-check if all icons in the design is available in the icon library
E.g. - Check circle icon is missing

Add a search feature for icons

Right now we have many different icons and the package will keep growing as needs arise.

We need:

A search feature
Tags related to the search icon to make it easier to search for
- Example: A user must be able to search logout and get the arrow-right-from-bracket icon
A small popup for each icon with the way to import it and tags associated with it

References

MUI icons: https://mui.com/material-ui/material-icons/?selected=AccessibilityNew
Implementation of tags: https://github.com/primer/octicons/blob/main/keywords.json

Add New Icon: DocumentCheckIcon

Is your feature request related to a problem? Please describe.
Add a new icon DocumentCheckIcon.

Describe the solution you would prefer
A sample icon:

Additional context
This icon can be used in use cases related to approvals, documentation etc.

Improve `Image` component with an implementation recommended by MUI

Is your suggestion related to an experience ? Please describe.

MUI doesn't have an Image component in their stable components library

However, an Image MUI component is in the Planning to build stage in their roadmap

Describe the improvement

If the requirement to utilize the Image component arises and certain props unique to <img /> (HTMLImageElement) is needed, we can refer the implementation used by the mui-image library recommended by MUI and improve the existing <Image /> component in OxygenUI.

Additional context

The improvement must be done in the existing Image component. Currently we are not utilizing this component in any custom components or UIs.

`Select` component is wrapped with a `Box` element that's causing issues

Describe the issue:
Select component is wrapped with a Box element that's causing issues when using FormControl.

How to reproduce:

Use Select component with a FormControl and add fullWidth to the FormControl.
Observe that the Select is not honoring the form control styles.

Expected behavior:

Wrapped elements should not be contained with other elements.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.5.0
OS: Mac
Browser: Google Chrome

Introduce a commit message linter

Is your suggestion related to an experience ? Please describe.

Related to developer experience

Describe the improvement

It is a bit tedious to always write the commit messages in the specified format and therefore developers tend to forget to follow the commit message guidelines. It'd be better if we can introduce a commit message linter to automatically enforce the commit message guidelines.

Additional context

Some popular commit linters:

Husky - https://typicode.github.io/husky/
CommitZen - https://github.com/commitizen/cz-cli

Add `Stack` component.

The requested Feature
Add a new component named Stack which is a wrapper around the MUI Stack component.

Integrate autoprefixer to the react package

Describe the issue:
Currently in the react package there is no autoprefixer integrated, which makes some css styles not applying to some older versions of browsers properly. Hence we need to integrate autoprefixer to the react package.

💅 Components Development Progress

This umbrella issue is dedicated to the comprehensive enhancement of the @oxygen-ui/react package, where we aim to continuously grow the component suite.

We'll be focusing on the components marked with a ⭐️ as high priority.

Component list

Inputs

Navigation

Data Display

Feedback

Alert - @thivi - #111
Backdrop - @savindi7 - #142
CircularProgress - @savindi7 - #35
CircularProgressAvatar - @savindi7 - #31
LinearProgress - @thivi - #44
Snackbar - @thivi - #110
Skeleton - @brionmario - #163

Layout

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

Theme

Color Mode Toggle ⭐️ - @brionmario - #13

Icons

CountryFlag - @thivi - #77
Icons ⭐️ - @brionmario - #6

Surfaces

Patterns

Sign In ⭐️ - @brionmario - #13
Account Overview ⭐️ - @savindi7 - #58
Wizard ⭐️ - @thivi #41
Carousel ⭐️ -@thivi #42

Component API

AccordionDetails - @brionmario - #157
AccordionSummary - @brionmario - #157
FormLabel - @brionmario - #156
FormControlGroup - @brionmario - #156
FormGroup - @brionmario - #156
Radio - @brionmario - #156
InputAdornment - @brionmario - #163
Stack - @pavinduLakshan

Utils

Popover - @brionmario - #156

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.

Stop linking a stylesheet if there are no style overrides

Is your suggestion related to an experience ? Please describe.

We have linked an empty stylesheet in some components and it is rendering a redundant style block in the browsers.

Describe the improvement

Remove the empty stylesheets along with their respective imports.

Revamp the design and Improve the UI of Oxygen UI docs/site

Is your suggestion related to an experience ? Please describe.
Site at present - https://wso2.github.io/oxygen-ui/

Describe the improvement

Simple and modern UI design and implementation for the landing page and features of Oxygen (React Components, Icons/Primitives, Guidelines)
Introduce a new brand logo for Oxygen UI

Additional context
Inspiration :

[Design] Improvements related to font variables, aspect ratio, component DOD and addressing design comments.

Task checklist

Finalize font variables and create design tokens
Need font size, weight, line spacing, line height for each variable.
Update the aspect ratios of the designs
16:9
Finalize the component files for the existing components in Storybook
This is required to complete the DOD of a component in Storybook.
The dark themed component must be added as well.
Address the comments in the Figma design file for My Account

Add Command Line Interface (CLI) to Oxygen UI

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

Currently there's no CLI support for the Oxygen UI.

Describe the solution you would prefer

The solution would be to introduce a CLI that offers various utilities and tools to streamline workflows for Oxygen UI users. The CLI should provide an efficient workflow, enforce consistency, automate repetitive tasks, integrate with version control systems, allow customization, and include accessibility tools.

Additional context

Other design systems, such as shadcn ui, have implemented CLI tools to facilitate productivity and improve user experience. By incorporating a similar CLI into Oxygen UI, we can provide users with a more comprehensive toolkit aligned with industry standards.

MUI's `Select` component's label has some alignment issues when used statically

Describe the issue:

Oxygen UI doesn't use MUI's default animated label styles, rather prefers static labels.
However, there seems to be an issue when wrapping the Select component.

How to reproduce:

Use the Select component with a label.

Expected behavior:

Static label should appear on top of the Select dropdon.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.5.1
OS: Mac
Browser: Google Chrome

The bold look of the Oxygen UI tabs appears bulky

Is your suggestion related to an experience ? Please describe.

The bold look of the Oxygen UI tabs appears bulky.

Describe the improvement

Need to make the Tabs appear lightweight.

Icon library has some issues

Describe the issue:

The stroke widths are too narrow and doesn't have consistency.

SVGs with strokes rather than fills doesn't properly get generated to react-icons

How to reproduce:

Expected behavior:

Any SVG should be usable and they should be consistent.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: [e.g., @oxygen-ui/react, @oxygen-ui/primitives]
Library Version: [e.g., 1.10.0, 2.0.0-alpha]
OS: [e.g., Windows, Linux, Mac]
Browser: [e.g., Google Chrome Version 109.0.5414.119, Safari Version 15.3]

`Header` components `Avatar` letter is appearing in lowercase

Describe the issue:

Header components Avatar letter is appearing in lowercase

How to reproduce:

Import and use the Header component passing down a user without a profile image.

Expected behavior:

The letter should be in uppercase.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.5.4
OS: Mac
Browser: Google Chrome

Build Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 18.x

Describe the issue:

Has anyone got the following error when building oxygen-ui on Mac M1?

Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 18.x
For more information on which environments are supported please see:
       https://github.com/sass/node-sass/releases/tag/v8.0.0

Seems the arm architecture is not supported in node-sass v8 [1], but I was able to build the repo a few months ago with this same version afair.

[1] https://github.com/sass/node-sass/releases/tag/v8.0.0

How to reproduce:

Checkout main branch.
Run pnpm install and pnpm build.

Expected behavior:

Should be able to build without an issue.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: [e.g., @oxygen-ui/react, @oxygen-ui/primitives]
Library Version: [e.g., 1.10.0, 2.0.0-alpha]
OS: Mac OS 14 Sonoma
Browser: N/A

Optional Fields

Related issues:

Suggested labels:

Let users know that panel can be collapsed and extended

Is your suggestion related to an experience ? Please describe.
Though there is a change in side panel, the hamburger action button seems to have no state change. I personally feel, it can be dynamic, showing extended vs collapsed view as two different states (icons that switch one to other).

Describe the improvement
We can use the regular hamburger for one of the states where the current one can point to the another state.

Additional context
Screencast from 2023-06-22 11-31-55.webm

Some packages resolving is failing due to the unavailability of `gitpkg.now.sh`

Describe the issue:
Some package resolving is failing due to gitpkg has been moved to vercel, hence these URL's need to be updated to https://gitpkg.vercel.app.

For more details:

EqualMa/gitpkg#58

Bump Storybook version to `v7`

Is your suggestion related to an experience ? Please describe.

Storybook new version launch will be announced at a conference scheduled on Mar 14, 2023 from 10am - 12pm Pacific Standard Time.

https://storybook.js.org/releases/7.0/

Describe the improvement

Bump the version to v7 when possible and also need to check if @storybook/manager-webpack4 is necessary since we have v5.

`Card` component doesn't have a hover style

Describe the issue:

$subject.

How to reproduce:

Use the Card component.
If you need to have a hover style. You need to manually add hover effects.

Expected behavior:

Card component should support a hover style OOTB.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: [e.g., @oxygen-ui/react, @oxygen-ui/primitives]
Library Version: [e.g., 1.10.0, 2.0.0-alpha]
OS: [e.g., Windows, Linux, Mac]
Browser: [e.g., Google Chrome Version 109.0.5414.119, Safari Version 15.3]

Improve styles of the required input label's asterisk

Is your suggestion related to an experience ? Please describe.
Currently, the asterisk of a required input label's has the same color as the text of the label.

Describe the improvement
Improve the color of the asterisk by updating the default color style to red (error main color).

Additional context
The motivation to implement this arose from a requirement in WSO2's Identity Server product, as outlined in the following GitHub issue - wso2/product-is#18642

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

Add download icon

Is your feature request related to a problem? Please describe.
Given its widespread use, including a download icon is essential.

Describe the solution you would prefer
Add download icon to the UI

Additional context

Autocomplete has a default padding & a fixed tag size that's inter-fearing when used in external projects

Describe the issue:

Padding

.oxygen-autocomplete {
    padding-top: 14px;
    padding-bottom: 14px;
}

Tag Size

.oxygen-autocomplete .MuiButtonBase-root {
    height: 32px;
}

How to reproduce:

Use Autocomplete component in a project.

Expected behavior:

There shouldn't be any default styling.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.5.0
OS: Mac
Browser: Google Chrome

Introduce placeholder (skeleton loading) component

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

Currently there is no OOTB component for using as placeholders.

Describe the solution you would prefer

It'd be great if there is a placeholder component, that is similar to https://semantic-ui.com/elements/placeholder.html

Additional context

Skeleton component in Material UI (https://mui.com/material-ui/react-skeleton/)

Override the default MUI look in `Switch` component.

Is your suggestion related to an experience ? Please describe.

ATM, @oxygen-ui/Switch has the default MUI Switch look and that's not very pleasing.

Describe the improvement

Need to update this to a modern style:

Inspiration

Update the design of the `Chip` component

Is your suggestion related to an experience ? Please describe.
Update the design of the Chip component.

Describe the solution you would prefer
Suggested design:

Additional context
N/A

CI build fails at PNPM

Describe the issue:

pnpm install fails with the following error in CI.

How to reproduce:

Send a PR.
Check the CI stacktrace.

CI is using the latest version of pnpm and there seems to be breaking changes (https://github.com/orgs/pnpm/discussions/4967)

Expected behavior:
CI should pass.

Optional Fields

Related issues:

The build is failing when `storybook-static` build artefacts are there inside `packages/react`.

Describe the issue:

The build is failing with the following stack trace at this line when storybook-static build artefacts are there inside packages/react.

`execSync(
  `npx tsc --project tsconfig.lib.json --declarationDir ${outputDir} --emitDeclarationOnly false --outDir ${outputDir}`,
);`

Error: Command failed: npx tsc --project /Users/brion/Desktop/wso2/oxygen-ui/packages/react/tsconfig.lib.json --declarationDir /Users/brion/Desktop/wso2/oxygen-ui/packages/react/dist/transpiled --emitDeclarationOnly false --outDir /Users/brion/Desktop/wso2/oxygen-ui/packages/react/dist/transpiled
    at checkExecSyncError (node:child_process:871:11)
    at execSync (node:child_process:943:15)
    at Object.<anonymous> (/Users/brion/Desktop/wso2/oxygen-ui/packages/react/scripts/build-components.js:29:1)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47 {
  status: 1,
  signal: null,
  output: [
    null,
    Buffer(399) [Uint8Array] [
      115, 116, 111, 114, 121,  98, 111, 111, 107,  45, 115, 116,
       97, 116, 105,  99,  47,  54,  50,  49,  46,  49,  51,  48,
       54,  50, 101,  54,  98,  49,  51, 102,  57,  53, 100,  97,
       99,  52,  56, 100,  97,  46, 109,  97, 110,  97, 103, 101,
      114,  46,  98, 117, 110, 100, 108, 101,  46, 106, 115,  40,
       50,  44,  49,  41,  58,  32, 101, 114, 114, 111, 114,  32,
       84,  83,  57,  48,  48,  53,  58,  32,  68, 101,  99, 108,
       97, 114,  97, 116, 105, 111, 110,  32, 101, 109, 105, 116,
       32, 102, 111, 114,
      ... 299 more items
    ],
    Buffer(0) [Uint8Array] []
  ],
  pid: 46253,
  stdout: Buffer(399) [Uint8Array] [
    115, 116, 111, 114, 121,  98, 111, 111, 107,  45, 115, 116,
     97, 116, 105,  99,  47,  54,  50,  49,  46,  49,  51,  48,
     54,  50, 101,  54,  98,  49,  51, 102,  57,  53, 100,  97,
     99,  52,  56, 100,  97,  46, 109,  97, 110,  97, 103, 101,
    114,  46,  98, 117, 110, 100, 108, 101,  46, 106, 115,  40,
     50,  44,  49,  41,  58,  32, 101, 114, 114, 111, 114,  32,
     84,  83,  57,  48,  48,  53,  58,  32,  68, 101,  99, 108,
     97, 114,  97, 116, 105, 111, 110,  32, 101, 109, 105, 116,
     32, 102, 111, 114,
    ... 299 more items
  ],
  stderr: Buffer(0) [Uint8Array] []
}

How to reproduce:

Build storybook static.
```
cd packages/react
pnpm build:storybook
```
Execure pnpm build from the root.

Expected behavior:
Build shouldn't break.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: [e.g., @oxygen-ui/react, @oxygen-ui/primitives]
Library Version: [e.g., 1.10.0, 2.0.0-alpha]
OS: [e.g., Windows, Linux, Mac]
Browser: [e.g., Google Chrome Version 109.0.5414.119, Safari Version 15.3]

Testing library is unable to render some Oxygen UI components

Describe the issue:

It appears that the Oxygen UI Box component is not being rendered by jsdom for some reason. This issue does not occur when the Box component is imported from "mui/material".

Same issue was observed for ListItemText component as well.

How to reproduce:

🔝

Expected behavior:

Unit tests should run without issues.

[Docs] Add issue and PR creation guidelines

Is your suggestion related to an experience ? Please describe.
The contribution doc doesn't have a guideline on issue and PR creation.

Describe the improvement
Add a clear and simple guide section for issue and PR creation.

Additional context
N/A

Extend `Navbar` to support collapsible menu items

Add support for accordion menu items in the Navbar.

Design

`Avatar` component should have an ability to generate random colors.

Is your suggestion related to an experience ? Please describe.

Currently, the Avatar component lacks the ability to generate random background colors.

Describe the improvement

The improvement involves adding a prop to the Avatar component that allows it to generate random background colors. Additionally, the component should accept a text input to use for the randomizer function.

Additional context

This enhancement will provide more flexibility and customization options when using the Avatar component, allowing users to easily generate visually distinct avatars with random background colors based on provided text.

Add Table Component

The requested Feature

Add a new component named Table which is a wrapper around the MUI Table component.

Add sample content to `AppBar` component's story

Is your suggestion related to an experience ? Please describe.

The AppBar story is incomplete.

Describe the improvement

Add sample content

Additional context

Need a sleek way to locally link `@oxygen-ui/react` to a project

Is your suggestion related to an experience ? Please describe.

When working with the @oxygen-ui/react package in a project, we should be able to locally link the package to test our changes from within the app.

This should continuously watch for new changes in the oxygen-ui source and update the package on the linked side.

Describe the improvement

Add a build command with watch support.
Document the local linking process.

`Code` component has a fixed font size

Describe the issue:

The Code component has a fixed font size when used within a text block, users will have to manually change the size to match.

How to reproduce:

Use the Code component inside a block of text (use a smaller font size).
Text inside the Code component will not adjust with the parent.

Expected behavior:

Text inside the Code should adjust with the parent.

Environment information (Please complete the following information; remove any unnecessary fields) :

Affected Package: @oxygen-ui/react
Library Version: 1.5.0
OS: Mac
Browser: Google Chrome

Having two options to change the theme is confusing

Is your suggestion related to an experience ? Please describe.
ATM, there are two options to change the theme.

Changes the Manager theme. (Side Panel, and everything on storybooks control)
Changes the story themes(inside the iframe) & manager theme as a result of a custom implementation integrating 1.

Describe the improvement
Since going forward, we are only going with 2, we can hide 1 from the UI.

Additional context
We can't really remove the 1, since it's used in unison to change the entire storybook theme.

https://github.com/wso2/oxygen-ui/blob/main/packages/react/.storybook/preview.tsx#L100

Align component implementation to design

Scope - My Account

Fix spacing/paddings of components
Add font sizes/weights tokens - Depends on #100

Additional context
Figma

wso2 / oxygen-ui Goto Github PK

oxygen-ui's Introduction

Packages

Examples

Documentation

Changelog

Contributing

License

oxygen-ui's People

Contributors

Stargazers

Watchers

Forkers

oxygen-ui's Issues

References

Component list

Inputs

Navigation

Data Display

Feedback

Layout

Theme

Icons

Surfaces

Patterns

Component API

Utils

Optional Fields

Inspiration

Optional Fields

The requested Feature

Recommend Projects

Recommend Topics

Recommend Org