Box

import { Box, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Text>Enable your screen reader to hear the following text:</Text>
      <Box position="relative">
        <Box display="visuallyHidden">Hi there.</Box>
      </Box>
    </Flex>
  );
}

import { Box, Flex, Heading, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      direction="column"
      flex="grow"
      height="100%"
      width="100%"
    >
      <Flex height="100%" width="100%">
        <Box
          as="nav"
          borderStyle="sm"
          color="successBase"
          column={6}
          padding={2}
          title="as prop example nav"
          width="100%"
        >
          <Text color="light" weight="bold">
            Top Nav Menu: <code>as=&quot;nav&quot;</code>
          </Text>
        </Box>
        <Box borderStyle="sm" column={6} display="inlineBlock">
          <Box padding={2} width="100%">
            <Text>
              HTML output:
              <br />
              <code>{'<nav>Menu</nav>'}</code>
            </Text>
          </Box>
        </Box>
      </Flex>

      <Flex height="100%" width="100%">
        <Box
          as="article"
          borderStyle="sm"
          color="successBase"
          column={6}
          padding={2}
          width="100%"
        >
          <Heading color="light" size="500">
            Article 1
          </Heading>
          <Text color="light" weight="bold">
            Article: <code>as=&quot;article&quot;</code>
          </Text>
        </Box>
        <Box borderStyle="sm" column={6} display="inlineBlock">
          <Box padding={2} width="100%">
            <Text>
              HTML output:
              <br />
              <code>
                {'<article>'}
                <br />
                {'  <h2>Article 1</h2>'}
                <br />
                {'</article>'}
              </code>
            </Text>
          </Box>
        </Box>
      </Flex>
    </Flex>
  );
}

import { Box, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex alignItems="center" height="100%" width="100%">
      <Box column={12}>
        <Box color="infoBase" padding={2} role="feed" width="100%">
          <Text color="light" weight="bold">
            Container: role=&quot;feed&quot;
          </Text>
          <Box column={8} display="inlineBlock">
            <Box
              color="successBase"
              height={50}
              padding={2}
              role="article"
              title="Article 1"
              width="100%"
            >
              <Text color="light" weight="bold">
                Content: role=&quot;article&quot;
              </Text>
            </Box>
          </Box>
          <Box column={4} display="inlineBlock">
            <Box
              color="warningBase"
              height={50}
              padding={2}
              role="form"
              width="100%"
            >
              <Text color="light" weight="bold">
                Contact Form: role=&quot;form&quot;
              </Text>
            </Box>
          </Box>
        </Box>
        <Box
          color="successBase"
          height={50}
          padding={2}
          role="navigation"
          title="Site Map"
          width="100%"
        >
          <Text color="light" weight="bold">
            Site Map: role=&quot;navigation&quot;
          </Text>
        </Box>
        <Text>{'Everything above will render as a <div>'}</Text>
      </Box>
    </Flex>
  );
}

import { Box, Button, Flex, Text } from 'gestalt';

function BoxWithMargins({ marginEnd = 0, marginStart = 0 }) {
  return (
    <Box
      dangerouslySetInlineStyle={{
        __style: { backgroundColor: 'rgb(110 15 60 / 0.2)' },
      }}
    >
      <Box
        dangerouslySetInlineStyle={{
          __style: { backgroundColor: 'rgb(19 58 94 / 0.2)' },
        }}
        marginEnd={marginEnd}
        marginStart={marginStart}
        padding={2}
        width={200}
      >
        <Text>
          {JSON.stringify(
            `marginEnd: ${marginEnd}, marginStart: ${marginStart}`
          )}
        </Text>
      </Box>
    </Box>
  );
}

export default function Example() {
  return (
    <Flex
      alignItems="center"
      direction="column"
      gap={2}
      height="100%"
      justifyContent="center"
    >
      <Button
        onClick={() => {
          if (document.documentElement) {
            const isRTL = document.documentElement.dir === 'rtl';
            document.documentElement.dir = isRTL ? 'ltr' : 'rtl';
          }
        }}
        size="sm"
        text="Toggle Page Direction"
      />

      <BoxWithMargins marginStart={8} />
      <BoxWithMargins marginEnd={8} />
      <BoxWithMargins marginStart={-8} />
      <BoxWithMargins marginEnd={-8} />
    </Flex>
  );
}

import { Box, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex alignItems="center" height="100%">
      <Box column={12}>
        <Box
          borderStyle="lg"
          color="warningBase"
          maxHeight={100}
          minHeight={25}
          overflow="hidden"
          padding={2}
          width="25%"
        >
          <Text color="light">
            Add or remove text in the editor to see the min and max heights take
            affect.
          </Text>
        </Box>
        <Box
          borderStyle="lg"
          color="successBase"
          height={100}
          padding={2}
          width="50%"
        >
          <Text color="light">
            Width and Height can be specified with numbers for &quot;px&quot;
            values or percentages
          </Text>
        </Box>
        <Box
          borderStyle="lg"
          color="infoBase"
          maxWidth={500}
          minWidth={100}
          padding={2}
          width="75%"
        >
          <Text color="light">
            Change the screen width to see the min and max widths take affect{' '}
          </Text>
        </Box>
        <Box borderStyle="lg" color="errorBase" fit padding={2}>
          <Text color="light">&quot;fit&quot; sets width to 100% </Text>
        </Box>
      </Box>
    </Flex>
  );
}

import { Box, Flex, Text } from 'gestalt';

export default function Example() {
  const text =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisl nec turpis vehicula ultrices. Duis pretium ut ipsum nec interdum. Vestibulum arcu dolor, consectetur ac eros a, varius commodo justo. Maecenas tincidunt neque elit, eu pretium arcu dictum ac. Donec vehicula mauris ut erat dictum, eget tempus elit luctus. In volutpat felis justo, et venenatis arcu viverra in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin enim lorem, vulputate eget imperdiet nec, dapibus sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse rhoncus ut leo non gravida. Nulla tincidunt tellus sit amet ornare venenatis. Sed quis lorem cursus, porttitor tellus sed, commodo ex. Praesent blandit pretium faucibus. Aenean orci tellus, vulputate id sapien sit amet, porta fermentum quam. Praesent sem risus, tristique sit amet pulvinar in, scelerisque sit amet massa.';

  return (
    <Flex
      alignItems="center"
      gap={4}
      height="100%"
      justifyContent="center"
      width="100%"
      wrap
    >
      <Flex direction="column" gap={{ column: 8, row: 0 }} wrap>
        <Box>
          <Text>Overflow Hidden</Text>
          <Box
            borderStyle="lg"
            maxHeight={100}
            overflow="hidden"
            padding={2}
            width={300}
          >
            <Text>{text}</Text>
          </Box>
        </Box>
        <Box>
          <Text>Overflow Scroll</Text>
          <Box
            borderStyle="lg"
            maxHeight={100}
            overflow="scroll"
            padding={2}
            tabIndex={0}
            width={300}
          >
            <Text>{text}</Text>
          </Box>
        </Box>
        <Box marginBottom={4}>
          <Text>Overflow Visible</Text>
          <Box
            borderStyle="lg"
            maxHeight={100}
            overflow="visible"
            padding={2}
            width={300}
          >
            <Text>{text.substring(0, 180)}</Text>
          </Box>
        </Box>
        <Box>
          <Text>Overflow Auto</Text>
          <Box
            color="selected"
            maxHeight={100}
            overflow="auto"
            padding={2}
            width={300}
          >
            <Box color="default" padding={2} tabIndex={0} width={350}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollX</Text>
          <Box
            color="selected"
            maxHeight={100}
            overflow="scrollX"
            padding={2}
            width={300}
          >
            <Box color="default" padding={2} tabIndex={0} width={350}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollY</Text>
          <Box
            color="selected"
            maxHeight={100}
            overflow="scrollY"
            padding={2}
            width={300}
          >
            <Box color="default" padding={2} tabIndex={0} width={350}>
              <Text>{text}</Text>
            </Box>
          </Box>
        </Box>
      </Flex>
    </Flex>
  );
}

import { Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      gap={{ column: 0, row: 3 }}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Box
        color="darkWash"
        lgPadding={8}
        mdPadding={4}
        padding={0}
        smPadding={1}
      >
        <Box color="successBase" height={40} width={40} />
      </Box>
      <Box
        color="darkWash"
        lgPaddingX={8}
        mdPaddingX={4}
        paddingX={0}
        smPaddingX={1}
      >
        <Box color="infoBase" height={40} width={40} />
      </Box>
      <Box
        color="darkWash"
        lgPaddingY={8}
        mdPaddingY={4}
        paddingY={0}
        smPaddingY={1}
      >
        <Box color="warningBase" height={40} width={40} />
      </Box>
    </Flex>
  );
}

import { Box, Flex } from 'gestalt';

export default function Example() {
  return (
    <Flex height="100%" justifyContent="center" width="100%">
      <Box color="infoBase" column={12} marginEnd={12} marginStart={12}>
        <Box
          borderStyle="sm"
          color="successBase"
          column={5}
          height={100}
          margin="auto"
        />
        <Box
          borderStyle="sm"
          color="warningBase"
          column={3}
          height={100}
          marginStart="auto"
        />
      </Box>
    </Flex>
  );
}

import { Box, Text } from 'gestalt';

export default function Example() {
  return (
    <Box height="100%" width="100%">
      <Box color="infoBase" left padding={2} position="absolute" top>
        <Text color="light">Top Left</Text>
      </Box>
      <Box color="infoBase" padding={2} position="absolute" right top>
        <Text color="light">Top Right</Text>
      </Box>
      <Box bottom color="infoBase" left padding={2} position="absolute">
        <Text color="light">Bottom Left</Text>
      </Box>
      <Box bottom color="infoBase" padding={2} position="absolute" right>
        <Text color="light">Bottom Right</Text>
      </Box>
    </Box>
  );
}

import { Fragment, useRef, useState } from 'react';
import { Box, Button, Flex, Popover, Text } from 'gestalt';

export default function Example() {
  const [open, setOpen] = useState(false);

  const anchorRef = useRef(null);

  return (
    <Fragment>
      <Flex
        alignItems="center"
        direction="column"
        gap={6}
        height="100%"
        justifyContent="center"
        width="100%"
      >
        <Button
          color="red"
          onClick={() => setOpen((prevVal) => !prevVal)}
          text={open ? 'Close Popover' : 'Anchor a Popover to Box'}
        />

        <Box ref={anchorRef} borderStyle="sm" padding={3} rounding={1}>
          <Text>I&apos;m a Box</Text>
        </Box>
      </Flex>
      {open && (
        <Popover
          anchor={anchorRef.current}
          idealDirection="down"
          onDismiss={() => {}}
          shouldFocus={false}
        >
          <Box padding={3}>
            <Text weight="bold">I&apos;m a Popover anchored to a Box</Text>
          </Box>
        </Popover>
      )}
    </Fragment>
  );
}

import { Box, CompositeZIndex, FixedZIndex, Sticky, Text } from 'gestalt';

export default function Example() {
  const HEADER_ZINDEX = new FixedZIndex(100);
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);
  return (
    <Box
      column={12}
      dangerouslySetInlineStyle={{ __style: { isolation: 'isolate' } }}
      height={150}
      overflow="scroll"
      tabIndex={0}
    >
      <Sticky top={0} zIndex={HEADER_ZINDEX}>
        <Box color="errorBase" height={60} padding={2} width="80%">
          <Text color="light">
            This is sticky and won&apos;t move when scrolling
          </Text>
        </Box>
      </Sticky>
      <Box
        color="infoBase"
        height={100}
        padding={2}
        position="relative"
        width="50%"
        zIndex={zIndex}
      >
        <Text color="light">
          This will float above the sticky Box when scrolling
        </Text>
      </Box>
      <Box color="successBase" height={120} padding={2} width="30%">
        <Text color="light">
          This will go behind the sticky Box when scrolling
        </Text>
      </Box>
    </Box>
  );
}