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

refactor: update UI Kit Icon component [WEB-1699] #8122

Merged
merged 13 commits into from
Oct 16, 2023

Conversation

EmilyBonar
Copy link
Contributor

@EmilyBonar EmilyBonar commented Oct 11, 2023

Description

This PR:

  • converts our old font icons to svgs
  • removes direct imports of antd icons, instead replacing them with our own or, if necessary, routing them through the Icon component until they can be replaced
  • prunes some unused or duplicate icons
  • adds ExperimentIcons to Icon component

Note: The ticket calls for our Logo component to be merged into Icon. I haven't done that yet because Logo has dependencies on our determinedInfo store and handles light vs dark theming and sizing differently than the rest of the icons.

Test Plan

  • Check the Design kit page.
  • Test the animated ExperimentIcons by viewing the play/pause buttons on the ExperimentDetails page of an experiment in the following states:
    • Queued/Scheduled
    • Starting/Pulling
    • Running
    • Active

Commentary (optional)

Checklist

  • Changes have been manually QA'd
  • User-facing API changes need the "User-facing API Change" label.
  • Release notes should be added as a separate file under docs/release-notes/.
    See Release Note for details.
  • Licenses should be included for new code which was copied and/or modified from any external code.

Ticket

@netlify
Copy link

netlify bot commented Oct 11, 2023

Deploy Preview for determined-ui ready!

Name Link
🔨 Latest commit d211fea
🔍 Latest deploy log https://app.netlify.com/sites/determined-ui/deploys/652d5fff142a240008b3f987
😎 Deploy Preview https://deploy-preview-8122--determined-ui.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 configuration.

@EmilyBonar EmilyBonar changed the title refactor: update UI Kit Icon component refactor: update UI Kit Icon component [WEB-1699] Oct 11, 2023
Comment on lines +377 to +378
backgroundColor="white" // only gets applied for scheduled and queued states
opacity={0.25} // only gets applied for scheduled and queued states
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I couldn't figure out how to get the Queued animation to look right without these styles, but if anyone else has an idea please let me know.

@determined-ci
Copy link
Collaborator

determined-ci commented Oct 11, 2023

Hello! DesignKit diffs for commit d211fea are available for you to view here

Copy link
Contributor

@johnkim-det johnkim-det 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, a few comments but nothing blocking merge.

@EmilyBonar EmilyBonar enabled auto-merge (squash) October 16, 2023 15:22
Copy link
Contributor

@ClaireNeveu ClaireNeveu left a comment

Choose a reason for hiding this comment

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

Icon changes look good.

@EmilyBonar EmilyBonar enabled auto-merge (squash) October 16, 2023 16:08
@EmilyBonar EmilyBonar merged commit 515f128 into main Oct 16, 2023
66 of 81 checks passed
@EmilyBonar EmilyBonar deleted the emilybonar/update-icon branch October 16, 2023 16:15
@dannysauer dannysauer added this to the 0.26.2 milestone Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants