fix: prevent OakIcon from shrinking when in a flex context

we'll always want precise control over the dimensions of the icon, so we'll use min-width and min-height to prevent it from shrinking when in a flex container
oaknational · Mar 15, 2024 · 4b5f06a · 4b5f06a
1 parent c0105b2
commit 4b5f06a
Show file tree

Hide file tree

Showing 25 changed files with 80 additions and 0 deletions.
diff --git a/src/components/atoms/OakIcon/OakIcon.tsx b/src/components/atoms/OakIcon/OakIcon.tsx
@@ -44,6 +44,8 @@ export const OakIcon = (props: OakIconProps) => {
       alt={alt ?? iconName}
       $width={$width}
       $height={$height}
+      $minHeight={$width}
+      $minWidth={$height}
       placeholder="empty"
       // Icons should not be optimised since the SVG is already as small as it can be and should be served directly
       unoptimized

diff --git a/src/components/atoms/OakIcon/__snapshots__/OakIcon.test.tsx.snap b/src/components/atoms/OakIcon/__snapshots__/OakIcon.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`OakIcon matches snapshot 1`] = `
 .c0 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...s/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap b/...s/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap
@@ -25,7 +25,9 @@ exports[`InternalShadowRectButton matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...molecules/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap b/...molecules/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap
@@ -36,7 +36,9 @@ exports[`InternalShadowRoundButton matches snapshot 1`] = `
 .c9 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakBackLink/__snapshots__/OakBackLink.test.tsx.snap b/src/components/molecules/OakBackLink/__snapshots__/OakBackLink.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`OakBackLink matches snapshot 1`] = `
 .c1 {
   position: relative;
   width: 2.5rem;
+  min-width: 2.5rem;
   height: 2.5rem;
+  min-height: 2.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap b/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap
@@ -48,7 +48,9 @@ exports[`OakCheckBox matches snapshot 1`] = `
 .c10 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...lecules/OakDragAndDropInstructions/__snapshots__/OakDragAndDropInstructions.test.tsx.snap b/...lecules/OakDragAndDropInstructions/__snapshots__/OakDragAndDropInstructions.test.tsx.snap
@@ -8,7 +8,9 @@ exports[`OakDragAndDropInstructions matches snapshot 1`] = `
 .c3 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakDraggable/__snapshots__/OakDraggable.test.tsx.snap b/src/components/molecules/OakDraggable/__snapshots__/OakDraggable.test.tsx.snap
@@ -20,7 +20,9 @@ exports[`OakDraggable matches snapshot 1`] = `
 .c5 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...omponents/molecules/OakDraggableFeedback/__snapshots__/OakDraggableFeedback.test.tsx.snap b/...omponents/molecules/OakDraggableFeedback/__snapshots__/OakDraggableFeedback.test.tsx.snap
@@ -22,7 +22,9 @@ exports[`OakDraggableFeedback matches snapshot 1`] = `
 .c5 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...s/molecules/OakHandDrawnCardWithIcon/__snapshots__/OakHandDrawnCardWithIcon.test.tsx.snap b/...s/molecules/OakHandDrawnCardWithIcon/__snapshots__/OakHandDrawnCardWithIcon.test.tsx.snap
@@ -23,7 +23,9 @@ exports[`OakHandDrawnCardWithIcon matches snapshot 1`] = `
 .c6 {
   position: relative;
   width: 4rem;
+  min-width: 4rem;
   height: 4rem;
+  min-height: 4rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -82,12 +84,24 @@ exports[`OakHandDrawnCardWithIcon matches snapshot 1`] = `
   }
 }
 
+@media (min-width:750px) {
+  .c6 {
+    min-width: 7.5rem;
+  }
+}
+
 @media (min-width:750px) {
   .c6 {
     height: 7.5rem;
   }
 }
 
+@media (min-width:750px) {
+  .c6 {
+    min-height: 7.5rem;
+  }
+}
+
 <div
   className="c0 c1"
 >

diff --git a/src/components/molecules/OakLessonInfoCard/__snapshots__/OakLessonInfoCard.test.tsx.snap b/src/components/molecules/OakLessonInfoCard/__snapshots__/OakLessonInfoCard.test.tsx.snap
@@ -15,7 +15,9 @@ exports[`OakLessonInfoCard component test matches snapshot 1`] = `
 .c4 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakPrimaryButton/__snapshots__/OakPrimaryButton.test.tsx.snap b/src/components/molecules/OakPrimaryButton/__snapshots__/OakPrimaryButton.test.tsx.snap
@@ -25,7 +25,9 @@ exports[`OakPrimaryButton matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...s/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap b/...s/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap
@@ -25,7 +25,9 @@ exports[`OakPrimaryInvertedButton matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakRoundIcon/__snapshots__/OakRoundIcon.test.tsx.snap b/src/components/molecules/OakRoundIcon/__snapshots__/OakRoundIcon.test.tsx.snap
@@ -13,7 +13,9 @@ exports[`OakRoundIcon matches snapshot 1`] = `
 .c1 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/molecules/OakSecondaryButton/__snapshots__/OakSecondaryButton.test.tsx.snap b/src/components/molecules/OakSecondaryButton/__snapshots__/OakSecondaryButton.test.tsx.snap
@@ -25,7 +25,9 @@ exports[`OakSecondaryButton matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap b/src/components/organisms/pupil/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap
@@ -36,7 +36,9 @@ exports[`OakHintButton matches snapshot 1`] = `
 .c10 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...ponents/organisms/pupil/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap b/...ponents/organisms/pupil/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap
@@ -54,7 +54,9 @@ exports[`OakLessonBottomNav matches snapshot 1`] = `
 .c16 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -359,7 +361,9 @@ exports[`OakLessonBottomNav matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 
@@ -551,7 +555,9 @@ exports[`OakLessonBottomNav matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 
@@ -761,7 +767,9 @@ exports[`OakLessonBottomNav matches snapshot 1`] = `
 .c7 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakLessonNavItem/__snapshots__/OakLessonNavItem.test.tsx.snap b/src/components/organisms/pupil/OakLessonNavItem/__snapshots__/OakLessonNavItem.test.tsx.snap
@@ -23,7 +23,9 @@ exports[`OakLessonNavItem matches snapshot 1`] = `
 .c5 {
   position: relative;
   width: 3.5rem;
+  min-width: 3.5rem;
   height: 3.5rem;
+  min-height: 3.5rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -66,7 +68,9 @@ exports[`OakLessonNavItem matches snapshot 1`] = `
 .c14 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/.../organisms/pupil/OakLessonReviewItem/__snapshots__/OakPupilLessonReviewItem.test.tsx.snap b/.../organisms/pupil/OakLessonReviewItem/__snapshots__/OakPupilLessonReviewItem.test.tsx.snap
@@ -26,7 +26,9 @@ exports[`OakLessonReviewItem matches snapshot 1`] = `
 .c4 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakLessonTopNav/__snapshots__/OakLessonTopNav.test.tsx.snap b/src/components/organisms/pupil/OakLessonTopNav/__snapshots__/OakLessonTopNav.test.tsx.snap
@@ -13,7 +13,9 @@ exports[`OakLessonTopNav matches snapshot 1`] = `
 .c4 {
   position: relative;
   width: 2.5rem;
+  min-width: 2.5rem;
   height: 2.5rem;
+  min-height: 2.5rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -29,7 +31,9 @@ exports[`OakLessonTopNav matches snapshot 1`] = `
 .c8 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/...nisms/pupil/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap b/...nisms/pupil/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap
@@ -37,7 +37,9 @@ exports[`OakLessonVideoTranscript matches snapshot 1`] = `
 .c11 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakQuizFeedback/__snapshots__/OakQuizFeedback.test.tsx.snap b/src/components/organisms/pupil/OakQuizFeedback/__snapshots__/OakQuizFeedback.test.tsx.snap
@@ -18,7 +18,9 @@ exports[`OakQuizFeedback matches snapshot 1`] = `
 .c3 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 
@@ -118,7 +120,9 @@ exports[`OakQuizFeedback matches snapshot 1`] = `
 .c3 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 
@@ -236,7 +240,9 @@ exports[`OakQuizFeedback matches snapshot 1`] = `
 .c3 {
   position: relative;
   width: 100%;
+  min-width: 100%;
   height: 100%;
+  min-height: 100%;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap b/src/components/organisms/pupil/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap
@@ -48,7 +48,9 @@ exports[`OakQuizHint matches snapshot 1`] = `
 .c12 {
   position: relative;
   width: 1.5rem;
+  min-width: 1.5rem;
   height: 1.5rem;
+  min-height: 1.5rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakQuizMatch/__snapshots__/OakQuizMatch.test.tsx.snap b/src/components/organisms/pupil/OakQuizMatch/__snapshots__/OakQuizMatch.test.tsx.snap
@@ -14,7 +14,9 @@ exports[`OakQuizMatch matches snapshot 1`] = `
 .c4 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -168,7 +170,9 @@ exports[`OakQuizMatch matches snapshot 1`] = `
 .c9 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 

diff --git a/src/components/organisms/pupil/OakQuizOrder/__snapshots__/OakQuizOrder.test.tsx.snap b/src/components/organisms/pupil/OakQuizOrder/__snapshots__/OakQuizOrder.test.tsx.snap
@@ -14,7 +14,9 @@ exports[`OakQuizOrder matches snapshot 1`] = `
 .c4 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }
 
@@ -168,7 +170,9 @@ exports[`OakQuizOrder matches snapshot 1`] = `
 .c12 {
   position: relative;
   width: 2rem;
+  min-width: 2rem;
   height: 2rem;
+  min-height: 2rem;
   font-family: Lexend,sans-serif;
 }