fix: remaining rebranded stories (#1981)

Co-authored-by: anuraghazra <anurag.hazra@razorpay.com>
razorpay · Jan 19, 2024 · 26828b9 · 26828b9
1 parent 1254a0c
commit 26828b9
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 208 deletions.
diff --git a/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx b/packages/blade/src/components/BottomSheet/__tests__/BottomSheet.web.test.tsx
@@ -234,8 +234,7 @@ describe('<BottomSheet />', () => {
     mockConsoleError.mockRestore();
   });
 
-  // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then
-  it.skip('should compose with Dropdown single select', async () => {
+  it('should compose with Dropdown single select', async () => {
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
 
     const user = userEvents.setup();
@@ -284,8 +283,7 @@ describe('<BottomSheet />', () => {
     mockConsoleError.mockRestore();
   });
 
-  // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then
-  it.skip('should compose with Dropdown multi select', async () => {
+  it('should compose with Dropdown multi select', async () => {
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
     mockConsoleError.mockRestore();
 
@@ -353,8 +351,7 @@ describe('<BottomSheet />', () => {
     mockConsoleError.mockRestore();
   }, 10000);
 
-  // TODO: Rebranding - Dropdown hasn't been rebranded yet thus skipping this test until then
-  it.skip('should compose with DropdownButton', async () => {
+  it('should compose with DropdownButton', async () => {
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
 
     const user = userEvents.setup();

diff --git a/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/...es/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  z-index: 1;
 }
 
 .c5.c5.c5.c5.c5 {
@@ -34,7 +35,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background-color: hsla(214,15%,18%,0.64);
+  background-color: hsla(0,0%,0%,0.56);
   opacity: 0;
 }
 
@@ -179,7 +180,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,22%,56%,1);
   -webkit-transition-property: color,box-shadow;
   transition-property: color,box-shadow;
   -webkit-transition-duration: 150ms;
@@ -189,24 +190,30 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c15.c15.c15.c15.c15:hover {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c15.c15.c15.c15.c15:focus-visible {
-  outline: none;
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
-  color: hsla(217,18%,45%,1);
+  outline: 4px solid hsla(227,100%,59%,0.18);
+  outline-offset: 1px;
+  -webkit-transition-property: outline-width;
+  transition-property: outline-width;
+  -webkit-transition-duration: 70ms;
+  transition-duration: 70ms;
+  -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.3,0,0.2,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c15.c15.c15.c15.c15:active {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,33%,29%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
-  font-weight: 700;
+  font-weight: 500;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -221,7 +228,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c21.c21.c21.c21.c21 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -243,7 +250,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c24.c24.c24.c24.c24 {
-  color: hsla(8,73%,47%,1);
+  color: hsla(4,74%,49%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -306,15 +313,15 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   content: '';
   width: 56px;
   height: 4px;
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.12);
   border-radius: 16px;
 }
 
 .c7.c7.c7.c7.c7 {
   background: hsla(0,0%,100%,1);
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
-  border-color: hsla(216,15%,54%,0.18);
+  border-color: hsla(211,20%,52%,0.18);
   box-shadow: 0px -24px 48px -12px hsla(217,56%,17%,0.18);
   opacity: 0;
   pointer-events: none;
@@ -348,10 +355,10 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   min-height: 36px;
   width: auto;
   cursor: pointer;
-  background-color: hsla(216,15%,54%,0.09);
-  border-color: hsla(216,44%,23%,0);
-  border-width: 1px;
-  border-radius: 2px;
+  background-color: hsla(211,20%,52%,0.09);
+  border-color: hsla(211,27%,76%,1);
+  border-width: 0px;
+  border-radius: 4px;
   border-style: solid;
   padding-top: 0px;
   padding-bottom: 0px;
@@ -367,6 +374,7 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  overflow: hidden;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -381,22 +389,22 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c1.c1.c1.c1.c1:hover {
-  background-color: hsla(216,15%,54%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c1.c1.c1.c1.c1:active {
-  background-color: hsla(216,15%,54%,0.32);
+  background-color: hsla(211,20%,52%,0.18);
 }
 
 .c1.c1.c1.c1.c1:focus-visible {
-  background-color: hsla(216,15%,54%,0.32);
-  outline: 1px solid hsla(220,30%,96%,1);
-  box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18);
+  background-color: hsla(211,20%,52%,0.18);
+  outline: 1px solid hsla(227,100%,59%,0.09);
+  box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
 }
 
 .c1.c1.c1.c1.c1 * {
-  -webkit-transition-property: color,fill;
-  transition-property: color,fill;
+  -webkit-transition-property: color,fill,opacity;
+  transition-property: color,fill,opacity;
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -431,11 +439,15 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c17.c17.c17.c17.c17:hover:not([aria-disabled=true]) {
-  background-color: hsla(216,15%,54%,0.09);
+  background-color: hsla(211,20%,52%,0.09);
 }
 
 .c17.c17.c17.c17.c17[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c17.c17.c17.c17.c17[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 .c23.c23.c23.c23.c23 {
@@ -454,11 +466,15 @@ exports[`<BottomSheet /> should compose with DropdownButton 1`] = `
 }
 
 .c23.c23.c23.c23.c23:hover:not([aria-disabled=true]) {
-  background-color: hsla(9,91%,56%,0.09);
+  background-color: hsla(4,74%,49%,0.09);
 }
 
 .c23.c23.c23.c23.c23[aria-selected=true] {
-  background-color: hsla(218,89%,51%,0.09);
+  background-color: hsla(227,100%,59%,0.09);
+}
+
+.c23.c23.c23.c23.c23[aria-selected=true]:hover {
+  background-color: hsla(227,100%,59%,0.18);
 }
 
 <body>