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.

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

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

#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 changed the title Updated rounded utilities to fix scale, but not rename anything else Updated .rounded utilities Oct 28, 2020
Also reorder some variables while I'm here to make more sense
@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
@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!

@XhmikosR XhmikosR merged commit 241f910 into main 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.

mdo pushed a commit that referenced this pull request Jan 13, 2021
* 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="...">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Expansion of the 'rounded' classes Confusing classes rounded-sm and rounded-lg
6 participants