Skip to content

Add blazor and react wrapper for nimble chip#2925

Open
hellovolcano wants to merge 3 commits intomainfrom
users/vgleason/chips
Open

Add blazor and react wrapper for nimble chip#2925
hellovolcano wants to merge 3 commits intomainfrom
users/vgleason/chips

Conversation

@hellovolcano
Copy link
Copy Markdown
Contributor

Pull Request

🤨 Rationale

A blazor client application needs the nimble chip.

👩‍💻 Implementation

  • Added nimble chip to all-components.ts
  • Added Blazor and react wrappers.
  • Added Blazor tests.
  • Added chips to example apps for both Blazor and React.

🧪 Testing

Ran existing tests
Added and ran blazor tests
Manually verified

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@hellovolcano hellovolcano marked this pull request as ready for review April 10, 2026 21:45
<div className="container-label">Chip</div>
<NimbleChip>Outline Chip</NimbleChip>
<NimbleChip appearance="block">Block Chip</NimbleChip>
<NimbleChip removable>Removable Chip</NimbleChip>
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.

In the Angular app we listen to the remove event and popup a message if the remove button is clicked. Not a must-have, but if it's easy to add equivalent functionality to this app, that would be good.

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.

Same comment applies to the Blazor app.

@@ -0,0 +1,7 @@
{
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.

Could you also update the component status table?

{
componentName: 'Chip',
componentHref: './?path=/docs/components-chip--docs',
designHref:
'https://www.figma.com/design/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?node-id=2227-78839&p=f&t=jqn5mzroV2yUvbvC-0',
designLabel: 'Figma',
library: 'nimble',
componentStatus: ComponentFrameworkStatus.ready,
angularStatus: ComponentFrameworkStatus.ready,
blazorStatus: ComponentFrameworkStatus.doesNotExist,
reactStatus: ComponentFrameworkStatus.doesNotExist
},


namespace NimbleBlazor;

public partial class NimbleChip : ComponentBase
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.

Looks like you're missing an EventCallback for Remove. You can see the banner for an example.

public EventCallback<bool> OpenChanged { get; set; }

@jattasNI
Copy link
Copy Markdown
Contributor

FYI @rajsite refactored the example apps in #2926 so there will be a bit of conflict resolution and new pattern adoption needed for this PR.

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