Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Button): redesign of existing Button component #3473

Merged
merged 6 commits into from
Jun 15, 2023

Conversation

jbocce
Copy link
Collaborator

@jbocce jbocce commented Jun 13, 2023

Context

New Button component designs thanks to @dan-rukas (see the screen shots below). The redesign improves various items:

  1. A consistent look-and-feel with the rest of OHIF with better button styles, sizes and colours

  2. A reduction in complexity for developers using the Button. The previous Button component allowed for many (too many) variant, colour and border permutations, making for a confusing developer experience. Furthermore, with so many permutations, maintaining a consistent button look-and-feel proved to be very difficult. Now there are four basic permutations:

<Button type={ButtonEnums.type.primary} size={ButtonEnums.size.medium}/>
<Button type={ButtonEnums.type.secondary} size={ButtonEnums.size.medium}/>
<Button type={ButtonEnums.type.primary} size={ButtonEnums.size.small}/>
<Button type={ButtonEnums.type.secondary} size={ButtonEnums.size.small}/>
  1. A disabled button is no longer a variant or type, but instead just a boolean attribute of the Button like so...
<Button disabled={true}}/>

image

image

image

image

Changes & Results

  • Copied ui/Button to ui/LegacyButton and replaced Button with LegacyButton in ButtonGroup components.
  • Altered the Button component to match the new styles.
  • Updated various uses of the Button component.
  • Uses of Button component that did NOT match the new design were changed to LegacyButton.
  • LegacyButton uses will be changed/addressed in future redesigns.
  • Updated the Button Storybook.

Testing

All the various uses of Button should reflect the new design. Those that do NOT include...

  • ButtonGroup buttons
    image
  • various Worklist buttons like those for launching modes and clearing filters

Checklist

PR

  • [] My Pull Request title is descriptive, accurate and follows the
    semantic-release format and guidelines.

Code

  • My code has been well-documented (function documentation, inline comments,
    etc.)

Public Documentation Updates

  • The documentation page has been updated as necessary for any public API
    additions or removals.

Tested Environment

  • OS: Windows 11
  • Node version: 16.14.0
  • Browser: Chrome 114.0.5735.110

jbocce added 2 commits June 13, 2023 16:01
Updated various uses of the Button component.
Uses of Button component that did NOT match the new design were changed to LegacyButton.
LegacyButton uses will be changed/addressed in future redesigns.
Updated the Button Storybook.
@netlify
Copy link

netlify bot commented Jun 13, 2023

Deploy Preview for ohif-dev ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/ohif-dev/deploys/648b42078fd0e6287a547c58
😎 Deploy Preview https://deploy-preview-3473--ohif-dev.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jun 13, 2023

Deploy Preview for ohif-platform-docs ready!

Name Link
🔨 Latest commit 155cd2c
🔍 Latest deploy log https://app.netlify.com/sites/ohif-platform-docs/deploys/648b404bf0bdfb0007037d64
😎 Deploy Preview https://deploy-preview-3473--ohif-platform-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@jbocce jbocce requested a review from sedghi June 13, 2023 20:47
@codecov
Copy link

codecov bot commented Jun 13, 2023

Codecov Report

Merging #3473 (155cd2c) into master (2890635) will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #3473   +/-   ##
=======================================
  Coverage   38.27%   38.27%           
=======================================
  Files          82       82           
  Lines        1348     1348           
  Branches      303      303           
=======================================
  Hits          516      516           
  Misses        666      666           
  Partials      166      166           

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3dce70e...155cd2c. Read the comment docs.

Copy link
Member

@sedghi sedghi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, see my comments and maybe update the PR before the first image to explain that this is done to reduce the complexity of variants and colors and etc etc, and maybe just mention the 4 different syntaxes they can use now (instead of who knows how many before)

Added TODOs for every LegacyButton reference.
Updated the look-and-feel for the viewport notification banner/dialogue.
Added a minimum width for text-only buttons. Those with icons do not get a minimum width.
@jbocce
Copy link
Collaborator Author

jbocce commented Jun 14, 2023

Looks great, see my comments and maybe update the PR before the first image to explain that this is done to reduce the complexity of variants and colors and etc etc, and maybe just mention the 4 different syntaxes they can use now (instead of who knows how many before)

Thanks. I updated the PR overview.

Copy link
Member

@sedghi sedghi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks for taking care of this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants