Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOAPPX-334] Add alignItems prop to HStack and VStack components #297

Merged
merged 3 commits into from
Jul 5, 2024
Merged

[IOAPPX-334] Add alignItems prop to HStack and VStack components #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c40bf42
Add `alignItems` prop to `HStack` and `VStack` components
dmnplb Jun 25, 2024
61a4a29
Merge branch 'main' into IOAPPX-334-add-alignItems-vstack-hstack
dmnplb Jun 26, 2024
2a084bf
Merge branch 'main' into IOAPPX-334-add-alignItems-vstack-hstack
dmnplb Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 104 additions & 57 deletions example/src/pages/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,34 +122,20 @@ export const Layout = () => {
}}
>
<VStack space={16}>
{[...Array(3)].map((_el, i) => (
<View
key={`block-${i}`}
style={{
height: 32,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall
weight="Regular"
color={theme["textBody-tertiary"]}
>{`Block n.${i + 1}`}</LabelSmall>
</View>
))}
<View
style={{
height: 72,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
Different height
</LabelSmall>
</View>
<VStackBlocks />
</VStack>
</View>
</ComponentViewerBox>

<ComponentViewerBox name="VStack, space 16, centered">
<View
style={{
alignSelf: "flex-start",
backgroundColor: IOColors[theme["appBackground-secondary"]]
}}
>
<VStack space={16} alignItems="center">
<VStackBlocks />
</VStack>
</View>
</ComponentViewerBox>
Expand All @@ -161,35 +147,19 @@ export const Layout = () => {
}}
>
<HStack space={16}>
{[...Array(3)].map((_el, i) => (
<View
key={`block-${i}`}
style={{
width: 48,
height: 48,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall
weight="Regular"
color={theme["textBody-tertiary"]}
>{`${i + 1}`}</LabelSmall>
</View>
))}
<View
style={{
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
Growing block
</LabelSmall>
</View>
<HStackBlocks />
</HStack>
</View>
</ComponentViewerBox>

<ComponentViewerBox name="HStack, space 16, centered">
<View
style={{
backgroundColor: IOColors[theme["appBackground-secondary"]]
}}
>
<HStack space={16} alignItems="center">
<HStackBlocks />
</HStack>
</View>
</ComponentViewerBox>
Expand All @@ -214,3 +184,80 @@ export const Layout = () => {
</NoMarginScreen>
);
};

const VStackBlocks = () => {
const theme = useIOTheme();

return (
<>
{[...Array(3)].map((_el, i) => (
<View
key={`block-${i}`}
style={{
height: 32,
paddingHorizontal: 8,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall
weight="Regular"
color={theme["textBody-tertiary"]}
>{`Block n.${i + 1}`}</LabelSmall>
</View>
))}
<View
style={{
height: 72,
paddingHorizontal: 16,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
Different height
</LabelSmall>
</View>
</>
);
};

const HStackBlocks = () => {
const theme = useIOTheme();

return (
<>
{[...Array(3)].map((_el, i) => (
<View
key={`block-${i}`}
style={{
width: 48,
paddingVertical: 8,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>{`${
i + 1
}`}</LabelSmall>
</View>
))}
<View
style={{
flexGrow: 1,
paddingVertical: 16,
alignItems: "center",
justifyContent: "center",
backgroundColor: IOColors[theme["appBackground-tertiary"]]
}}
>
<LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
Growing block
</LabelSmall>
</View>
</>
);
};
13 changes: 8 additions & 5 deletions src/components/stack/Stack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import React, { ReactNode } from "react";
import { View } from "react-native";
import { View, ViewStyle } from "react-native";
import { IOSpacer } from "../../core";

type Stack = {
space?: IOSpacer;
children: ReactNode;
alignItems?: ViewStyle["alignItems"];
};

/**
Horizontal Stack component
@param {IOSpacer} space
*/
export const HStack = ({ space, children }: Stack) => (
export const HStack = ({ space, children, alignItems }: Stack) => (
<View
style={{
display: "flex",
flexDirection: "row",
columnGap: space
columnGap: space,
alignItems
}}
>
{children}
Expand All @@ -28,12 +30,13 @@ Vertical Stack component
@param {IOSpacer} space
*/

export const VStack = ({ space, children }: Stack) => (
export const VStack = ({ space, children, alignItems }: Stack) => (
<View
style={{
display: "flex",
flexDirection: "column",
rowGap: space
rowGap: space,
alignItems
}}
>
{children}
Expand Down
7 changes: 5 additions & 2 deletions src/core/IOSpacing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,12 @@ export type IOSpacingScale =
| 96;

// Values used in the new `<Spacer>` component
export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;
export type IOSpacer = Extract<
IOSpacingScale,
4 | 8 | 12 | 16 | 24 | 32 | 40 | 48
>;
export const IOSpacer: ReadonlyArray<IOSpacer> = [
4, 8, 16, 24, 32, 40, 48
4, 8, 12, 16, 24, 32, 40, 48
] as const;

// Margin values used in the new `<ContentWrapper>` component
Expand Down
Loading