Add .border-circle and .border-pill to the radius size part of th…

[louismaximepiton]

Description

Change the wording of the border utilities pages.

Motivation & Context

Circle and pill radiuses are part of the sizes (and in the code as well). So it makes sense to add the circle and pill to the sizes in our documentation.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-40796--twbs-bootstrap.netlify.app/docs/5.3/utilities/borders

Related issues

NA

[julien-deramond]

Thanks for the PR @louismaximepiton

I understand why it has been like this before and it kind of made sense too. I don't mind landing this change for the following reasons, but I'd like feedback from other folks.

Border pill and circle are actually specific sizes with fixed values (circle is not a variable but set with 50%):

bootstrap/scss/_variables.scss

Lines 546 to 556 in 6f87fce

	// scss-docs-start border-radius-variables
	$border-radius: .375rem !default;
	$border-radius-sm: .25rem !default;
	$border-radius-lg: .5rem !default;
	$border-radius-xl: 1rem !default;
	$border-radius-xxl: 2rem !default;
	$border-radius-pill: 50rem !default;
	// scss-docs-end border-radius-variables
	// fusv-disable
	$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
	// fusv-enable

and used like this to create utilities:

bootstrap/scss/_utilities.scss

Lines 711 to 725 in 6f87fce

	"rounded": (
	property: border-radius,
	class: rounded,
	values: (
	null: var(--#{$prefix}border-radius),
	0: 0,
	1: var(--#{$prefix}border-radius-sm),
	2: var(--#{$prefix}border-radius),
	3: var(--#{$prefix}border-radius-lg),
	4: var(--#{$prefix}border-radius-xl),
	5: var(--#{$prefix}border-radius-xxl),
	circle: 50%,
	pill: var(--#{$prefix}border-radius-pill)
	)
	),

It makes more sense in the documentation to have it in size, especially because of the second part of the Size section.

<img src="..." class="rounded-bottom-1" alt="...">
<img src="..." class="rounded-start-2" alt="...">
<img src="..." class="rounded-end-circle" alt="...">
<img src="..." class="rounded-start-pill" alt="...">
<img src="..." class="rounded-5 rounded-top-0" alt="...">

The structure is rounded + direction (optional) + size.