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}"