primer / design

Primer Design Guidelines
https://primer.style/design
MIT License
662 stars 376 forks source link

Dialog.Footer missing from React Lib #849

Open maybebansky opened 3 months ago

maybebansky commented 3 months ago

According to the docs and storybook the Dialog should have a footer sub component: https://primer.style/react/storybook/?path=/story/components-dialog-features--repro-multistep-dialog-with-conditional-footer&globals=colorScheme:light

image

However this doenst seem to work:

import { Dialog, Box, Button, Textarea, FormControl } from "@primer/react";

export const Modal = () => {
  const handleSave = async () => {};

  return (
    <Dialog isOpen={true} onDismiss={() => {}} aria-labelledby="header">
      <Box>
        <Dialog.Header id="header">Header</Dialog.Header>

        <Box p={3}>
          <Box as="form">
            <FormControl>
              <FormControl.Label>Label</FormControl.Label>
              <Textarea name="value" block={true} />
            </FormControl>
          </Box>
          <Dialog.Footer>
            <Button variant="primary">Submit</Button>
          </Dialog.Footer>
        </Box>
      </Box>
    </Dialog>
  );
};

export default function Demo() {
  return (
    <Box p={20}>
      <Modal />
    </Box>
  );
}
error TS2339: Property 'Footer' does not exist on type 'ForwardRefExoticComponent<Omit<any, "ref"> & RefAttributes<HTMLDivElement>> & { Header: typeof DialogHeader; }'.

49           <Dialog.Footer

https://codesandbox.io/p/devbox/upbeat-wind-forked-jvjsty?file=%2Fsrc%2FDummy.tsx%3A1%2C1-34%2C1