fix: set default breakpoint without computing (#1821)

Co-authored-by: rzpcibot <tools+cibot@razorpay.com>
razorpay · Nov 23, 2023 · 9967cd9 · 9967cd9
1 parent 00aa407
commit 9967cd9
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 100 deletions.
diff --git a/.changeset/pretty-feet-rule.md b/.changeset/pretty-feet-rule.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix: set default breakpoint without computing
diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap
@@ -290,7 +290,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-39-carousel-item-0"
+          id="carousel-52-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -307,7 +307,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-39-carousel-item-1"
+          id="carousel-52-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -358,15 +358,15 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = `
         role="tablist"
       >
         <button
-          aria-controls="carousel-39-carousel-item-0"
+          aria-controls="carousel-52-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c9"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-39-carousel-item-1"
+          aria-controls="carousel-52-carousel-item-1"
           aria-label="Slide 2"
           aria-selected="false"
           class="c10"
@@ -652,7 +652,7 @@ exports[`Carousel Snapshots should render 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-34-carousel-item-0"
+          id="carousel-42-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -669,7 +669,7 @@ exports[`Carousel Snapshots should render 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-34-carousel-item-1"
+          id="carousel-42-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -716,15 +716,15 @@ exports[`Carousel Snapshots should render 1`] = `
         role="tablist"
       >
         <button
-          aria-controls="carousel-34-carousel-item-0"
+          aria-controls="carousel-42-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c8"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-34-carousel-item-1"
+          aria-controls="carousel-42-carousel-item-1"
           aria-label="Slide 2"
           aria-selected="false"
           class="c9"
@@ -1024,7 +1024,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
           class=" c5"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-38-carousel-item-0"
+          id="carousel-50-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -1041,7 +1041,7 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
           class=" c5"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-38-carousel-item-1"
+          id="carousel-50-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -1088,15 +1088,15 @@ exports[`Carousel Snapshots should render with navigationButtonPosition=side 1`]
         role="tablist"
       >
         <button
-          aria-controls="carousel-38-carousel-item-0"
+          aria-controls="carousel-50-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c8"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-38-carousel-item-1"
+          aria-controls="carousel-50-carousel-item-1"
           aria-label="Slide 2"
           aria-selected="false"
           class="c9"
@@ -1373,7 +1373,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
           class="c4 c5"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-36-carousel-item-0"
+          id="carousel-46-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -1390,7 +1390,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
           class="c4 c5"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-36-carousel-item-1"
+          id="carousel-46-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -1407,7 +1407,7 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
           class="c4 c5"
           data-blade-component="base-box"
           data-slide-index="2"
-          id="carousel-36-carousel-item-2"
+          id="carousel-46-carousel-item-2"
           role="tabpanel"
         >
           <div>
@@ -1458,23 +1458,23 @@ exports[`Carousel Snapshots should render with shouldAddStartEndSpacing 1`] = `
         role="tablist"
       >
         <button
-          aria-controls="carousel-36-carousel-item-0"
+          aria-controls="carousel-46-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c10"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-36-carousel-item-1"
+          aria-controls="carousel-46-carousel-item-1"
           aria-label="Slide 2"
           aria-selected="false"
           class="c11"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-36-carousel-item-2"
+          aria-controls="carousel-46-carousel-item-2"
           aria-label="Slide 3"
           aria-selected="false"
           class="c11"
@@ -1800,7 +1800,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-37-carousel-item-0"
+          id="carousel-48-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -1817,7 +1817,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-37-carousel-item-1"
+          id="carousel-48-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -1834,7 +1834,7 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="2"
-          id="carousel-37-carousel-item-2"
+          id="carousel-48-carousel-item-2"
           role="tabpanel"
         >
           <div>
@@ -1885,23 +1885,23 @@ exports[`Carousel Snapshots should render with showOverlay 1`] = `
         role="tablist"
       >
         <button
-          aria-controls="carousel-37-carousel-item-0"
+          aria-controls="carousel-48-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c9"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-37-carousel-item-1"
+          aria-controls="carousel-48-carousel-item-1"
           aria-label="Slide 2"
           aria-selected="false"
           class="c10"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-37-carousel-item-2"
+          aria-controls="carousel-48-carousel-item-2"
           aria-label="Slide 3"
           aria-selected="false"
           class="c10"
@@ -2187,7 +2187,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="0"
-          id="carousel-35-carousel-item-0"
+          id="carousel-44-carousel-item-0"
           role="tabpanel"
         >
           <div>
@@ -2204,7 +2204,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="1"
-          id="carousel-35-carousel-item-1"
+          id="carousel-44-carousel-item-1"
           role="tabpanel"
         >
           <div>
@@ -2221,7 +2221,7 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
           class=" c4"
           data-blade-component="base-box"
           data-slide-index="2"
-          id="carousel-35-carousel-item-2"
+          id="carousel-44-carousel-item-2"
           role="tabpanel"
         >
           <div>
@@ -2268,15 +2268,15 @@ exports[`Carousel Snapshots should render with visibleItems 1`] = `
         role="tablist"
       >
         <button
-          aria-controls="carousel-35-carousel-item-0"
+          aria-controls="carousel-44-carousel-item-0"
           aria-label="Slide 1"
           aria-selected="true"
           class="c8"
           data-blade-component="carousel-indicator-button"
           role="tab"
         />
         <button
-          aria-controls="carousel-35-carousel-item-2"
+          aria-controls="carousel-44-carousel-item-2"
           aria-label="Slide 3"
           aria-selected="false"
           class="c9"

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.native.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
     }
   >
     <View
-      accessibilityLabelledBy="chip-group-31-label"
+      accessibilityLabelledBy="chip-group-47-label"
       accessibilityRole="radiogroup"
       accessible={true}
       data-blade-component="chip-group"
@@ -141,7 +141,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
               }
             >
               <View
-                accessibilityDescribedBy="radio-32-helptext-33"
+                accessibilityDescribedBy="radio-48-helptext-49"
                 accessibilityInvalid={false}
                 accessibilityRequired={false}
                 accessibilityRole="radio"
@@ -347,7 +347,7 @@ exports[`<Chip /> should prioritize Chip's isDisabled prop instead of ChipGroup
               }
             >
               <View
-                accessibilityDescribedBy="radio-34-helptext-35"
+                accessibilityDescribedBy="radio-50-helptext-51"
                 accessibilityInvalid={false}
                 accessibilityRequired={false}
                 accessibilityRole="radio"
@@ -1800,7 +1800,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
     }
   >
     <View
-      accessibilityLabelledBy="chip-group-26-label"
+      accessibilityLabelledBy="chip-group-38-label"
       accessibilityRole="radiogroup"
       accessible={true}
       data-blade-component="chip-group"
@@ -1924,7 +1924,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
               }
             >
               <View
-                accessibilityDescribedBy="radio-27-helptext-28"
+                accessibilityDescribedBy="radio-39-helptext-40"
                 accessibilityInvalid={false}
                 accessibilityRequired={false}
                 accessibilityRole="radio"
@@ -2130,7 +2130,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
               }
             >
               <View
-                accessibilityDescribedBy="radio-29-helptext-30"
+                accessibilityDescribedBy="radio-41-helptext-42"
                 accessibilityInvalid={false}
                 accessibilityRequired={false}
                 accessibilityRole="radio"

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
@@ -1329,7 +1329,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
     data-blade-component="base-box"
   >
     <div
-      aria-labelledby="chip-group-26-label"
+      aria-labelledby="chip-group-38-label"
       class="c0"
       data-blade-component="chip-group"
       role="radiogroup"
@@ -1376,7 +1376,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                   >
                     <input
                       aria-checked="false"
-                      aria-describedby="radio-27-helptext-28"
+                      aria-describedby="radio-39-helptext-40"
                       aria-disabled="true"
                       aria-invalid="false"
                       aria-required="false"
@@ -1430,7 +1430,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
                   >
                     <input
                       aria-checked="false"
-                      aria-describedby="radio-29-helptext-30"
+                      aria-describedby="radio-41-helptext-42"
                       aria-disabled="false"
                       aria-invalid="false"
                       aria-required="false"

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.native.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
     }
   >
     <View
-      accessibilityLabelledBy="chip-group-104-label"
+      accessibilityLabelledBy="chip-group-180-label"
       accessible={true}
       data-blade-component="chip-group"
       display="flex"

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/ChipGroup.web.test.tsx.snap
@@ -299,7 +299,7 @@ exports[`<ChipGroup /> selectionType="multiple" should render with selectionType
     data-blade-component="base-box"
   >
     <div
-      aria-labelledby="chip-group-104-label"
+      aria-labelledby="chip-group-180-label"
       class="c0"
       data-blade-component="chip-group"
       role="group"

diff --git a/...ade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap b/...ade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.native.test.tsx.snap
@@ -621,7 +621,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
           data-blade-component="styled-base-input"
           editable={true}
           hasTags={false}
-          id="name-31-input-32"
+          id="name-49-input-50"
           isFocused={false}
           isTextArea={false}
           keyboardType="default"

diff --git a/.../blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap b/.../blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.web.test.tsx.snap
@@ -673,7 +673,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
       >
         <label
           data-blade-component="form-label"
-          for="name-31-input-32"
+          for="name-49-input-50"
           style="width: auto; flex-shrink: 0; margin-right: 16px;"
         >
           <div
@@ -748,7 +748,7 @@ exports[`<BaseInput /> should render with icons 1`] = `
           aria-required="false"
           class="c10"
           data-blade-component="styled-base-input"
-          id="name-31-input-32"
+          id="name-49-input-50"
           placeholder="First Last"
           type="text"
           value=""