Skip to content

Conversation

@MaxLardenois
Copy link
Collaborator

@MaxLardenois MaxLardenois commented Dec 16, 2025

Types of change

  • Non-breaking change
  • Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3266

Context & Motivation

Rounded corners for textual inputs and buttons are a global opt-in choice.

Description

Implements two global classes to use the rounded corners radiuses in inputs and buttons

Checklists

  • I have read the contributing guidelines
  • My change follows the developer guide
  • My change pass all tests
  • My change is compatible with a responsive display
  • I have added tests (Javascript unit test or visual) to cover my changes
  • My change introduces changes to the documentation that I have updated accordingly
    • Title and DOM structure is correct
    • Links have been updated (title changes impact links)
    • CSS for the documentation
  • I have checked all states and combinations of the component with my change
  • I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

  • The changes need to be in the migration guide
  • The changes are well displayed in Storybook (be careful if example order has changed for DSM)
  • The changes are compatible with RTL
  • Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

Live previews

@netlify
Copy link

netlify bot commented Dec 16, 2025

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 6f1bbcf
🔍 Latest deploy log https://app.netlify.com/projects/boosted/deploys/69412f730ee9d8000806536e
😎 Deploy Preview https://deploy-preview-3273--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

scss/_root.scss Outdated

// Top level modifier for rounded corners on textual inputs
.use-rounded-corner-inputs {
--#{$prefix}text-input-border-radius: #{$ouds-text-input-border-radius-rounded};
Copy link
Collaborator

Choose a reason for hiding this comment

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

The $ouds-root-selector could have a bigger specificity than this className. Maybe we should add an !important here if the class is used on the same element that the one defined as root selector.

}

.btn-rounded {
.use-rounded-corner-buttons {
Copy link
Collaborator

Choose a reason for hiding this comment

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

we may need an important here too for the same reason that the one for inputs.

@vprothais vprothais merged commit 0f955d3 into ouds/main Dec 16, 2025
11 checks passed
@vprothais vprothais deleted the ouds/main-ml-change-the-selector-for-rounded-corner-of-button-and-inputs branch December 16, 2025 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

2 participants