Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated .rounded utilities #31687

Merged
merged 8 commits into from Oct 30, 2020
Merged

Updated .rounded utilities #31687

merged 8 commits into from Oct 30, 2020

Conversation

mdo
Copy link
Member

@mdo mdo commented Sep 17, 2020 •
edited

#30048 is out of date, and I'm second guessing renaming the utilities. @ffoodd and @MartijnCuppens help me out—should we rename these classes all from rounded to radius? Should we even both changing the size scale to a numbered scale?

Fixes #29989.
Closes #30048.
Closes #31784 (classes can now be expanded and made responsive with utilities API).

@mdo mdo mentioned this pull request Sep 18, 2020
Closed
@mdo mdo changed the title Updated rounded utilities to fix scale, but not rename anything else Updated .rounded utilities Oct 28, 2020
@mdo
Rename rounded-pill to border-radius-pill to match
3b76255 
Also reorder some variables while I'm here to make more sense
@mdo mdo added this to Inbox in v5.0.0-alpha3 via automation Oct 28, 2020
@mdo mdo marked this pull request as ready for review October 28, 2020 17:17
@mdo mdo requested a review from a team as a code owner October 28, 2020 17:17
@mdo mdo moved this from Inbox to Review in v5.0.0-alpha3 Oct 28, 2020
@ffoodd
Copy link
Member

ffoodd commented Oct 29, 2020

About size scale, I'd go for number. -sm et all are heavily used through utilities for responsiveness, and I think this should be considered as a convention.

Using them in components (eg buttons) is another context, another convention. We may have to document our namings somewhere, would help a lot to spot inconsistencies and name newcomers.

@ffoodd
Copy link
Member

ffoodd commented Oct 29, 2020

And I'd be in favor of radius, but that doesn't seem much important IMHO.

But naming conventions (↑) could help in that sort of case (eg. follow CSS properties / HTML elements to ease discoverability).

@mdo
Copy link
Member Author

mdo commented Oct 29, 2020

I think leaving it as rounded for now is fine. We can ask folks in our next release and tackle with the beta IMO. Otherwise I think this is good to go!

v5.0.0-alpha3 automation moved this from Review to Approved Oct 29, 2020
@XhmikosR XhmikosR merged commit 241f910 into main Oct 30, 2020
v5.0.0-alpha3 automation moved this from Approved to Shipped Oct 30, 2020
@XhmikosR XhmikosR deleted the new-rounded-utils branch October 30, 2020 20:42
@pricop
Copy link

pricop commented Nov 2, 2020

+1 for the -sm -md -lg. Let the numbers available for us if we want to implement rounded classes based on a percentage.

@kylefox kylefox mentioned this pull request Jan 8, 2021
Closed
@mdo mdo mentioned this pull request Jan 11, 2021
Merged
mdo pushed a commit that referenced this pull request Jan 13, 2021
@k99sharma @ffoodd @XhmikosR
Migration: mention the removal of .rounded-sm/lg utilities (#32758)
82e5fe2 
* Changes made in migration.md file of documentation

Added information about the removal of `.rounded-sm` and `.rounded-lg`.
And addition of `.rounded-0` to `.rounded-3`

* Moved the edited line

Added `rounded-0` to `rounded-3` under  v5.0.0-alpha3

* Moved correctly

* Added link

Added link to issue #31687

* docs(migration): last typo thinggies

* Update migration.md

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
@harnishdesign
Copy link

We are use radius size (rounded-3) scaling classes with any one of rounded-top, rounded-start, rounded-end, rounded-bottom. So, does not override border radius size scale as like rounded-3. it does show default rounded size.

Does not work properly in below situation.
Start rounded corner does in default size and end rounded corner size scale as rounded-3. but, We think, Here, It should Start rounded corner size scale as rounded-3 and should end rounded corner size is 0(none).

<img src="..." class="rounded-start rounded-3" alt="...">

@dmetzner dmetzner mentioned this pull request Sep 24, 2021
Merged
@CloCkWeRX CloCkWeRX mentioned this pull request Jan 26, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@XhmikosR XhmikosR XhmikosR left review comments

@ffoodd ffoodd ffoodd approved these changes

@MartijnCuppens MartijnCuppens MartijnCuppens approved these changes

Assignees
No one assigned
Labels
css v5
Projects
No open projects
v5.0.0-alpha3
  
Shipped
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Expansion of the 'rounded' classes Confusing classes rounded-sm and rounded-lg
6 participants
@mdo @ffoodd @pricop @harnishdesign @XhmikosR @MartijnCuppens