From 5e15b262a1195de703cf5285a3027d06f4ce526b Mon Sep 17 00:00:00 2001 From: jameswilddev Date: Fri, 26 Nov 2021 08:42:27 +0000 Subject: [PATCH] Add bottom margin to flash messages. --- .../createFlashMessageComponent/index.tsx | 4 + .../createFlashMessageComponent/readme.md | 1 + .../createFlashMessageComponent/unit.tsx | 104 ++++++++++++++++++ types/FlashMessageStyle/index.tsx | 5 + types/FlashMessageStyle/readme.md | 1 + 5 files changed, 115 insertions(+) diff --git a/components/createFlashMessageComponent/index.tsx b/components/createFlashMessageComponent/index.tsx index ecc89c84..e2a86222 100644 --- a/components/createFlashMessageComponent/index.tsx +++ b/components/createFlashMessageComponent/index.tsx @@ -48,6 +48,10 @@ export function createFlashMessageComponent( hitboxStyle.borderRadius = flashMessageStyle.radius; } + if (flashMessageStyle.bottomMargin !== 0) { + hitboxStyle.marginBottom = flashMessageStyle.bottomMargin; + } + hitboxStylesInput[typeKey] = hitboxStyle; const textStyle: TextStyle = { diff --git a/components/createFlashMessageComponent/readme.md b/components/createFlashMessageComponent/readme.md index b63dc634..df0e74af 100644 --- a/components/createFlashMessageComponent/readme.md +++ b/components/createFlashMessageComponent/readme.md @@ -15,6 +15,7 @@ const ExampleFlashMessage = createFlashMessageComponent( radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, diff --git a/components/createFlashMessageComponent/unit.tsx b/components/createFlashMessageComponent/unit.tsx index 01f2bfc6..b40d187a 100644 --- a/components/createFlashMessageComponent/unit.tsx +++ b/components/createFlashMessageComponent/unit.tsx @@ -11,6 +11,7 @@ test(`can initially be hidden`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -55,6 +56,7 @@ test(`can initially be shown`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -106,6 +108,7 @@ test(`can initially be shown`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -132,6 +135,7 @@ test(`can change from hidden to visible`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -185,6 +189,7 @@ test(`can change from hidden to visible`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -211,6 +216,7 @@ test(`can change to another message when initially shown`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -271,6 +277,7 @@ test(`can change to another message when initially shown`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -297,6 +304,7 @@ test(`can change to another type when initially shown`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -357,6 +365,7 @@ test(`can change to another type when initially shown`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -383,6 +392,7 @@ test(`remains open if unchanged`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -443,6 +453,7 @@ test(`remains open if unchanged`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -469,6 +480,7 @@ test(`closes when pressed`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -528,6 +540,7 @@ test(`remains closed when the state does not change`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -594,6 +607,7 @@ test(`shows again when the message changes`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -660,6 +674,7 @@ test(`shows again when the message changes`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -686,6 +701,7 @@ test(`shows again when the type changes`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -752,6 +768,7 @@ test(`shows again when the type changes`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -778,6 +795,7 @@ test(`closes when withdrawn`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -831,6 +849,7 @@ test(`renders as expected without border radius`, () => { radius: 0, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -881,6 +900,7 @@ test(`renders as expected without border radius`, () => { borderColor: `orange`, paddingHorizontal: 41, paddingVertical: 57, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -907,6 +927,7 @@ test(`renders as expected without horizontal padding`, () => { radius: 12, horizontalPadding: 0, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -957,6 +978,7 @@ test(`renders as expected without horizontal padding`, () => { borderColor: `orange`, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -983,6 +1005,7 @@ test(`renders as expected without vertical padding`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 0, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -1033,6 +1056,7 @@ test(`renders as expected without vertical padding`, () => { borderColor: `orange`, paddingHorizontal: 41, borderRadius: 12, + marginBottom: 31, }, children: expect.objectContaining({ type: Text, @@ -1059,6 +1083,7 @@ test(`renders as expected without borders`, () => { radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`, @@ -1105,6 +1130,85 @@ test(`renders as expected without borders`, () => { paddingHorizontal: 41, paddingVertical: 57, borderRadius: 12, + marginBottom: 31, + }, + children: expect.objectContaining({ + type: Text, + props: { + style: { + fontFamily: `Example Font Family`, + fontSize: 25, + lineHeight: 35, + color: `yellow`, + }, + children: `Example Message`, + }, + }), + }, + }); + + renderer.unmount(); +}); + +test(`renders as expected without bottom margin`, () => { + const Component = createFlashMessageComponent({ + fontFamily: `Example Font Family`, + fontSize: 25, + radius: 12, + horizontalPadding: 41, + verticalPadding: 57, + bottomMargin: 0, + types: { + exampleTypeA: { + backgroundColor: `red`, + color: `green`, + border: null, + }, + exampleTypeB: { + backgroundColor: `blue`, + color: `yellow`, + border: { + width: 15, + color: `orange`, + }, + }, + exampleTypeC: { + backgroundColor: `purple`, + color: `cyan`, + border: null, + }, + exampleTypeD: { + backgroundColor: `magenta`, + color: `black`, + border: { + width: 24, + color: `white`, + }, + }, + }, + }); + + const renderer = TestRenderer.create( + + ); + + expect(renderer.toTree()?.rendered).toMatchObject({ + type: Hitbox, + props: { + onPress: expect.any(Function), + disabled: false, + style: { + backgroundColor: `blue`, + borderWidth: 15, + borderColor: `orange`, + paddingHorizontal: 41, + paddingVertical: 57, + borderRadius: 12, }, children: expect.objectContaining({ type: Text, diff --git a/types/FlashMessageStyle/index.tsx b/types/FlashMessageStyle/index.tsx index 6d2f7637..3cd5fdbc 100644 --- a/types/FlashMessageStyle/index.tsx +++ b/types/FlashMessageStyle/index.tsx @@ -31,6 +31,11 @@ export type FlashMessageStyle = { */ readonly verticalPadding: number; + /** + * The external margin to include below. + */ + readonly bottomMargin: number; + /** * Details specific to flash message types. */ diff --git a/types/FlashMessageStyle/readme.md b/types/FlashMessageStyle/readme.md index d87f8943..76231daf 100644 --- a/types/FlashMessageStyle/readme.md +++ b/types/FlashMessageStyle/readme.md @@ -13,6 +13,7 @@ const flashMessageStyle: FlashMessageStyle<`exampleTypeA` | `exampleTypeB` | `ex radius: 12, horizontalPadding: 41, verticalPadding: 57, + bottomMargin: 31, types: { exampleTypeA: { backgroundColor: `red`,