Skip to content

[dapp-kit-next]: expose ::part(trigger) for connect button styling#888

Merged
hayes-mysten merged 8 commits intomainfrom
williamrobertson13/connect-btn-part
Feb 23, 2026
Merged

[dapp-kit-next]: expose ::part(trigger) for connect button styling#888
hayes-mysten merged 8 commits intomainfrom
williamrobertson13/connect-btn-part

Conversation

@williamrobertson13
Copy link
Contributor

@williamrobertson13 williamrobertson13 commented Feb 20, 2026

Summary

  • Adds a trigger CSS part on the connect button's underlying <button>/<a> element, forwarded through the shadow DOM chain via exportparts
  • Provides an alternative to PR feat(dapp-kit): add CSS variables for connect button sizing and layout #857's CSS variable approach — consumers get full CSS control over the button via ::part(trigger) while the component still manages content (account icon, name, chevron)
  • Adds a storybook story (WithCustomTriggerPart) demonstrating custom padding, height, border-radius, and colors
image

Usage

mysten-dapp-kit-connect-button::part(trigger) {
  height: 56px;
  padding: 12px 32px;
  border-radius: 999px;
  background-color: #e63946;
}

Test plan

  • Verify the WithCustomTriggerPart story in storybook renders with custom styles applied
  • Verify the default stories are unchanged (no visual regression)
  • Verify ::part(trigger) works in both connected and disconnected states

AI Assistance Notice

  • This PR was primarily written by AI.

🤖 Generated with Claude Code

…omization

Adds a `trigger` CSS part through the shadow DOM chain (button -> connected-account-menu -> connect-button) so consumers can style the button with ::part(trigger) without needing CSS variables or recreating the dropdown.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@williamrobertson13 williamrobertson13 requested a review from a team as a code owner February 20, 2026 17:58
@williamrobertson13 williamrobertson13 temporarily deployed to sui-typescript-aws-kms-test-env February 20, 2026 17:58 — with GitHub Actions Inactive
@vercel
Copy link

vercel bot commented Feb 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
sui-typescript-docs Ready Ready Preview, Comment Feb 23, 2026 9:05pm

Request Review

@williamrobertson13 williamrobertson13 temporarily deployed to sui-typescript-aws-kms-test-env February 20, 2026 18:34 — with GitHub Actions Inactive
@williamrobertson13 williamrobertson13 changed the title feat(dapp-kit): expose ::part(trigger) for connect button styling [dapp-kit-next]: expose ::part(trigger) for connect button styling Feb 20, 2026
@williamrobertson13 williamrobertson13 self-assigned this Feb 20, 2026
@williamrobertson13 williamrobertson13 temporarily deployed to sui-typescript-aws-kms-test-env February 20, 2026 19:59 — with GitHub Actions Inactive
@williamrobertson13 williamrobertson13 temporarily deployed to sui-typescript-aws-kms-test-env February 20, 2026 20:07 — with GitHub Actions Inactive
"overrides": {
"axios": "^1.13.5"
"axios": "^1.13.5",
"markdown-it@>=13.0.0 <14.1.1": ">=14.1.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

audit CI was failing

import type { StorybookConfig } from '@storybook/web-components-vite';

import { join, dirname } from 'path';
import { dirname } from 'path';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Storybook was broken

Resolve merge conflicts in package.json (combine overrides from both branches,
adopting main's simpler minimatch override format) and regenerate pnpm-lock.yaml.
@clud-bot clud-bot bot temporarily deployed to sui-typescript-aws-kms-test-env February 23, 2026 21:00 Inactive
@hayes-mysten hayes-mysten merged commit ded6fd2 into main Feb 23, 2026
8 checks passed
@hayes-mysten hayes-mysten deleted the williamrobertson13/connect-btn-part branch February 23, 2026 21:29
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