fixes typescript errors, removes Dialog's 'sx' prop dev stories

Author: mperrotti

packages/react/src/Dialog/Dialog.dev.stories.tsx

@@ -87,113 +87,6 @@ export const WithCss = ({width, height, subtitle}: DialogStoryProps) => {
   )
 }
 
-function SxHeader({title, subtitle, dialogLabelId}: React.PropsWithChildren<DialogProps & {dialogLabelId: string}>) {
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Dialog.Header sx={{color: 'accent.emphasis'}}>
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-      </Dialog.Header>
-    )
-  }
-  return null
-}
-function SxBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{color: 'danger.emphasis'}}>{children}</Dialog.Body>
-}
-function SxFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{fontFamily: 'Times New Roman'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithSx = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={SxHeader}
-          renderBody={SxBody}
-          renderFooter={SxFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'},
-          ]}
-          sx={{borderColor: 'accent.emphasis', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-function SxAndCssHeader({
-  title,
-  subtitle,
-  dialogLabelId,
-}: React.PropsWithChildren<DialogProps & {dialogLabelId: string}>) {
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Dialog.Header sx={{color: 'accent.emphasis'}} className="testCustomClassnameColor">
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-      </Dialog.Header>
-    )
-  }
-  return null
-}
-function SxAndCssBody({children}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Body sx={{color: 'danger.emphasis'}} className="testCustomClassnameColor">
-      {children}
-    </Dialog.Body>
-  )
-}
-function SxAndCssFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{fontFamily: 'Times New Roman'}} className="testCustomClassnameMono">
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithSxAndCss = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(true)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={SxAndCssHeader}
-          renderBody={SxAndCssBody}
-          renderFooter={SxAndCssFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'},
-          ]}
-          sx={{borderColor: 'border.accent', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
-          className="testCustomClassnameBorder"
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
 export const WithScrollBody = () => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)

packages/react/src/Dialog/Dialog.features.stories.tsx

@@ -79,11 +79,11 @@ function CustomHeader({
   return null
 }
 function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+  return <Dialog.Body style={{backgroundColor: 'var(--bgColor-danger-muted)'}}>{children}</Dialog.Body>
 }
 function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
   return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
+    <Dialog.Footer style={{backgroundColor: 'var(--bgColor-attention-muted)'}}>
       {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
     </Dialog.Footer>
   )