feat: add warning styles to Button (Primary, Secondary, Default, SystemUI)

EightfoldAI / octuple

The Octuple component library

MIT License

17 stars 51 forks source link

feat: add warning styles to Button (Primary, Secondary, Default, SystemUI) #767

Closed ykelkar-eightfold closed 3 months ago

ykelkar-eightfold commented 9 months ago

SUMMARY:

Add warning styles to Button (Primary, Secondary, Default, SystemUI)

GITHUB ISSUE (Open Source Contributors)

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-73493

CHANGE TYPE:

[ ] Bugfix Pull Request
[x] Feature Pull Request

TEST COVERAGE:

[x] Tests for this change already exist
[ ] I have added unittests for this change

TEST PLAN:

Please test locally with warning prop set to true for Primary, Secondary, Default, and SystemUI Buttons.

See the styles below when setting the warning prop to true for the buttons:

https://github.com/EightfoldAI/octuple/assets/102243974/f892532d-bedb-4259-aeb7-02f1af9bef0b

codesandbox-ci[bot] commented 9 months ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4d41443b34df3adcedc58e17de0dfa32884441be:

Sandbox	Source
React	Configuration

codecov[bot] commented 9 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (3d2549c) 85.16% compared to head (4d41443) 85.05%. Report is 3 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #767 +/- ## ========================================== - Coverage 85.16% 85.05% -0.11% ========================================== Files 908 999 +91 Lines 19113 19261 +148 Branches 7075 7118 +43 ========================================== + Hits 16278 16383 +105 - Misses 2753 2796 +43 Partials 82 82 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

ypike-eightfold commented 8 months ago

Hi guys, my question is if the red button (disruptive button) is to make the user stop and think before they click on it to prevent from accidentally deleting, what is the purpose of the orange button for warning? Is it to warn the user before clicking? I think there can be a use case like that but I don't think having a warning button is the right way.

The alternative approach is like a warning tag on the user interface with a button to fix. Please look a the mockup attached.