From 3cfdab16dc4a51ecd648341921d93edd28b3deb2 Mon Sep 17 00:00:00 2001
From: Justin Schneider <justincase18@msn.com>
Date: Thu, 1 Dec 2022 07:28:25 -0900
Subject: [PATCH] feat(Ratio): add support for portrait size ratios (#6501)

* Added support for portrait size ratios

* removed the 100% cap on the aspect ratio to allow portrait style size ratios

* modified RatioSpec to allow aspect ratio greater than 100%
---
 src/Ratio.tsx      | 2 +-
 test/RatioSpec.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Ratio.tsx b/src/Ratio.tsx
index 7ae03134e5..7aad47dd53 100644
--- a/src/Ratio.tsx
+++ b/src/Ratio.tsx
@@ -37,7 +37,7 @@ const defaultProps = {
 };
 
 function toPercent(num: number): string {
-  if (num <= 0 || num > 100) return '100%';
+  if (num <= 0) return '100%';
   if (num < 1) return `${num * 100}%`;
   return `${num}%`;
 }
diff --git a/test/RatioSpec.tsx b/test/RatioSpec.tsx
index 6a364aacf4..b9ea21643c 100644
--- a/test/RatioSpec.tsx
+++ b/test/RatioSpec.tsx
@@ -49,7 +49,7 @@ describe('Ratio', () => {
     styleAttr.should.match(/--bs-aspect-ratio:[ ]*100%;/);
   });
 
-  it('should support use 100% as custom ratio if aspectRatio is greater than 100', () => {
+  it('should support aspectRatio greater than 100', () => {
     const { getByTestId } = render(
       <Ratio data-testid="test" aspectRatio={200}>
         <div />
@@ -57,6 +57,6 @@ describe('Ratio', () => {
     );
     const ratioElem = getByTestId('test');
     const styleAttr = ratioElem.getAttribute('style')!;
-    styleAttr.should.match(/--bs-aspect-ratio:[ ]*100%;/);
+    styleAttr.should.match(/--bs-aspect-ratio:[ ]*200%;/);
   });
 });