Coder Social home page Coder Social logo

wso2 / oxygen-ui Goto Github PK

View Code? Open in Web Editor NEW
42.0 161.0 23.0 6.74 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 Issues

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.

Icon library has some issues

Describe the issue:

  • The stroke widths are too narrow and doesn't have consistency.
Screenshot 2023-08-06 at 19 10 50
  • 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]

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:

  1. Build storybook static.

    cd packages/react
pnpm build:storybook

  2. 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]

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

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.

image

Refer react docs.

How to reproduce:

  1. Create a new react application.
  2. Install the @oxygen-ui/react library by running pnpm i @oxygen-ui/react.
  3. Import and use a component from the @oxygen-ui/react library which uses default props (e.g., Typography, Input, Drawer).
  4. 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

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.

Screenshot 2023-10-24 at 15 29 51

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

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.

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.

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

Describe the issue:

Header components Avatar letter is appearing in lowercase

Screenshot 2023-10-26 at 02 03 27

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

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.

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

`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.

Screenshot 2023-11-02 at 17 49 17

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

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

`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]

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

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:

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

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.

[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

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.

💅 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

Layout

Theme

Icons

Surfaces

Patterns

Component API

Utils

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.

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.

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.

Screenshot 2024-01-09 at 10 57 09

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

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:
image

Additional context
N/A

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.
image

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

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

[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

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.

Screenshot 2023-11-24 at 06 36 40

Describe the improvement

Need to update this to a modern style:

Inspiration

Screenshot 2023-11-24 at 06 34 31

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.

Screenshot 2023-03-30 at 21 49 30

  1. Changes the Manager theme. (Side Panel, and everything on storybooks control)
  2. 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.

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:

  1. Checkout main branch.
  2. 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:

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;
}
Screenshot 2023-11-19 at 11 53 25

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

`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.

Screenshot 2023-10-24 at 10 44 08

How to reproduce:

  1. Use Select component with a FormControl and add fullWidth to the FormControl.
  2. 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

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.

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:

Screenshot 2024-02-01 at 11 23 12

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

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.

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:
image

How to reproduce:

  1. Create a React application with Typescript.
  2. Install @oxygen-ui/react.
  3. 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

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.

`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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.