Skip to content

feat: modalBottomSheet의 subtitle 색상 변경, 버튼 스펙을 변경한다 #1041

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

Closed
rati-101 wants to merge 6 commits into from
Closed

feat: modalBottomSheet의 subtitle 색상 변경, 버튼 스펙을 변경한다 #1041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ffd4cc
fix: subtitle 색상을 onView1 -> onView2로 변경한다
rati-101 Jun 2, 2025
4bc8bd7
feat: buttonDirection prop을 추가하고 가능한 버튼 조합에 대한 스펙을 변경한다
rati-101 Jun 2, 2025
cc098a3
feat: primary, secondary, sub 버튼 모두 사용한 경우의 스토리를 추가한다
rati-101 Jun 2, 2025
075ae25
fix: 버튼 prop 관련 타입명을 변경한다
rati-101 Jun 2, 2025
308907d
feat: native에도 동일한 스펙을 적용한다
rati-101 Jun 4, 2025
863c34b
fix: buttonDirection horizontal일 때 버튼 순서를 변경한다
rati-101 Jun 4, 2025
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
116 changes: 66 additions & 50 deletions packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ContainedButton } from '../ContainedButton';
import { GhostButton } from '../GhostButton';
import { HStack } from '../HStack';
import { IconButton } from '../IconButton';
import { Stack } from '../Stack';
import { Title } from '../Title';
import { VStack } from '../VStack';
import { withModalBottomSheetVariation } from './ModalBottomSheetProps';
Expand All @@ -45,6 +46,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
transitionDuration = 300,
native_swipeToCloseThreshold = 0.4,
native_swipeToCloseVelocity = 200,
buttonDirection = 'vertical',
}) => {
const { getResponsiveValue } = useResponsiveValue();
const { generateStyle } = useSafeArea();
Expand Down Expand Up @@ -202,6 +204,23 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
[isOpen, renderOpener, setIsOpen]
);

const subButton = useMemo(
() =>
subButtonOptions ? (
<Box alignSelf="center" mt={12}>
<GhostButton
size="md"
onClick={() => subButtonOptions.onClick?.({ close: closeModal })}
disabled={subButtonOptions.disabled}
IconComponent={subButtonOptions.IconComponent}
>
{subButtonOptions.text}
</GhostButton>
</Box>
) : null,
[closeModal, subButtonOptions]
);

return (
<>
{opener}
Expand Down Expand Up @@ -286,27 +305,49 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
</ScrollBox>
)}

{isDefined(primaryButtonOptions) &&
!isDefined(secondaryButtonOptions) &&
!isDefined(subButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}
>
{primaryButtonOptions.text}
</ContainedButton>
</VStack>
)}
{isDefined(primaryButtonOptions) &&
isDefined(secondaryButtonOptions) &&
!isDefined(subButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0} width="100%" spacing={8}>
{isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}
>
{primaryButtonOptions.text}
</ContainedButton>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
{!isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0}>
<ContainedButton
kind={secondaryButtonOptions.kind ?? 'tertiary'}
size="xl"
onClick={() => secondaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={secondaryButtonOptions.disabled}
loading={secondaryButtonOptions.loading}
IconComponent={secondaryButtonOptions.IconComponent}
>
{secondaryButtonOptions.text}
</ContainedButton>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
{isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && (
<VStack>
<Stack
px={[20, 32]}
mt={[20, 24]}
flexShrink={0}
width="100%"
spacing={8}
direction={buttonDirection}
reverse={buttonDirection === 'horizontal' ? true : false}
>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
Expand All @@ -329,35 +370,10 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
>
{secondaryButtonOptions.text}
</ContainedButton>
</VStack>
)}
{isDefined(primaryButtonOptions) &&
!isDefined(secondaryButtonOptions) &&
isDefined(subButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0} width="100%" spacing={16}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}
>
{primaryButtonOptions.text}
</ContainedButton>
<Box alignSelf="center">
<GhostButton
size="md"
onClick={() => subButtonOptions.onClick?.({ close: closeModal })}
disabled={subButtonOptions.disabled}
IconComponent={subButtonOptions.IconComponent}
>
{subButtonOptions.text}
</GhostButton>
</Box>
</VStack>
)}
</Stack>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
</Box>
</ScrollBox>
</Animated.View>
Expand Down
16 changes: 15 additions & 1 deletion packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export const MultipleModal: ComponentStory<typeof ModalBottomSheet> = () => {
);
};

export const withButtonOptions: ComponentStory<typeof ModalBottomSheet> = () => (
export const withButtonOptions: ComponentStory<typeof ModalBottomSheet> = props => (
<HStack mt={200} width="100%" spacing={20}>
<ModalBottomSheet
title=""
Expand All @@ -167,6 +167,7 @@ export const withButtonOptions: ComponentStory<typeof ModalBottomSheet> = () =>
)}
primaryButtonOptions={{ text: 'primary', disabled: false }}
secondaryButtonOptions={{ text: 'secondary', disabled: false }}
buttonDirection={props.buttonDirection}
/>
<ModalBottomSheet
title=""
Expand All @@ -179,6 +180,19 @@ export const withButtonOptions: ComponentStory<typeof ModalBottomSheet> = () =>
primaryButtonOptions={{ text: 'primary', disabled: false }}
subButtonOptions={{ text: 'sub', disabled: false }}
/>
<ModalBottomSheet
title=""
defaultOpen={false}
renderOpener={({ open }) => (
<ContainedButton kind="primary" size="md" onClick={open}>
Primary + Secondary + Sub
</ContainedButton>
)}
primaryButtonOptions={{ text: 'primary', disabled: false }}
secondaryButtonOptions={{ text: 'secondary', disabled: false }}
subButtonOptions={{ text: 'sub', disabled: false }}
buttonDirection={props.buttonDirection}
/>
</HStack>
);

Expand Down
104 changes: 68 additions & 36 deletions packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ContainedButton } from '../ContainedButton';
import { GhostButton } from '../GhostButton';
import { HStack } from '../HStack';
import { IconButton } from '../IconButton';
import { Stack } from '../Stack';
import { Title } from '../Title';
import { VStack } from '../VStack';
import { withModalBottomSheetVariation } from './ModalBottomSheetProps';
Expand All @@ -37,6 +38,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
primaryButtonOptions,
secondaryButtonOptions,
subButtonOptions,
buttonDirection = 'vertical',
onClose,
showCloseButton = true,
dimClosable = true,
Expand Down Expand Up @@ -132,6 +134,23 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
return () => window.removeEventListener('keydown', onKeydown);
}, [closeModal, isOpen, dimClosable, showCloseButton]);

const subButton = useMemo(
() =>
subButtonOptions ? (
<Box alignSelf="center" mt={12}>
<GhostButton
size="md"
onClick={() => subButtonOptions.onClick?.({ close: closeModal })}
disabled={subButtonOptions.disabled}
IconComponent={subButtonOptions.IconComponent}
>
{subButtonOptions.text}
</GhostButton>
</Box>
) : null,
[closeModal, subButtonOptions]
);

return (
<>
{opener}
Expand Down Expand Up @@ -196,7 +215,15 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
)}
</HStack>
{subtitle ? (
<Body as="p" level={1} mt={[14, 20]} px={[20, 32]} flexShrink={0} whiteSpace="pre-wrap">
<Body
as="p"
level={1}
mt={[14, 20]}
px={[20, 32]}
flexShrink={0}
whiteSpace="pre-wrap"
color="onView2"
>
{subtitle}
</Body>
) : null}
Expand All @@ -207,7 +234,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
</ScrollBox>
)}

{isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && !isDefined(subButtonOptions) && (
{isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
Expand All @@ -220,21 +247,12 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
>
{primaryButtonOptions.text}
</ContainedButton>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
{isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && !isDefined(subButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0} width="100%" spacing={8}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}
>
{primaryButtonOptions.text}
</ContainedButton>

{!isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0}>
<ContainedButton
kind={secondaryButtonOptions.kind ?? 'tertiary'}
size="xl"
Expand All @@ -246,31 +264,45 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
>
{secondaryButtonOptions.text}
</ContainedButton>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
{isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && isDefined(subButtonOptions) && (
<VStack px={[20, 32]} mt={[20, 24]} flexShrink={0} width="100%" spacing={16}>
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}

{isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && (
<VStack>
<Stack
px={[20, 32]}
mt={[20, 24]}
flexShrink={0}
width="100%"
spacing={8}
direction={buttonDirection}
reverse={buttonDirection === 'horizontal' ? true : false}
>
{primaryButtonOptions.text}
</ContainedButton>
<Box alignSelf="center">
<GhostButton
size="md"
onClick={() => subButtonOptions.onClick?.({ close: closeModal })}
disabled={subButtonOptions.disabled}
IconComponent={subButtonOptions.IconComponent}
<ContainedButton
kind={primaryButtonOptions.kind ?? 'primary'}
size="xl"
onClick={() => primaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={primaryButtonOptions.disabled}
loading={primaryButtonOptions.loading}
IconComponent={primaryButtonOptions.IconComponent}
>
{primaryButtonOptions.text}
</ContainedButton>
<ContainedButton
kind={secondaryButtonOptions.kind ?? 'tertiary'}
size="xl"
onClick={() => secondaryButtonOptions.onClick?.({ close: closeModal })}
full={true}
disabled={secondaryButtonOptions.disabled}
loading={secondaryButtonOptions.loading}
IconComponent={secondaryButtonOptions.IconComponent}
>
{subButtonOptions.text}
</GhostButton>
</Box>
{secondaryButtonOptions.text}
</ContainedButton>
</Stack>
{isDefined(subButtonOptions) && subButton}
</VStack>
)}
</Box>
Expand Down
46 changes: 29 additions & 17 deletions packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,35 @@ export type ModalBottomSheetProps = Either<
* @default 200
*/
native_swipeToCloseVelocity?: number;
} & (
| {
primaryButtonOptions: ButtonOptions;
secondaryButtonOptions?: ButtonOptions;
subButtonOptions?: never;
}
| {
primaryButtonOptions: ButtonOptions;
secondaryButtonOptions?: never;
subButtonOptions?: Omit<ButtonOptions, 'kind' | 'loading'>;
}
| {
primaryButtonOptions?: never;
secondaryButtonOptions?: never;
subButtonOptions?: never;
}
);
} & (NoButtons | PrimaryButtonOnly | PrimarySecondaryButtons | SecondaryButtonOnly);

type PrimaryButtonOnly = {
primaryButtonOptions: ButtonOptions;
secondaryButtonOptions?: never;
subButtonOptions?: Omit<ButtonOptions, 'kind' | 'loading'>;
buttonDirection?: never;
};

type SecondaryButtonOnly = {
primaryButtonOptions?: never;
secondaryButtonOptions: ButtonOptions;
subButtonOptions?: Omit<ButtonOptions, 'kind' | 'loading'>;
buttonDirection?: never;
};

type PrimarySecondaryButtons = {
primaryButtonOptions: ButtonOptions;
secondaryButtonOptions: ButtonOptions;
subButtonOptions?: Omit<ButtonOptions, 'kind' | 'loading'>;
buttonDirection?: 'horizontal' | 'vertical';
};

type NoButtons = {
primaryButtonOptions?: never;
secondaryButtonOptions?: never;
subButtonOptions?: never;
buttonDirection?: never;
};

export type ButtonOptions = {
kind?: 'primary' | 'secondary' | 'tertiary';
Expand Down
Loading