Could someone review my changes?

[pmiller-twilio]

I have been migrating the Usage and Billing page within Settings to paste for a while now and I think I'm done. I am asking if someone will help me with a PR review. I'm looking for a sanity check on how I'm using the components.

Basic stuff like if I'm using the correct component. Am I violating some rule I'm not aware of. Am I using the color tokens correctly. There are some places were I had to use a style prop because I couldn't figure out how to do it otherwise. That kind of stuff.

One note I'll say is that we are still using recharts and not highcharts. I know that this is still outstanding work but it won't be done as part of this project.

https://github.com/segmentio/app/pull/18499

Let me know if there is a better place to make this request.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sure, I'd be happy to help with a PR review! However, as a representative of the Paste design system, I can't directly access your GitHub repository. I recommend reaching out to your team or colleagues who are familiar with Paste for a more in-depth review.

In the meantime, here are some general tips based on our documentation:

1. Check if there's more than one <Theme.Provider> and update all of them, or remove the extra ones if they are unnecessary.
2. Make sure you aren't overriding any Paste component styles with CSS classes or selectors. The <Theme.Provider> cannot access these styles, so they do not get updated.
3. Check that you are using Paste tokens when styling custom components. See our guidelines for theming custom components for more information.
4. Paste works with any internationalization library. Our components occasionally contain English text, but all instances are overridable with props. They are easily identifiable as they include i18n in their names.
5. If you're customizing components, use Paste’s Customization Provider API to customize individual components or create entirely new ones based on existing components.

If you have any specific questions or run into issues, feel free to start a discussion on GitHub. Paste is free and open-source, so all you need is a free GitHub account to post questions. If you spot a bug or error, you can file an issue as well.

I hope this helps, and good luck with your project!

---

Here are some similar discussions:

• Flex Entry Page (updated: 2022-09-12T18:46:59Z, similarity score: 0.84)
• Review of Number Compliance Manager (Office Hours: Thu Dec 3) (updated: 2020-12-14T17:12:46Z, similarity score: 0.84)
• Styling on animated modal transition (Office hours: 9/24/2020) (updated: 2022-11-18T00:00:08Z, similarity score: 0.84)

[serifluous]

Hey @pmiller-twilio ! You can sign up for an office hours session, and we can walk through some of these questions together: https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit#gid=664218049 If you can invite a Segment designer you're partnering with, that'd be even better.

We can't access the Segment repo, unfortunately. But if you want some feedback async on component & token usage, you can share some screenshots, screen recordings, or codesandbox reproductions.

[SiTaggart]

Thanks for coming to Office Hours @pmiller-twilio.

Overall, very decent implementation.

There were maybe a couple of instances where you implemented custom components that already existed, like the Disclosure and Meter. This is likely a familiarity and discovery learning curve.

As discussed, the visualization tokens are intentionally restrictive to highcharts use, as Highcharts will do most of the work for you. We don't expose them as background or text colors because we want you to use Highcharts.

As discussed though, the key/legend was likely redundant and could be removed, the Meter component should be used to swap out the custom bar data viz.

Thanks again!