From 4b5f06ab9e2023687b90185582edbb79b743f0bb Mon Sep 17 00:00:00 2001 From: Carl Whittaker Date: Fri, 15 Mar 2024 10:21:05 +0000 Subject: [PATCH] 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 --- src/components/atoms/OakIcon/OakIcon.tsx | 2 ++ .../OakIcon/__snapshots__/OakIcon.test.tsx.snap | 2 ++ .../InternalShadowRectButton.test.tsx.snap | 2 ++ .../InternalShadowRoundButton.test.tsx.snap | 2 ++ .../__snapshots__/OakBackLink.test.tsx.snap | 2 ++ .../__snapshots__/OakCheckbox.test.tsx.snap | 2 ++ .../OakDragAndDropInstructions.test.tsx.snap | 2 ++ .../__snapshots__/OakDraggable.test.tsx.snap | 2 ++ .../OakDraggableFeedback.test.tsx.snap | 2 ++ .../OakHandDrawnCardWithIcon.test.tsx.snap | 14 ++++++++++++++ .../__snapshots__/OakLessonInfoCard.test.tsx.snap | 2 ++ .../__snapshots__/OakPrimaryButton.test.tsx.snap | 2 ++ .../OakPrimaryInvertedButton.test.tsx.snap | 2 ++ .../__snapshots__/OakRoundIcon.test.tsx.snap | 2 ++ .../__snapshots__/OakSecondaryButton.test.tsx.snap | 2 ++ .../__snapshots__/OakHintButton.test.tsx.snap | 2 ++ .../__snapshots__/OakLessonBottomNav.test.tsx.snap | 8 ++++++++ .../__snapshots__/OakLessonNavItem.test.tsx.snap | 4 ++++ .../OakPupilLessonReviewItem.test.tsx.snap | 2 ++ .../__snapshots__/OakLessonTopNav.test.tsx.snap | 4 ++++ .../OakLessonVideoTranscript.test.tsx.snap | 2 ++ .../__snapshots__/OakQuizFeedback.test.tsx.snap | 6 ++++++ .../__snapshots__/OakQuizHint.test.tsx.snap | 2 ++ .../__snapshots__/OakQuizMatch.test.tsx.snap | 4 ++++ .../__snapshots__/OakQuizOrder.test.tsx.snap | 4 ++++ 25 files changed, 80 insertions(+) diff --git a/src/components/atoms/OakIcon/OakIcon.tsx b/src/components/atoms/OakIcon/OakIcon.tsx index d164f672..7335faf2 100644 --- 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 index 0fc1b524..3ca9c6ce 100644 --- 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/src/components/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap b/src/components/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap index 6ca1eb56..3d7f1ccb 100644 --- a/src/components/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap +++ b/src/components/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/src/components/molecules/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap b/src/components/molecules/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap index 7ca8bb38..0857bb4f 100644 --- a/src/components/molecules/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap +++ b/src/components/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 index 93caf9ad..498b1f46 100644 --- 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 index b11f8008..5b0bc8d6 100644 --- 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/src/components/molecules/OakDragAndDropInstructions/__snapshots__/OakDragAndDropInstructions.test.tsx.snap b/src/components/molecules/OakDragAndDropInstructions/__snapshots__/OakDragAndDropInstructions.test.tsx.snap index 0aee83e9..eb06dc54 100644 --- a/src/components/molecules/OakDragAndDropInstructions/__snapshots__/OakDragAndDropInstructions.test.tsx.snap +++ b/src/components/molecules/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 index 30c96305..ac2a3cf0 100644 --- 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/src/components/molecules/OakDraggableFeedback/__snapshots__/OakDraggableFeedback.test.tsx.snap b/src/components/molecules/OakDraggableFeedback/__snapshots__/OakDraggableFeedback.test.tsx.snap index 22852818..7bd3ddda 100644 --- a/src/components/molecules/OakDraggableFeedback/__snapshots__/OakDraggableFeedback.test.tsx.snap +++ b/src/components/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/src/components/molecules/OakHandDrawnCardWithIcon/__snapshots__/OakHandDrawnCardWithIcon.test.tsx.snap b/src/components/molecules/OakHandDrawnCardWithIcon/__snapshots__/OakHandDrawnCardWithIcon.test.tsx.snap index 4b1059fe..f027e4d6 100644 --- a/src/components/molecules/OakHandDrawnCardWithIcon/__snapshots__/OakHandDrawnCardWithIcon.test.tsx.snap +++ b/src/components/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; + } +} +
diff --git a/src/components/molecules/OakLessonInfoCard/__snapshots__/OakLessonInfoCard.test.tsx.snap b/src/components/molecules/OakLessonInfoCard/__snapshots__/OakLessonInfoCard.test.tsx.snap index ee7c019b..f1d10f5f 100644 --- 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 index d9d6658f..7c4fa017 100644 --- 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/src/components/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap b/src/components/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap index 9775b514..68e90bba 100644 --- a/src/components/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap +++ b/src/components/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 index 6a453cba..c31ebb3a 100644 --- 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 index 5a01f8c3..45eed220 100644 --- 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 index 7c4faee5..51a27c61 100644 --- 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/src/components/organisms/pupil/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap b/src/components/organisms/pupil/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap index 5770b0db..d8da57f3 100644 --- a/src/components/organisms/pupil/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap +++ b/src/components/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 index d0a8707b..82545144 100644 --- 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/src/components/organisms/pupil/OakLessonReviewItem/__snapshots__/OakPupilLessonReviewItem.test.tsx.snap b/src/components/organisms/pupil/OakLessonReviewItem/__snapshots__/OakPupilLessonReviewItem.test.tsx.snap index af0c7ef3..0d0bae45 100644 --- a/src/components/organisms/pupil/OakLessonReviewItem/__snapshots__/OakPupilLessonReviewItem.test.tsx.snap +++ b/src/components/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 index a9dd3fc5..4616994a 100644 --- 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/src/components/organisms/pupil/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap b/src/components/organisms/pupil/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap index 073f773f..3e240246 100644 --- a/src/components/organisms/pupil/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap +++ b/src/components/organisms/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 index b4fa2a09..c6e48451 100644 --- 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 index 0d52868c..c7de449d 100644 --- 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 index 150da921..0a9a570a 100644 --- 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 index 0a964ff8..c27f40e7 100644 --- 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; }