Repository navigation
fix(IconButton): Make icon buttons readable in dark mode - #8805
Open
talissoncosta wants to merge 11 commits into
Open
talissoncosta wants to merge 11 commits into
talissoncosta wants to merge 11 commits into
Conversation
…w the theme The icons hardcoded a grey fill that disappeared on dark surfaces, and the action menu matched the card behind it. The menu now uses surface, border and shadow tokens. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…y variant A 16px icon in a medium button sat in the top-left corner of its 20px slot. Secondary drew a pure white icon on dark and shared one style between hover and active. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…con theme Every btn-with-icon and theme='icon' button now uses IconButton, so icons follow the theme instead of a hardcoded grey, and each gets an aria-label. Removes the icon theme and the .btn-with-icon/.btn-icon styles. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
📝 Walkthrough
Merge Risk: 🔵 Low · up to
|
github-actions
Bot
added
front-end
…ts to it Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…nd keep Remove Override secondary Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…secondary variant Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…print Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…tons Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
- Configuration used: Organization UI
- Review profile: ASSERTIVE
- Plan: Advanced
- Run ID:
452da31b-7992-4882-a653-7fa972099c21
📒 Files selected for processing: 47
frontend/documentation/components/Button.stories.tsxfrontend/web/components/ActionButton.tsxfrontend/web/components/CompareEnvironments/CompareEnvironments.tsxfrontend/web/components/CompareIdentities.tsxfrontend/web/components/CopyField.tsxfrontend/web/components/ExternalResourcesTable.tsxfrontend/web/components/GithubRepositoriesTable.tsxfrontend/web/components/IdentityTraits.tsxfrontend/web/components/ManagementAPIKeys.jsfrontend/web/components/RolesTable.tsxfrontend/web/components/SegmentOverrideActions.tsxfrontend/web/components/ThemeToggle/ThemeToggle.tsxfrontend/web/components/UserAction.tsxfrontend/web/components/UserGroupList.tsxfrontend/web/components/base/IconButton/IconButton.scssfrontend/web/components/base/forms/Button.tsxfrontend/web/components/experiments/AudienceSegmentList/AudienceSegmentList.tsxfrontend/web/components/experiments/MetricsTable/MetricsTable.scssfrontend/web/components/experiments/MetricsTable/MetricsTable.tsxfrontend/web/components/feature-override/FeatureOverrideRow.tsxfrontend/web/components/feature-summary/FeatureAction.tsxfrontend/web/components/feature-summary/FeatureName.tsxfrontend/web/components/feature-summary/FeatureRow.tsxfrontend/web/components/metadata/ContentTypesMetadataFieldTable.tsxfrontend/web/components/metadata/MetadataPage.tsxfrontend/web/components/modals/AuditLogWebhooks.tsxfrontend/web/components/modals/CreateGroup.tsxfrontend/web/components/modals/InviteUsers.tsxfrontend/web/components/modals/create-feature/tabs/IdentityOverridesTab.tsxfrontend/web/components/pages/GitHubSetupPage.tsxfrontend/web/components/pages/IdentitiesPage.tsxfrontend/web/components/pages/SegmentPage.tsxfrontend/web/components/pages/UsersAndPermissionsPage.tsxfrontend/web/components/pages/environment-settings/EnvironmentSettingsPage.tsxfrontend/web/components/pages/environment-settings/tabs/cohort-sync-tab/CohortSyncTab.tsxfrontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsxfrontend/web/components/pages/organisation-settings/tabs/sso/saml/SAMLAttributeMappingTable.tsxfrontend/web/components/pages/organisation-settings/tabs/sso/saml/index.tsxfrontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationshipModal/TrustRelationshipModal.tsxfrontend/web/components/pages/organisation-settings/tabs/trust-relationships/TrustRelationships/TrustRelationships.tsxfrontend/web/components/pages/project-settings/tabs/EditHealthProvider.tsxfrontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsxfrontend/web/components/release-pipelines/StageArrow.tsxfrontend/web/components/segments/Rule/components/RuleConditionRow.tsxfrontend/web/components/segments/SegmentRow/components/SegmentAction.tsxfrontend/web/styles/project/_FeaturesPage.scssfrontend/web/styles/project/_buttons.scss
💤 Files with no reviewable changes: 4
- frontend/web/components/base/forms/Button.tsx
- frontend/web/components/experiments/MetricsTable/MetricsTable.scss
- frontend/web/styles/project/_buttons.scss
- frontend/documentation/components/Button.stories.tsx
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.
…'s light one Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…le in E2E The kebab and user actions now say which feature, segment or user they act on, so the E2E helpers select them by accessible name and data-test goes. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
talissoncosta
changed the title
talissoncosta
marked this pull request as ready for review
October 19, 2026 09:51
Contributor
Docker builds report
|
Contributor
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #22575 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
🗂️ Previous results✅ private-cloud · depot-ubuntu-latest-16 — run #22575 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #22575 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #22575 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
|
Contributor
Visual Regression24 screenshots compared. See report for details. |
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
- Configuration used: Organization UI
- Review profile: ASSERTIVE
- Plan: Advanced
- Run ID:
a1fb3823-c913-49df-952a-02b9474011f0
📒 Files selected for processing: 13
frontend/e2e/helpers/e2e-helpers.playwright.tsfrontend/web/components/ActionButton.tsxfrontend/web/components/EditPermissions.tsxfrontend/web/components/SegmentOverrideActions.tsxfrontend/web/components/SegmentOverrides.jsfrontend/web/components/UserAction.tsxfrontend/web/components/base/forms/ButtonDropdown.tsxfrontend/web/components/feature-summary/FeatureAction.tsxfrontend/web/components/feature-summary/FeatureRow.tsxfrontend/web/components/segments/SegmentRow/SegmentRow.tsxfrontend/web/components/segments/SegmentRow/components/SegmentAction.tsxfrontend/web/components/users-permissions/OrganisationUsersTable/components/OrganisationUsersTableRow.tsxfrontend/web/styles/project/_FeaturesPage.scss
💤 Files with no reviewable changes: 1
- frontend/web/styles/project/_FeaturesPage.scss
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.
| > | ||
| {({ permission }) => ( | ||
| <SegmentOverrideActions | ||
| segmentName={name || v.segment_name} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🔎 Supported by static analysis
🏁 Script executed:
set -eu
printf '%s\n' '--- diff ---'
git diff --unified=80 e40b88bed0c95d1c0338aead3e3c44c59f01cab2 807584f7d8b353827e452909b4d0c50f3273a940 -- frontend/web/components/SegmentOverrides.js
printf '%s\n' '--- definitions and references ---'
rg -n -F --glob 'frontend/web/components/SegmentOverrides.js' -e 'getOverrideLabel' -e 'SegmentOverrideActions' -e 'segmentName=' frontend/web/components/SegmentOverrides.js
printf '%s\n' '--- relevant file ---'
nl -ba frontend/web/components/SegmentOverrides.js | sed -n '1,280p'Repository: Flagsmith/flagsmith
Length of output: 18849
🏁 Script executed:
set -eu
printf '%s\n' '--- action component ---'
nl -ba frontend/web/components/SegmentOverrideActions.js
printf '%s\n' '--- SegmentOverrideInner references and surrounding callers ---'
rg -n -F --glob 'frontend/web/**' -e '<SegmentOverrideInner' -e 'SegmentOverrideInner' -e 'segment_name' -e 'name=' frontend/web/components frontend/web | sed -n '1,240p'
printf '%s\n' '--- exact caller regions ---'
rg -n -F --glob 'frontend/web/**' '<SegmentOverrides' frontend/web | sed -n '1,120p'Repository: Flagsmith/flagsmith
Length of output: 263
🏁 Script executed:
set -eu
printf '%s\n' '--- import candidates ---'
find frontend/web/components -maxdepth 3 \( -iname 'SegmentOverrideActions*' -o -iname '*ActionButton*' \) -print
printf '%s\n' '--- resolved component references ---'
rg -n -F --glob 'frontend/web/**' -e 'segmentName' -e 'ActionButton' -e '<SegmentOverrideInner' -e 'SegmentOverrideInner' frontend/web/components frontend/web || test "$?" -eq 1Repository: Flagsmith/flagsmith
Length of output: 6183
🏁 Script executed:
set -eu
printf '%s\n' '--- SegmentOverrideActions.tsx ---'
nl -ba frontend/web/components/SegmentOverrideActions.tsx | sed -n '1,150p'
printf '%s\n' '--- ActionButton.tsx ---'
nl -ba frontend/web/components/ActionButton.tsx | sed -n '1,90p'
printf '%s\n' '--- SegmentOverrideInner call sites ---'
nl -ba frontend/web/components/SegmentOverrides.js | sed -n '330,490p'
printf '%s\n' '--- relevant prop construction ---'
rg -n -F --glob 'frontend/web/**' -e 'segmentOverrides' -e 'segment_overrides' -e '<SegmentOverrides' -e 'name:' frontend/web/components frontend/web | sed -n '1,260p'Repository: Flagsmith/flagsmith
Length of output: 42524
🏁 Script executed:
set -eu
nl -ba frontend/web/components/SegmentOverrides.js | sed -n '490,680p'
printf '%s\n' '--- all SegmentOverrideListInner call sites ---'
rg -n -F --glob 'frontend/web/**' -e 'SegmentOverrideListInner' -e 'SegmentOverrideList' -e '<SegmentOverrides' frontend/web/components frontend/web | sed -n '1,160p'Repository: Flagsmith/flagsmith
Length of output: 8692
🏁 Script executed:
set -eu
printf '%s\n' '--- wrapper render ---'
nl -ba frontend/web/components/SegmentOverrides.js | sed -n '680,790p'
printf '%s\n' '--- SegmentOverridesTab caller ---'
nl -ba frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx | sed -n '180,260p'
printf '%s\n' '--- SegmentOverrides imports and props ---'
rg -n -F --glob 'frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx' -e 'value=' -e 'segment_name' -e 'segmentOverrides' -e 'segment_overrides' -e 'name=' frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsxRepository: Flagsmith/flagsmith
Length of output: 8755
🏁 Script executed:
set -eu
printf '%s\n' '--- SegmentOverrideValue declarations/imports ---'
rg -n -F --glob 'frontend/web/**' -e 'SegmentOverrideValue' frontend/web common api | sed -n '1,180p'
printf '%s\n' '--- segment override data references ---'
rg -n -F --glob 'frontend/web/**' -e 'segment_overrides' -e 'segmentOverrides' frontend/web/components/modals/create-feature frontend/web/common frontend/web | sed -n '1,220p'Repository: Flagsmith/flagsmith
Length of output: 6565
🏁 Script executed:
set -eu
nl -ba frontend/web/components/modals/create-feature/tabs/SegmentOverridesTab.tsx | sed -n '1,105p'
printf '%s\n' '--- feature initial data and segment updates ---'
nl -ba frontend/web/components/modals/create-feature/index.tsx | sed -n '380,420p;590,625p;675,700p'Repository: Flagsmith/flagsmith
Length of output: 9227
Use the complete override label for segmentName.
If a saved override contains name but omits segment_name, the normal caller provides no row-level name. The current action label therefore becomes More actions for undefined. Use the existing fallback helper.
Suggested fix
--- "a/frontend/web/components/SegmentOverrides.js"
+++ "b/frontend/web/components/SegmentOverrides.js"
@@ -212,7 +212,7 @@
>
{({ permission }) => (
<SegmentOverrideActions
- segmentName={name || v.segment_name}
+ segmentName={getOverrideLabel(v)}
hideViewSegment={hideViewSegment}
canCompare={canCompare}
onCompare={onCompare}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| segmentName={name || v.segment_name} | |
| segmentName={getOverrideLabel(v)} |
This branch was successfully deployed
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
1 participant
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
In dark mode, the kebab button's icon was nearly invisible and its menu blended into the card. Both came from hardcoded light colours, and the same grey (
#656D7B) was copied into most icon-only buttons.btn-with-iconandtheme='icon'button now usesIconButton, so icons follow the theme. Each button has anaria-labelnaming its row, and the kebab exposesaria-expanded.icontheme fromButtonand the.btn-with-icon/.btn-iconstyles.IconButton: icons are centred in their slot, andsecondaryuses a grey icon with its own active state. The two IconButtons already on main (FeatureRowback arrow,PrerequisitesTable) areghost, so only the centring reaches them.Reviewing this
Review by commit. The first two hold the decisions; the third is the same swap repeated.
btn-with-icon, default (44px)secondary,large(44px)btn-with-icon,small(40px): metrics table, user actionssecondary,medium(36px)secondary,medium(36px)xSmall, 32px)secondary,small(28px)theme='icon'(32px)ghost,small(28px)CopyFieldsecondary,large(44px)outline,small, roundButtons that had a box keep one (
secondary); buttons that had none stay boxless (ghost). Hover no longer turns the icon purple. It darkens the box and the icon instead.How did you test this code?
Typecheck and lint show no new errors. Manual QA in light and dark mode, ticked as checked:
CopyFieldnext to an API key.