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

New Tabs component #8186

Conversation

ccschmitz
Copy link
Contributor

@ccschmitz ccschmitz commented Apr 3, 2024

Summary

This PR contains updates to our tabbed UIs and components:

  1. Creates a new Tabs component. This component is different from the previous iterations because it implements the latest designs, provides a more flexible component-based API, provides different sizes of tabs, and leverages Ariakit's tab components under the hood.
  2. Updates all usages of the antd and old UI package's Tabs components to use the new ones.
  3. Deletes the old UI Tabs components from packages/ui and frontend/src/components`.

How did you test this change?

Click tested the following areas of the app and contrasted what we have in production with the PR preview:

  • Sessions - right panel
  • Sessions - dev tools
  • Sessions - network resource panel
  • Traces - trace panel
  • Project settings
  • Workspace settings

Are there any deployment considerations?

N/A - all client-side visual changes.

Does this work require review from our design team?

Will have @julian-highlight review these changes in the PR preview before merging.

Copy link

linear bot commented Apr 3, 2024

Copy link

changeset-bot bot commented Apr 3, 2024

⚠️ No Changeset found

Latest commit: b8926bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR
Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

@reflame reflame bot had a problem deploying to Preview April 4, 2024 19:07 Error
@reflame reflame bot had a problem deploying to Preview April 4, 2024 19:12 Error
@ccschmitz ccschmitz requested review from a team and SpennyNDaJets and removed request for a team April 5, 2024 01:23
@ccschmitz ccschmitz marked this pull request as ready for review April 5, 2024 01:23
Copy link
Contributor

@SpennyNDaJets SpennyNDaJets left a comment

Choose a reason for hiding this comment

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

Code and click test look great!

image

@ccschmitz ccschmitz enabled auto-merge (squash) April 5, 2024 15:19
@ccschmitz ccschmitz merged commit f3e5868 into main Apr 5, 2024
13 checks passed
@ccschmitz ccschmitz deleted the hig-4289-update-tab-menus-to-use-highlight-components-instead-of-antd branch April 5, 2024 15:44
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.

None yet

2 participants