Skip to content

feat: improve SliderControls CustomStyles story - #1022

Merged
p-m-p merged 3 commits into
mainfrom
improve-slider-controls-story
Jun 21, 2025
Merged

feat: improve SliderControls CustomStyles story#1022
p-m-p merged 3 commits into
mainfrom
improve-slider-controls-story

Conversation

@p-m-p

@p-m-p p-m-p commented Jun 21, 2025

Copy link
Copy Markdown
Owner

Summary

  • Rename ProfessionalStyled to CustomStyles for better clarity
  • Update visual design with neutral grey gradient and glassmorphism effects
  • Fix CSS custom property naming and remove unsupported variables
  • Improve spacing, sizing, and overall presentation
  • Add guidance to CLAUDE.md about auto-merge usage

Changes Made

  • Story Rename: ProfessionalStyled → CustomStyles for clearer naming
  • Visual Updates:
    • Changed from purple to neutral grey gradient background
    • Reduced button size from 56px to 44px for better proportions
    • Simplified wrapper styling for cleaner presentation
  • CSS Variable Fixes:
    • Fixed icon property names (--play-icon → --bs-play-icon, etc.)
    • Removed 7 unsupported CSS variables that had no effect
    • Kept only the 13 variables actually supported by the component
  • Documentation: Added auto-merge guidance to CLAUDE.md

Test plan

  • Verify story renders correctly in Storybook
  • Confirm all CSS variables now work as expected
  • Test button interactions and hover states
  • Validate improved visual design and spacing

🤖 Generated with Claude Code

@changeset-bot

changeset-bot Bot commented Jun 21, 2025 •
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: f339a02

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

p-m-p and others added 2 commits June 21, 2025 09:18
@p-m-p @claude
style: simplify CustomStyles story styling
a398985 
Remove unnecessary styling properties and simplify the wrapper design
for cleaner presentation of the slider controls customization example.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@p-m-p @claude
docs: update CLAUDE.md with auto-merge guidance
e8df4bc 
Add note to only enable auto-merge on PRs when explicitly requested.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@p-m-p
p-m-p force-pushed the improve-slider-controls-story branch from 6914fa9 to e8df4bc Compare June 21, 2025 08:18
@p-m-p @claude
feat: add CustomButtons story for SliderControls
f339a02 
Add new story demonstrating how to use custom buttons through slots:
- Custom prev/next buttons with arrow text
- Custom play/pause button with emoji
- Custom index buttons with numbers
- Minimal styling with basic padding and borders
- Shows slot-based customization capabilities

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@p-m-p
p-m-p merged commit 5e52991 into main Jun 21, 2025
4 checks passed
@p-m-p
p-m-p deleted the improve-slider-controls-story branch June 21, 2025 08:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@p-m-p