diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx
index b3b263306..6df25c201 100644
--- 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
index 3afbad01e..79ddbd2c5 100644
--- 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}
>
diff --git a/packages/components/src/components/Modal/Modal.module.scss b/packages/components/src/components/Modal/Modal.module.scss
index bb1182645..0d5839dcf 100644
--- 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
index 82eb40ad6..7f40a1708 100644
--- 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 = {
title: "Overlays/Modal",
@@ -38,12 +39,15 @@ const meta: Meta = {
>
New Customer
-
- Create a new customer to manage your projects, members and payments.
-
-
-
-
+
+
+ Create a new customer to manage your projects, members and
+ payments.
+
+
+
+
+
diff --git a/packages/design-tokens/src/overlays/modal.yml b/packages/design-tokens/src/overlays/modal.yml
index cfdfdf1d7..b732bf7c1 100644
--- 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
index 5bc94f229..ed8e07fc2 100644
--- 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}"