
## Feature Examples


### Structure
- description: <p><code>FullScreenModalLayout</code> is built from three components:</p><li><code>FullScreenModalLayout.Header</code></li><li><code>FullScreenModalLayout.Content</code></li><li><code>FullScreenModalLayout.Footer</code></li>
- example: 
```jsx 
() => {
  const [isOpen, setIsOpen] = React.useState(false);

  const closeModal = () => setIsOpen(false);

  return (
    <Box padding="20px" gap="20px" direction="vertical">
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal isOpen={isOpen} onRequestClose={closeModal}>
        <FullScreenModalLayout>
          <FullScreenModalLayout.Header
            startNode={
              <Box border="1px dashed" padding="SP2">
                1 Node slot
              </Box>
            }
            endNode={
              <Box border="1px dashed" padding="SP2">
                2 Node slot
              </Box>
            }
          >
            <Box direction="vertical" gap="SP1">
              <Text>Modal title goes here</Text>
              <Text size="small" secondary>
                Subtitle goes here
              </Text>
            </Box>
          </FullScreenModalLayout.Header>

          <FullScreenModalLayout.Content padding>
            <Box
              border="1px dashed"
              height="240px"
              padding="SP4"
              direction="vertical"
              align="space-between"
            >
              <Box direction="vertical" align="center" gap="SP2">
                <Text>Modal content starts here</Text>
                <TextButton onClick={closeModal}>Close modal</TextButton>
              </Box>
              <Text>Modal content ends here</Text>
            </Box>
          </FullScreenModalLayout.Content>

          <FullScreenModalLayout.Footer>
            <Box border="1px dashed" padding="SP3">
              <Text>Footer is sticky</Text>
            </Box>
          </FullScreenModalLayout.Footer>
        </FullScreenModalLayout>
      </Modal>
    </Box>
  );
};
```

### Animation
- description: <p>Control <code>FullScreenModalLayout</code>  animation styles using <code>Modal</code> transition property:</p><p><code>zoomIn</code> (default) - the modal appears from the middle of the screen</p><li><code>moveVertical</code>  - the modal slides in from the bottom </li><li><code>moveHorizontal</code> - the modal slides in from the right side of the screen</li>
- example: 
```jsx 
() => {
  const ModalWithButton = ({
    isOpen: isOpenProp = false,
    buttonLabel,
    transition,
    children,
  }: {
    isOpen?: boolean;
    buttonLabel: string;
    transition: 'moveHorizontal' | 'moveVertical';
    children: ({
      isOpen,
      close,
    }: {
      isOpen: boolean;
      close: () => void;
    }) => React.ReactNode;
  }) => {
    const [isOpen, setIsOpen] = React.useState(isOpenProp);
    const close = React.useCallback(() => setIsOpen(false), []);

    return (
      <>
        <Button onClick={() => setIsOpen(true)}>{buttonLabel}</Button>
        <Modal transition={transition} isOpen={isOpen} onRequestClose={close}>
          {children({ isOpen, close })}
        </Modal>
      </>
    );
  };

  return (
    <StorybookComponents.Stack>
      <ModalWithButton
        buttonLabel="Horizontal transition"
        transition="moveHorizontal"
      >
        {({ close }) => (
          <FullScreenModalLayout>
            <FullScreenModalLayout.Header
              startNode={
                <CloseButton skin="dark" size="large" onClick={close} />
              }
              endNode={
                <TextButton size="small" onClick={close}>
                  Save
                </TextButton>
              }
            >
              <Text size="small" weight="normal" ellipsis>
                Modal Title
              </Text>
            </FullScreenModalLayout.Header>
            <FullScreenModalLayout.Content padding>
              <Text>This is the main content area with padding.</Text>
            </FullScreenModalLayout.Content>
            <FullScreenModalLayout.Footer>
              <Text>Footer</Text>
            </FullScreenModalLayout.Footer>
          </FullScreenModalLayout>
        )}
      </ModalWithButton>

      <ModalWithButton
        buttonLabel="Vertical transition"
        transition="moveVertical"
      >
        {({ close }) => (
          <FullScreenModalLayout>
            <FullScreenModalLayout.Header
              startNode={
                <CloseButton skin="dark" size="large" onClick={close} />
              }
              endNode={
                <TextButton size="small" onClick={close}>
                  Save
                </TextButton>
              }
            >
              <Text size="small" weight="normal" ellipsis>
                Modal Title
              </Text>
            </FullScreenModalLayout.Header>
            <FullScreenModalLayout.Content padding>
              <Text>This is the main content area with padding.</Text>
            </FullScreenModalLayout.Content>
            <FullScreenModalLayout.Footer>
              <Text>Footer</Text>
            </FullScreenModalLayout.Footer>
          </FullScreenModalLayout>
        )}
      </ModalWithButton>
    </StorybookComponents.Stack>
  );
};
```




    


## Common Use Case Examples


### Long forms
- description: <p>It is recommended to use <code>FullScreenModalLayout.Footer</code> for modals that are longer. This way the main actions are always visible to users</p>
- example: 
```jsx 
() => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <StorybookComponents.Stack>
      <Button onClick={openModal} prefixIcon={<Icons.Add />}>
        New dish
      </Button>

      <Modal
        isOpen={isOpen}
        onRequestClose={closeModal}
        transition="moveVertical"
      >
        <FullScreenModalLayout>
          {/* HEADER */}
          <FullScreenModalLayout.Header
            startNode={
              <CloseButton skin="dark" size="large" onClick={closeModal} />
            }
            endNode={
              <TextButton size="small" onClick={closeModal}>
                Save
              </TextButton>
            }
          >
            <Text size="small" weight="normal">
              New dish
            </Text>
          </FullScreenModalLayout.Header>

          {/* CONTENT */}
          <FullScreenModalLayout.Content padding>
            <Box direction="vertical" gap="24px">

              <FormField label="Image">
                <ImageViewer width="100%" height="176px" />
              </FormField>

              <FormField label="Name">
                <Input value="My New Dish" />
              </FormField>

              <FormField label="Price">
                <Input value="0" prefix={<Input.Affix>$</Input.Affix>} />
              </FormField>

              <FormField label="Description">
                <InputArea
                  placeholder="Describe your dish in a few sentences."
                  resizable
                  rows={3}
                />
              </FormField>

              <FormField
                label="Dietary preferences"
                infoContent="Choose which dietary preferences your dish is appropriate for."
              >
                <Box direction="vertical" gap="12px">
                  <Checkbox>No salt</Checkbox>
                  <Checkbox>Vegan</Checkbox>
                  <Checkbox>Vegetarian</Checkbox>
                  <Checkbox>Gluten free</Checkbox>
                  <Checkbox>Organic</Checkbox>
                  <Checkbox>Spicy</Checkbox>
                </Box>
              </FormField>

              <FormField label="Visibility">
                <Checkbox checked>Visible on site</Checkbox>
              </FormField>

              <FormField label="Availability">
                <Checkbox checked>In stock</Checkbox>
              </FormField>
            </Box>
          </FullScreenModalLayout.Content>

          {/* FOOTER */}
          <FullScreenModalLayout.Footer>
            <StorybookComponents.Stack spacing="12px" width="100%">
              <Button fullWidth priority="secondary" onClick={closeModal}>
                Cancel
              </Button>
              <Button fullWidth onClick={closeModal}>
                Create dish
              </Button>
            </StorybookComponents.Stack>
          </FullScreenModalLayout.Footer>
        </FullScreenModalLayout>
      </Modal>
    </StorybookComponents.Stack>
  );
};
```

### Push screens
- description: <p>You can use <code>FullScreenModalLayout</code> as push screens</p>
- example: 
```jsx 
() => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [newsletter, setNewsletter] = React.useState(true);

  const open = () => setIsOpen(true);
  const close = () => setIsOpen(false);

  return (
    <StorybookComponents.Stack>
      <Button onClick={open}>Show upgrade message</Button>

      <Modal
        isOpen={isOpen}
        onRequestClose={close}
        transition="moveHorizontal"
      >
        <FullScreenModalLayout>
          {/* Header */}
          <FullScreenModalLayout.Header
            startNode={
              <CloseButton skin="dark" size="large" onClick={close} />
            }
          >
            <Text size="small" weight="normal">
              Upgrade to accept payments
            </Text>
          </FullScreenModalLayout.Header>

          {/* Content */}
          <FullScreenModalLayout.Content padding>
            <Layout cols={1} alignItems="vertical" gap="24px">
              
              {/* Intro text */}
              <Text size="small">
                Unlock secure online payments and help your business grow with a Business Basic plan.
              </Text>

              {/* Benefits list */}
              <Box direction="vertical" gap="12px">
                <Text weight="bold">What you get:</Text>
                <Box direction="vertical" gap="6px">
                  <Text size="small">• Accept credit and debit card payments</Text>
                  <Text size="small">• Automated invoice and tax handling</Text>
                  <Text size="small">• Faster payouts to your bank</Text>
                </Box>
              </Box>

              {/* Optional settings */}
              <FormField label="Notifications">
                <ToggleSwitch
                  checked={newsletter}
                  onChange={() => setNewsletter(!newsletter)}
                />
              </FormField>

              <Box>
                <Text size="small" secondary>
                  Enabling notifications helps you stay updated on payouts and payment changes.
                </Text>
              </Box>

            </Layout>
          </FullScreenModalLayout.Content>

          {/* Footer */}
          <FullScreenModalLayout.Footer>
            <StorybookComponents.Stack spacing="12px" width="100%">
              <Button
                fullWidth
                priority="secondary"
                onClick={close}
              >
                Not now
              </Button>

              <Button
                fullWidth
                skin="premium"
                onClick={close}
              >
                Upgrade
              </Button>
            </StorybookComponents.Stack>
          </FullScreenModalLayout.Footer>

        </FullScreenModalLayout>
      </Modal>
    </StorybookComponents.Stack>
  );
};
```

### Multiple actions
- description: <p></p>
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  const openModal = () => setShown(true);
  const closeModal = () => setShown(false);

  return (
    <Layout>
      <Cell span={6}>
        <Card>
          <Box
            direction="vertical"
            gap="1"
            paddingTop="2"
            paddingLeft="4"
            paddingRight="4"
            paddingBottom="2"
          >
            <Text secondary>From name:</Text>
            <Text weight="bold">User 1</Text>

            <Text secondary>Reply-to email:</Text>
            <Text weight="bold">user1@mail.com</Text>
          </Box>

          <Divider />

          <Box padding="12px" align="center">
            <TextButton onClick={openModal}>Confirm Email</TextButton>
          </Box>

          {/* Full Screen Modal */}
          <Modal
            isOpen={shown}
            onRequestClose={closeModal}
            transition="moveVertical"
          >
            <FullScreenModalLayout>
              {/* HEADER */}
              <FullScreenModalLayout.Header
                startNode={
                  <CloseButton
                    skin="dark"
                    size="large"
                    onClick={closeModal}
                  />
                }
                endNode={
                  <TextButton size="small" onClick={closeModal}>
                    Change Details
                  </TextButton>
                }
              >
                <Text size="small" weight="normal">
                  Confirm your email address
                </Text>
              </FullScreenModalLayout.Header>

              {/* CONTENT */}
              <FullScreenModalLayout.Content padding>
                <StorybookComponents.Stack flexDirection="column" spacing="24px">
                  <Text>
                    To make changes to your sender details, please confirm
                    your email address.
                    <br />
                    A confirmation code was sent to <b>user1@mail.com</b>.
                  </Text>

                  <FormField label="Confirmation Code">
                    <Input placeholder="XX-XXX-XX" />
                  </FormField>

                  <Text>
                    Didn’t get the code? <a>Send again</a>
                  </Text>
                </StorybookComponents.Stack>
              </FullScreenModalLayout.Content>

              {/* FOOTER */}
              <FullScreenModalLayout.Footer>
                <StorybookComponents.Stack spacing="12px" width="100%">
                  <Button fullWidth onClick={closeModal}>
                    Confirm
                  </Button>

                  <Button
                    fullWidth
                    priority="secondary"
                    onClick={closeModal}
                  >
                    Cancel
                  </Button>
                </StorybookComponents.Stack>
              </FullScreenModalLayout.Footer>
            </FullScreenModalLayout>
          </Modal>
        </Card>
      </Cell>
    </Layout>
  );
};
```


