feat(ui): add fill styles dropdown to style panel#7885
Merged
steveruizok merged 7 commits intomainfrom Feb 11, 2026
Merged
Conversation
Replace the 4th fill button with a dropdown that provides access to additional fill styles (pattern, fill, lined-fill) that were previously hidden from the UI. The first three fill options (none, semi, solid) remain as inline buttons, following the same pattern used by the vertical alignment dropdown. https://claude.ai/code/session_01BwXAEf4pp4F9UopEZq1ZPm
When the current fill value is one of the inline button values (none, semi, solid), the dropdown had no matching item and fell back to the mixed icon. Now falls back to the first dropdown item's icon (pattern) instead, reserving the mixed icon for when multiple shapes truly have different fill values.
Replace multiple rect elements in fill-lined-fill.svg with a single path (adjusted opacity) to simplify the icon, and swap the order of 'fill' and 'lined-fill' entries in STYLES.fillExtra so the lined-fill option appears before the fill option in the UI.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
Contributor
|
API Changes Check Passed Great! The PR description now includes the required "### API changes" section. This helps reviewers and SDK users understand the impact of your changes. |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
image-pipeline-template | fbc1add | Commit Preview URL Branch Preview URL |
Feb 11 2026, 06:51 PM |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
packages/tldraw/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx
Show resolved
Hide resolved
steveruizok
changed the title
Remove items[0]?.icon fallback so no dropdown item appears active when the current value belongs to an inline button (none, semi, solid). Co-Authored-By: Claude Opus 4.6 <[email protected]>
packages/tldraw/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx
Show resolved
Hide resolved
Return the first item's icon when no matching item is found in StylePanelDropdownPicker (use match ?? items[0]?.icon). This prevents an undefined icon when the current value doesn't match any item, improving visual consistency.
Replace pattern with solid in e2e tests since pattern moved to a dropdown popover. Use distinct uiType for the fill dropdown to avoid duplicate data-testid="style.fill" conflicts. Co-Authored-By: Claude Opus 4.6 <[email protected]>
steveruizok
temporarily deployed
to
bemo-canary
GitHub Actions
Inactive
steveruizok
temporarily deployed
to
e2e-dotcom
GitHub Actions
Inactive
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| <StylePanelDropdownPickerInline | ||
| type="icon" | ||
| id="fill-extra" | ||
| uiType="fill-extra" |
There was a problem hiding this comment.
Dropdown uses wrong uiType for translation key lookup
Medium Severity
The StylePanelDropdownPickerInline is passed uiType="fill-extra", which causes translation key lookups like fill-extra-style.pattern, fill-extra-style.lined-fill, and fill-extra-style.fill. These keys don't exist in any translation file — the actual keys use the fill-style. prefix (e.g., fill-style.pattern). This results in broken/missing tooltip text for the dropdown trigger and each dropdown item.
Additional Locations (1)
2 tasks
github-merge-queue bot
pushed a commit
that referenced
this pull request
Feb 11, 2026
…7889) In order to fix a Playwright test failure caused by duplicate `data-testid="style.fill"` elements and missing tooltip translations, this PR adds a `testIdType` prop to `StylePanelDropdownPickerProps` and applies it to the fill-extra dropdown. The fill-extra dropdown introduced in #7885 originally used `uiType="fill-extra"`, which broke tooltip translations (keys like `fill-extra-style.none` don't exist). The first commit fixed this by changing `uiType` back to `"fill"`, but that caused both the button picker and dropdown picker to emit `data-testid="style.fill"`, breaking the Playwright strict mode selector. The second commit adds `testIdType` to decouple the test ID from the translation key, giving the dropdown `data-testid="style.fill-extra"` while keeping `uiType="fill"` for correct translations. ### Change type - [x] `bugfix` ### Test plan 1. Select a geo shape 2. Hover over the fill dropdown button — verify tooltip shows "Fill — Pattern" (not raw keys) 3. Open the dropdown, hover each option — verify all tooltips are translated 4. Run the style panel e2e test — verify `getByTestId('style.fill')` resolves uniquely - [ ] End to end tests ### Release notes - Fixed duplicate test IDs and missing translations in the fill style dropdown. ### API changes - Added optional `testIdType` to `StylePanelDropdownPickerProps` to override the test ID prefix independently of `uiType`
huppy-bot bot
pushed a commit
that referenced
this pull request
Feb 11, 2026
…7889) In order to fix a Playwright test failure caused by duplicate `data-testid="style.fill"` elements and missing tooltip translations, this PR adds a `testIdType` prop to `StylePanelDropdownPickerProps` and applies it to the fill-extra dropdown. The fill-extra dropdown introduced in #7885 originally used `uiType="fill-extra"`, which broke tooltip translations (keys like `fill-extra-style.none` don't exist). The first commit fixed this by changing `uiType` back to `"fill"`, but that caused both the button picker and dropdown picker to emit `data-testid="style.fill"`, breaking the Playwright strict mode selector. The second commit adds `testIdType` to decouple the test ID from the translation key, giving the dropdown `data-testid="style.fill-extra"` while keeping `uiType="fill"` for correct translations. ### Change type - [x] `bugfix` ### Test plan 1. Select a geo shape 2. Hover over the fill dropdown button — verify tooltip shows "Fill — Pattern" (not raw keys) 3. Open the dropdown, hover each option — verify all tooltips are translated 4. Run the style panel e2e test — verify `getByTestId('style.fill')` resolves uniquely - [ ] End to end tests ### Release notes - Fixed duplicate test IDs and missing translations in the fill style dropdown. ### API changes - Added optional `testIdType` to `StylePanelDropdownPickerProps` to override the test ID prefix independently of `uiType`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In order to expose additional fill styles (pattern, fill, lined-fill) that were previously hidden from the UI, this PR replaces the 4th fill button with a dropdown picker. The first three fill options (none, semi, solid) remain as inline buttons, following the same pattern used by the vertical alignment dropdown.
Closes #7578
pr-7885-walkthrough.mp4
Change type
improvementTest plan
Release notes
API changes
fillExtratoSTYLESobject for additional fill style options shown in the dropdownNote
Medium Risk
Moderate risk: changes core style-panel interaction patterns and icon-selection logic, which could regress fill selection or mixed-state display across shape types, but scope is limited to UI/assets and e2e updates.
Overview
Updates the style panel’s fill picker to show
none/semi/solidas inline buttons and moves additional fill options into a new dropdown (fill-extra), including newly-exposedlined-filland the previously-hiddenfilloption.Adds the new
fill-lined-fillicon across the assets pipeline (SVG + generated URL maps/types) and extendsSTYLESwithfillExtrato back the dropdown. The dropdown picker logic is adjusted to show the correct icon for the current value (includingmixed) and to fall back safely when the current value isn’t in the dropdown items.Updates Playwright e2e fixtures/tests to reflect the new fill UI (removing direct access to the old
patternfill button and assertingsolidbehavior instead).Written by Cursor Bugbot for commit fbc1add. This will update automatically on new commits. Configure here.