From 8f5abf0ab08c2ce734990e9ff274939ea5ad9fcf Mon Sep 17 00:00:00 2001
From: Justin <justinhuang@me.com>
Date: Mon, 14 Jan 2019 06:49:25 +1100
Subject: [PATCH] Add new rounded sizes classes (#28011)

* update border-radius mixins

Add $enable-rounded as a keyword argument to border-raidus mixins

* Update rounded classes

- use border-radius mixins to repleace !important
- use true for $enable-rounded for rounded classes
- Add `.rounded-sm` and `.rounded-sm`  #27934

* update borders docs

* Revert touch of dist files

* Revert change of border-radius mixins

* use !important in border-radius utilies classes

* update border radius classes keep only rounded-lg and rounded-sm
---
 scss/utilities/_borders.scss       | 12 ++++++++++++
 site/docs/4.2/utilities/borders.md | 14 ++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index 78c9cb5b2d..302f6bf849 100644
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -30,26 +30,38 @@
 // Border-radius
 //
 
+.rounded-sm {
+  border-radius: $border-radius-sm !important;
+}
+
 .rounded {
   border-radius: $border-radius !important;
 }
+
 .rounded-top {
   border-top-left-radius: $border-radius !important;
   border-top-right-radius: $border-radius !important;
 }
+
 .rounded-right {
   border-top-right-radius: $border-radius !important;
   border-bottom-right-radius: $border-radius !important;
 }
+
 .rounded-bottom {
   border-bottom-right-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
+
 .rounded-left {
   border-top-left-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
 
+.rounded-lg {
+  border-radius: $border-radius-lg !important;
+}
+
 .rounded-circle {
   border-radius: 50% !important;
 }
diff --git a/site/docs/4.2/utilities/borders.md b/site/docs/4.2/utilities/borders.md
index 0cf2f9c3c1..ebb59fb651 100644
--- a/site/docs/4.2/utilities/borders.md
+++ b/site/docs/4.2/utilities/borders.md
@@ -75,3 +75,17 @@ Add classes to an element to easily round its corners.
 <img src="..." alt="..." class="rounded-pill">
 <img src="..." alt="..." class="rounded-0">
 {% endhighlight %}
+
+## Sizes
+
+Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
+
+<div class="bd-example bd-example-images">
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-sm" title="Example small rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-lg" title="Example large rounded image" -%}
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="rounded-sm">
+<img src="..." alt="..." class="rounded-lg">
+{% endhighlight %}