Adjusts the size of the titles in Classic theme (#213)

* Adjusts the size of the titles in Classic theme. * Updating the story a bit. --------- Co-authored-by: Fábio Neves <[email protected]>
ClickHouse · Nov 15, 2023 · 3ec0a85 · 3ec0a85 · vercel · Nov 15, 2023
1 parent b97ea8b
commit 3ec0a85
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import styled, { keyframes } from "styled-components";
-import { Button, Icon, Spacer, Title } from "@/components";
+import { Button, Icon, Spacer } from "@/components";
 import { CrossButton } from "../commonElement";
 import { ButtonProps } from "@/components/Button/Button";
 
@@ -81,6 +81,12 @@ const TitleArea = styled.div`
   min-height: ${({ theme }) => theme.sizes[9]}; // 32px
 `;
 
+const Title = styled.h2`
+  font: ${({ theme }) => theme.click.dialog.typography.title.default};
+  padding: 0;
+  margin: 0;
+`;
+
 const CloseButton = ({ onClose }: { onClose?: () => void }) => (
   <RadixDialog.Close asChild>
     <CrossButton onClick={onClose}>
@@ -120,15 +126,10 @@ const DialogContent = ({
       {showOverlay && <DialogOverlay />}
       <ContentArea {...props}>
         <TitleArea>
-          <Title
-            size="xl"
-            type="h2"
-          >
-            {title}
-          </Title>
+          <Title>{title}</Title>
           {showClose && <CloseButton onClose={onClose} />}
         </TitleArea>
-        <Spacer />
+        <Spacer size="sm" />
         {children}
       </ContentArea>
     </RadixDialog.Portal>

diff --git a/src/components/Flyout/Flyout.stories.tsx b/src/components/Flyout/Flyout.stories.tsx
@@ -1,4 +1,4 @@
-import { Button } from "..";
+import { Button, Link, Text } from "..";
 import { Flyout, FlyoutProps } from "./Flyout";
 
 interface Props extends FlyoutProps {
@@ -11,7 +11,9 @@ interface Props extends FlyoutProps {
 const FlyoutExample = ({ title, description, align, size, ...props }: Props) => {
   return (
     <Flyout {...props}>
-      <Flyout.Trigger>Flyout Trigger</Flyout.Trigger>
+      <Flyout.Trigger>
+        <Link>Flyout Trigger</Link>
+      </Flyout.Trigger>
       <Flyout.Content
         strategy="fixed"
         size={size}
@@ -21,7 +23,9 @@ const FlyoutExample = ({ title, description, align, size, ...props }: Props) =>
           description={description}
         />
         <Flyout.Body align={align}>
-          <Flyout.Element>Content1 long text content</Flyout.Element>
+          <Flyout.Element>
+            <Text>Flyout content belongs here.</Text>
+          </Flyout.Element>
         </Flyout.Body>
         <Flyout.Footer>
           <Flyout.Close label="Cancel" />

diff --git a/src/components/Flyout/Flyout.tsx b/src/components/Flyout/Flyout.tsx
@@ -191,7 +191,7 @@ const FlexGrow = styled.div`
 const FlyoutTitle = styled(DialogTitle)`
   ${({ theme }) => `
     color: ${theme.click.flyout.color.title.default};
-    font: ${theme.typography.styles.product.titles.xl};
+    font: ${theme.click.flyout.typography.title.default};
     margin: 0;
     padding: 0;
   `}
@@ -200,7 +200,7 @@ const FlyoutTitle = styled(DialogTitle)`
 const FlyoutDescription = styled(DialogDescription)`
   ${({ theme }) => `
     color: ${theme.click.flyout.color.description.default};
-    font: ${theme.typography.styles.product.text.normal.md};
+    font: ${theme.click.flyout.typography.description.default};
     margin: 0;
     padding: 0;
   `}