Skip to content

change: [UIE-9698] - Add Chip Support to Drawer Component Title - #13135

Merged
harsh-akamai merged 5 commits into
linode:developfrom
harsh-akamai:UIE-9698-add-beta-chip-to-drawer
Dec 2, 2025
Merged

change: [UIE-9698] - Add Chip Support to Drawer Component Title#13135
harsh-akamai merged 5 commits into
linode:developfrom
harsh-akamai:UIE-9698-add-beta-chip-to-drawer

Conversation

@harsh-akamai

@harsh-akamai harsh-akamai commented Nov 26, 2025

Copy link
Copy Markdown
Contributor

Description 📝

Add optional title Suffix to the Drawer Title

Changes 🔄

  • Add optional titleSuffix prop to <Drawer/> component
  • Passing a component to titleSuffix renders the component in the Drawer title
  • Add storybook story

Scope 🚢

Upon production release, changes in this PR will be visible to:

  • All customers
  • Some customers (e.g. in Beta or Limited Availability)
  • No customers / Not applicable

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

without titleSuffix prop passing <BetaChip/> to titleSuffix
image image

How to test 🧪

Verification steps

(How to verify changes)

  • Pass a component to titleSuffix prop in one of the existing drawers
  • Observe the component to be present in the Drawer title
  • Ensure that the current drawers do not have a titleSuffix component by default
  • Verify the Drawer storybook addition
Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support


  • I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

  • All tests and CI checks are passing
  • TypeScript compilation succeeded without errors
  • Code passes all linting rules

@harsh-akamai
harsh-akamai marked this pull request as ready for review November 26, 2025 10:38
@harsh-akamai
harsh-akamai requested a review from a team as a code owner November 26, 2025 10:38
@harsh-akamai
harsh-akamai requested review from shagufa-akamai and removed request for a team November 26, 2025 10:38
Comment thread packages/ui/src/components/Drawer/Drawer.test.tsx Outdated
@bnussman-akamai bnussman-akamai added the UX/UI Changes for UI/UX to review label Nov 26, 2025
@pmakode-akamai pmakode-akamai changed the title change: [UIE-9698] - Add Beta Chip for Drawer change: [UIE-9698] - Add Chip Support to Drawer Component Title Nov 28, 2025

@pmakode-akamai pmakode-akamai left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

thanks @harsh-akamai! I left a couple of comments that needs to be addressed. I wasn't able to verify the Storybook due to some build errors (which don't seem related to this PR), but the code itself looks good. Also, the PR description and details appear to be outdated - could those be updated?

Approved pending resolution of the comments

/**
* Adds a suffix element to the drawer.
*
* If set, the drawer will feature a suffix element in the title.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
* If set, the drawer will feature a suffix element in the title.
* Can be used to indicate special states, such as `BetaChip`, `NewFeatureChip`, or other UI elements next to the title.

I think it would be better to document this optional prop to make its usage clearer.

>
{lastTitleRef.current}
</Typography>
<Box display="flex">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
<Box display="flex">
<Box alignItems="center" display="flex">

The chip doesn't appear vertically aligned with the title. I think adding alignItems="center" to the Box should fix the alignment

@pmakode-akamai pmakode-akamai added the Add'tl Approval Needed Waiting on another approval! label Nov 28, 2025
@linode-gh-bot

Copy link
Copy Markdown

Cloud Manager UI test results

🎉 862 passing tests on test run #4 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing862 Passing11 Skipped39m 58s

@github-project-automation github-project-automation Bot moved this from Review to Approved in Cloud Manager Dec 1, 2025
@pmakode-akamai pmakode-akamai added Approved Multiple approvals and ready to merge! Missing Changeset and removed Add'tl Approval Needed Waiting on another approval! labels Dec 2, 2025
@pmakode-akamai

Copy link
Copy Markdown
Contributor

@harsh-akamai it looks like the changeset is missing - let's add one

@harsh-akamai
harsh-akamai requested a review from a team as a code owner December 2, 2025 07:17
@harsh-akamai
harsh-akamai merged commit db0bf58 into linode:develop Dec 2, 2025
34 of 35 checks passed
@github-project-automation github-project-automation Bot moved this from Approved to Merged in Cloud Manager Dec 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Approved Multiple approvals and ready to merge! UX/UI Changes for UI/UX to review

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

4 participants