📱(react) improve Modal responsive

The footer of the Modal component was not perfect on mobile, the sided
footer must be on two lines on mobile.
This commit is contained in:
Nathan Vasse
2024-02-27 11:21:15 +01:00
committed by NathanVss
parent 1707ad0b66
commit ce7a3d7c5b
2 changed files with 41 additions and 7 deletions

View File

@@ -84,6 +84,16 @@
&--sided {
justify-content: space-between;
gap: 0;
@include media(sm) {
flex-direction: column;
gap: 1rem;
align-items: center;
> div {
width: 100%;
}
}
}
&__left, &__right {

View File

@@ -85,33 +85,57 @@ export const PreventClose: Story = {
export const PrimaryButton: Story = {
args: {
size: ModalSize.MEDIUM,
rightActions: <Button color="primary">Primary</Button>,
rightActions: (
<Button color="primary" fullWidth={true}>
Primary
</Button>
),
},
};
export const SecondaryButton: Story = {
args: {
size: ModalSize.MEDIUM,
rightActions: <Button color="secondary">Secondary</Button>,
rightActions: (
<Button color="secondary" fullWidth={true}>
Secondary
</Button>
),
},
};
export const TwoButtons: Story = {
args: {
size: ModalSize.MEDIUM,
leftActions: <Button color="secondary">Secondary</Button>,
rightActions: <Button color="primary">Primary</Button>,
leftActions: (
<Button color="secondary" fullWidth={true}>
Secondary
</Button>
),
rightActions: (
<Button color="primary" fullWidth={true}>
Primary
</Button>
),
},
};
export const ThreeButtons: Story = {
args: {
size: ModalSize.MEDIUM,
leftActions: <Button color="tertiary">Tertiary</Button>,
leftActions: (
<Button color="tertiary" fullWidth={true}>
Tertiary
</Button>
),
rightActions: (
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button color="secondary" fullWidth={true}>
Secondary
</Button>
<Button color="primary" fullWidth={true}>
Primary
</Button>
</>
),
},