-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[IOAPPX-353] Add the new
FooterActions (from io-app) and `FooterA…
…ctionsInline` (#316) ## Short description This PR adds the new `FooterActions` (migrated from `io-app`) and the new `FooterActionsInline`, which replaces the legacy `FooterWithButtons`. So if you want to add actions to the footer you have several options: - **If you need a single button**, just use `FooterActions` with the `SingleButton` type - **If you need two buttons**, depending on your needs: - use `FooterActions` as recommended in the official guidelines - for special reasons (e.g. you need to save space), use `FooterActionsInline` to render both buttons on the same line - **If you need three buttons**, just use `FooterActions` with the `ThreeButtons` type Both `FooterActions` and `FooterActionsInline` come with two hooks, `useFooterActionsMeasurements` and `useFooterActionsInlineMeasurements` respectively, to get the `safeBottomAreaHeight` value to apply to the `ScrollView`'s `paddingBottom` ## List of changes proposed in this pull request - Add the new `FooterActions` and `FooterActionsInline` and relative hooks - Add the new demo screens to the example app - Add the new `IOSpacing` object with the common spacing constants - Update the deprecation note to `FooterWithButtons` - Add the deprecation note to `BlockButtons` ### Preview https://github.com/user-attachments/assets/027914cf-3427-4bed-9a0e-9f208fd66c49 ## How to test 1. Launch the example app 2. Go to the `FooterActions…` screens --------- Co-authored-by: Cristiano Tofani <[email protected]>
- Loading branch information
1 parent
492b8a6
commit ef084b2
Showing
26 changed files
with
1,061 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { | ||
| FooterActionsInline, | ||
| IOColors, | ||
| VSpacer, | ||
| useIOTheme | ||
| } from "@pagopa/io-app-design-system"; | ||
| import React from "react"; | ||
| import { Alert, ScrollView, StyleSheet, Text, View } from "react-native"; | ||
|
|
||
| const onButtonPress = () => { | ||
| Alert.alert("Alert", "Action triggered"); | ||
| }; | ||
|
|
||
| export const FooterActionsInlineNotFixed = () => { | ||
| const theme = useIOTheme(); | ||
|
|
||
| return ( | ||
| <ScrollView> | ||
| {[...Array(9)].map((_el, i) => ( | ||
| <React.Fragment key={`view-${i}`}> | ||
| <View | ||
| style={[ | ||
| styles.block, | ||
| { backgroundColor: IOColors[theme["appBackground-secondary"]] } | ||
| ]} | ||
| > | ||
| <Text style={{ color: IOColors[theme["textBody-tertiary"]] }}> | ||
| {`Block ${i}`} | ||
| </Text> | ||
| </View> | ||
| <VSpacer size={4} /> | ||
| </React.Fragment> | ||
| ))} | ||
| <FooterActionsInline | ||
| fixed={false} | ||
| startAction={{ | ||
| label: "Secondary", | ||
| onPress: onButtonPress | ||
| }} | ||
| endAction={{ | ||
| label: "Primary", | ||
| onPress: onButtonPress | ||
| }} | ||
| /> | ||
| </ScrollView> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| block: { | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| aspectRatio: 16 / 10 | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { | ||
| Body, | ||
| ButtonOutline, | ||
| ContentWrapper, | ||
| FooterActionsInline, | ||
| H1, | ||
| useFooterActionsInlineMeasurements | ||
| } from "@pagopa/io-app-design-system"; | ||
| import * as React from "react"; | ||
| import { Alert, ScrollView, View } from "react-native"; | ||
|
|
||
| /** | ||
| * This Screen is used to test components in isolation while developing. | ||
| * @returns a screen with a flexed view where you can test components | ||
| */ | ||
| export const FooterActionsInlineScreen = () => { | ||
| const { | ||
| footerActionsInlineMeasurements, | ||
| handleFooterActionsInlineMeasurements | ||
| } = useFooterActionsInlineMeasurements(); | ||
|
|
||
| return ( | ||
| <View> | ||
| <ScrollView | ||
| contentContainerStyle={{ | ||
| paddingBottom: footerActionsInlineMeasurements.safeBottomAreaHeight | ||
| }} | ||
| > | ||
| <ContentWrapper> | ||
| <H1>Footer Actions (inline)</H1> | ||
| {[...Array(50)].map((_el, i) => ( | ||
| <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body> | ||
| ))} | ||
| <ButtonOutline | ||
| color="primary" | ||
| accessibilityLabel="Test ButtonOutline" | ||
| onPress={() => Alert.alert("Button pressed")} | ||
| label="Test Button" | ||
| /> | ||
| {[...Array(10)].map((_el, i) => ( | ||
| <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body> | ||
| ))} | ||
| </ContentWrapper> | ||
| </ScrollView> | ||
| <FooterActionsInline | ||
| onMeasure={handleFooterActionsInlineMeasurements} | ||
| startAction={{ | ||
| color: "primary", | ||
| label: "Outline button", | ||
| onPress: () => Alert.alert("Button pressed") | ||
| }} | ||
| endAction={{ | ||
| color: "primary", | ||
| onPress: () => Alert.alert("Button pressed"), | ||
| label: "Solid button" | ||
| }} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; |
Oops, something went wrong.