Small adjustments (#1084)

* refactor: small adjustments * refactor: small adjustments
mittwald · Dec 18, 2024 · 6991922 · 6991922
1 parent 30b1e1f
commit 6991922
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx
@@ -8,6 +8,8 @@ import { getColorFromChildren } from "@/components/Avatar/lib/getColorFromChildr
 import type { PropsWithClassName } from "@/lib/types/props";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import { deepHas } from "@/lib/react/deepHas";
+import { Initials } from "@/components/Initials";
 
 export const avatarColors = [
   "blue",
@@ -30,11 +32,13 @@ export interface AvatarProps
 export const Avatar = flowComponent("Avatar", (props) => {
   const { children, className, color, size = "m", refProp: ref } = props;
 
+  const hasInitials = deepHas(children, Initials);
+
   const rootClassName = clsx(
     styles.avatar,
     styles[`size-${size}`],
     className,
-    styles[color ?? getColorFromChildren(children)],
+    styles[(color ?? hasInitials) ? getColorFromChildren(children) : "blue"],
   );
 
   const propsContext: PropsContext = {

diff --git a/packages/components/src/components/CopyButton/CopyButton.tsx b/packages/components/src/components/CopyButton/CopyButton.tsx
@@ -20,7 +20,13 @@ export interface CopyButtonProps
 }
 
 export const CopyButton = flowComponent("CopyButton", (props) => {
-  const { text, refProp: ref, variant = "plain", ...buttonProps } = props;
+  const {
+    text,
+    refProp: ref,
+    variant = "plain",
+    color = "secondary",
+    ...buttonProps
+  } = props;
 
   const stringFormatter = useLocalizedStringFormatter(locales);
 
@@ -39,6 +45,7 @@ export const CopyButton = flowComponent("CopyButton", (props) => {
             {...buttonProps}
             ref={ref}
             variant={variant}
+            color={color}
           >
             <IconCopy />
           </Button>

diff --git a/packages/components/src/components/Modal/Modal.module.scss b/packages/components/src/components/Modal/Modal.module.scss
@@ -58,6 +58,7 @@
     display: flex;
     flex-direction: column;
     padding: var(--modal--padding);
+    min-height: var(--modal--content-min-height);
   }
 
   .actionGroup {

diff --git a/packages/components/src/components/Modal/stories/Default.stories.tsx b/packages/components/src/components/Modal/stories/Default.stories.tsx
@@ -14,6 +14,7 @@ import { asyncLongFunction } from "@/components/Button/stories/lib";
 import { Field, Form } from "@/integrations/react-hook-form";
 import { useForm } from "react-hook-form";
 import { action } from "@storybook/addon-actions";
+import { Section } from "@/components/Section";
 
 const meta: Meta<typeof Modal> = {
   title: "Overlays/Modal",
@@ -38,12 +39,15 @@ const meta: Meta<typeof Modal> = {
       >
         <Heading>New Customer</Heading>
         <Content>
-          <Text>
-            Create a new customer to manage your projects, members and payments.
-          </Text>
-          <TextField>
-            <Label>Customer name</Label>
-          </TextField>
+          <Section>
+            <Text>
+              Create a new customer to manage your projects, members and
+              payments.
+            </Text>
+            <TextField>
+              <Label>Customer name</Label>
+            </TextField>
+          </Section>
         </Content>
         <ActionGroup>
           <Action closeOverlay="Modal">

diff --git a/packages/design-tokens/src/overlays/modal.yml b/packages/design-tokens/src/overlays/modal.yml
@@ -22,3 +22,5 @@ modal:
     value: "{size-px.s}"
   off-canvas-max-width:
     value: "calc(100dvw - {size-px.m})"
+  content-min-height:
+    value: 120px
diff --git a/packages/design-tokens/src/structure/section.yml b/packages/design-tokens/src/structure/section.yml
@@ -10,7 +10,7 @@ section:
   content-to-content-spacing:
     value: "{size-rem.m}"
   sub-heading-spacing:
-    value: "{size-rem.s}"
+    value: "{size-rem.m}"
 section-header:
   action-to-action-spacing:
     value: "{size-rem.s}"