feat(dialog): export internal components

Anton Bilovus · boilund · commit 5d225969a3bc · 2022-02-22T09:11:27.000+01:00
Exports internal components to be able to build
custom dialogs.
diff --git a/packages/core/src/Dialog/Dialog.tsx b/packages/core/src/Dialog/Dialog.tsx
@@ -18,9 +18,11 @@ import { useScrollPosition } from 'react-hooks-shareable'
 
 import { Typography } from '../Typography'
 import { ModalProps } from '../Modal'
-import { Header } from './components/Header'
-import { Footer } from './components/Footer'
-import { MainSection } from './components/Content'
+import {
+  DialogHeaderContent,
+  DialogMainSection,
+  DialogFooterContent,
+} from './components'
 import {
   BaseDialog,
   DialogWidth,
@@ -78,16 +80,23 @@ export const Dialog: React.FC<DialogProps> = ({
     >
       {header !== undefined ? (
         <DialogHeader>
-          <Header shadowHidden={atTop !== false}>{header}</Header>
+          <DialogHeaderContent shadowHidden={atTop !== false}>
+            {header}
+          </DialogHeaderContent>
         </DialogHeader>
       ) : null}
       <DialogContent>
-        <MainSection scrollRef={scrollRef} hasHeader={header !== undefined}>
+        <DialogMainSection
+          scrollRef={scrollRef}
+          hasHeader={header !== undefined}
+        >
           {children}
-        </MainSection>
+        </DialogMainSection>
       </DialogContent>
       <DialogFooter>
-        <Footer shadowHidden={atBottom !== false}>{controls}</Footer>
+        <DialogFooterContent shadowHidden={atBottom !== false}>
+          {controls}
+        </DialogFooterContent>
       </DialogFooter>
     </BaseDialog>
   )
diff --git a/packages/core/src/Dialog/components/DialogFooterContent.tsx b/packages/core/src/Dialog/components/DialogFooterContent.tsx
@@ -1,7 +1,7 @@
 /**
- * Footer
+ * DialogFooterContent
  *
- * The Footer component adds a small margin to all its children
+ * The `DialogFooterContent` component adds a small margin to all its children
  *
  * Note: the footer items are rendered from right to left!! This also causes the
  * focus to land on the most important button first. If focus behaviour needs to
@@ -15,7 +15,9 @@ import styled from 'styled-components'
 import { spacing } from '../../designparams'
 import { DIALOG_PADDING } from './padding'
 
-export const Footer = styled.div<{ readonly shadowHidden: boolean }>`
+export const DialogFooterContent = styled.div<{
+  readonly shadowHidden: boolean
+}>`
   display: flex;
   flex-direction: row-reverse;
   box-sizing: border-box;
diff --git a/packages/core/src/Dialog/components/DialogHeaderContent.tsx b/packages/core/src/Dialog/components/DialogHeaderContent.tsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components'
+
 import { spacing } from '../../designparams'
 import { DIALOG_PADDING } from './padding'
 
-export const Header = styled.div<{
+export const DialogHeaderContent = styled.div<{
   readonly shadowHidden: boolean
 }>`
   box-sizing: border-box;
diff --git a/packages/core/src/Dialog/components/DialogMainSection.tsx b/packages/core/src/Dialog/components/DialogMainSection.tsx
@@ -5,7 +5,7 @@ import { spacing } from '../../designparams'
 import { DIALOG_PADDING } from './padding'
 
 /**
- * Content
+ * DialogMainSection
  *
  * Simple div to base other sections on. It comes with a default padding to make
  * sure this isn't left out of anything put in the dialog body. Sections can be
@@ -55,7 +55,7 @@ interface ScrollSectionProps {
   readonly scrollRef: React.Dispatch<React.SetStateAction<HTMLElement | null>>
 }
 
-export const ScrollSection: React.FunctionComponent<ScrollSectionProps> = ({
+export const ScrollSection: React.FC<ScrollSectionProps> = ({
   className,
   maxHeight,
   scrollRef,
@@ -66,8 +66,7 @@ export const ScrollSection: React.FunctionComponent<ScrollSectionProps> = ({
   </ScrollContainer>
 )
 
-/* stylelint-disable selector-type-no-unknown  */
-export const MainSection = styled(ScrollSection)<{
+export const DialogMainSection = styled(ScrollSection)<{
   readonly hasHeader: boolean
   readonly scrollRef: React.Dispatch<React.SetStateAction<HTMLElement | null>>
 }>`
diff --git a/packages/core/src/Dialog/components/index.ts b/packages/core/src/Dialog/components/index.ts
@@ -0,0 +1,3 @@
+export * from './DialogFooterContent'
+export * from './DialogHeaderContent'
+export * from './DialogMainSection'
diff --git a/packages/core/src/Dialog/index.ts b/packages/core/src/Dialog/index.ts
@@ -2,13 +2,14 @@ export * from './BaseDialog'
 export * from './AlertDialog'
 export * from './ConfirmDialog'
 export { DialogProps } from './Dialog'
+export * from './components'
 
 import { Dialog as DialogOriginal, HeaderTitle } from './Dialog'
 import {
   EdgeToEdgeSection,
   CenteredSection,
   ScrollSection,
-} from './components/Content'
+} from './components/DialogMainSection'
 
 type DialogOriginalType = typeof DialogOriginal
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from './DialogFooterContent'`
	`2`	`+export * from './DialogHeaderContent'`
	`3`	`+export * from './DialogMainSection'`