Skip to content

refactor: Remove unused scss#7194

Open
kyle-ssg wants to merge 5 commits intomainfrom
chore/remove-unused-scss
Open

refactor: Remove unused scss#7194
kyle-ssg wants to merge 5 commits intomainfrom
chore/remove-unused-scss

Conversation

@kyle-ssg
Copy link
Copy Markdown
Member

@kyle-ssg kyle-ssg commented Apr 9, 2026

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

  • Added commands for generating visual baselines locally (can't just download from GitHub since that's different OS etc)
  • Removed unused scss, quick wins on reusing bootstrap utils

How did you test this code?

Visual regression tests show 0 regressions

kyle-ssg and others added 5 commits April 9, 2026 20:27
Remove dead CSS selectors, unused mixin files, and entirely unused
component styles identified by cross-referencing class names against
the codebase.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add `npm run test:visual:baselines` which checks out main, runs E2E
with VISUAL_REGRESSION=1 to capture baseline screenshots locally, then
switches back to the current branch. Both runs use the same machine so
diffs reflect actual style changes, not platform rendering differences.

Also adds `npm run test:visual:baselines:ci` to download baselines from
CI artifacts, and `/visual-regression` Claude Code command.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The roles test was capturing the users-and-permissions snapshot while
a toast from createFeature was still visible, causing flaky visual
regression diffs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove images, dropdown, button-group, nav, navbar, breadcrumb, close,
and spinners Bootstrap imports. The codebase uses custom components
for all of these (InlineModal, ButtonDropdown, Loader, etc).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove ~330 lines from _spacing-utils.scss (duplicated BS5 spacing)
  Keep only ml-*/mr-*/pl-*/pr-* (BS4 naming compat), mt-n1, px-md-5
- Remove 6 duplicate utility classes from _utils.scss that BS5 generates
- Rename custom classes to BS5 equivalents in components:
  float-right -> float-end, relative -> position-relative,
  text-left -> text-start, align-start -> align-items-start,
  pointer-events-none -> pe-none, left-0 -> start-0

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@kyle-ssg kyle-ssg requested a review from a team as a code owner April 9, 2026 20:55
@kyle-ssg kyle-ssg requested review from Zaimwa9 and removed request for a team April 9, 2026 20:55
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

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

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 9, 2026

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 9, 2026 8:56pm
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 9, 2026 8:56pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Apr 9, 2026 8:56pm

Request Review

@github-actions github-actions bot added front-end Issue related to the React Front End Dashboard refactor labels Apr 9, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7194 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7194 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-7194 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7194 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-e2e:pr-7194 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-frontend:pr-7194 Finished ✅ Results

@kyle-ssg kyle-ssg requested a review from talissoncosta April 9, 2026 20:57
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  9.3 seconds
commit  380f8b9
info  🔄 Run: #15946 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  1.7 seconds
commit  380f8b9
info  🔄 Run: #15946 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  47.1 seconds
commit  380f8b9
info  🔄 Run: #15946 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 1 second
commit  380f8b9
info  🔄 Run: #15946 (attempt 1)

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

Visual Regression

16 screenshots compared. See report for details.
View full report

@kyle-ssg
Copy link
Copy Markdown
Member Author

kyle-ssg commented Apr 9, 2026

Added you as a reviewer manually @talissoncosta as I wasn't sure whether some of your work compliments component testing this?

<Flex className='mb-2' style={{ position: 'relative' }}>
<Flex
className='mb-2'
style={{ position: 'position-relative' }}
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.

We should use position-relative as a class instead of inline style


{sorting && (
<Row className='mr-3 relative'>
<Row className='mr-3position-relative'>
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.

Missing space between classes.

@talissoncosta
Copy link
Copy Markdown
Contributor

@kyle-ssg

Yeah, Chromatic is already running on this PR — 68 UI tests unchanged. Not much help right now since we don't have many components in Storybook yet, but once #7100 lands with the new stories, Chromatic will give much better coverage for this kind of SCSS cleanup.

image

Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta left a comment

Choose a reason for hiding this comment

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

Nice cleanup. @kyle-ssg. Thanks for that

Flagged two small issues. I checked the preview and couldn't spot visual regressions from either, but they're still broken classes that should be fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

front-end Issue related to the React Front End Dashboard refactor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants