diff --git a/packages/components/src/components/Avatar/Avatar.module.scss b/packages/components/src/components/Avatar/Avatar.module.scss index efa6982c1..101a57911 100644 --- a/packages/components/src/components/Avatar/Avatar.module.scss +++ b/packages/components/src/components/Avatar/Avatar.module.scss @@ -47,12 +47,11 @@ /* Variants */ @mixin color($color) { + &.dynamic-#{$color}:has(.initials), &.#{$color} { --background-color: var(--decorative--#{$color}-background-color); --content-color: var(--decorative--#{$color}-content-color); - --content-accent-color: var( - --decorative--#{$color}-content-accent-color - ); + --content-accent-color: var(--decorative--#{$color}-content-accent-color); } } diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/packages/components/src/components/Avatar/Avatar.tsx index d06ebc8b6..a197b2363 100644 --- a/packages/components/src/components/Avatar/Avatar.tsx +++ b/packages/components/src/components/Avatar/Avatar.tsx @@ -8,8 +8,6 @@ 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", @@ -33,13 +31,12 @@ 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 ?? (hasInitials ? getColorFromChildren(children) : "blue")], + styles[color ?? "blue"], + !color && styles[`dynamic-${getColorFromChildren(children)}`], ); const propsContext: PropsContext = { diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss b/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss index 650daa471..1c243422c 100644 --- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss +++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.scss @@ -7,4 +7,8 @@ :global(.flow--checkbox-button) { width: auto; } + + &:empty { + display: none; + } } diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx index 918cd12ec..1cb366bb6 100644 --- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx @@ -6,14 +6,12 @@ import clsx from "clsx"; import type { PropsContext } from "@/lib/propsContext"; import { PropsContextProvider } from "@/lib/propsContext"; import { FieldError } from "@/components/FieldError"; -import { CheckboxButton } from "@/components/CheckboxButton"; import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel"; import formFieldStyles from "../FormField/FormField.module.scss"; import type { ColumnLayoutProps } from "@/components/ColumnLayout"; import { ColumnLayout } from "@/components/ColumnLayout"; import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; -import { deepHas } from "@/lib/react/deepHas"; export interface CheckboxGroupProps extends PropsWithChildren>, @@ -41,29 +39,23 @@ export const CheckboxGroup = flowComponent("CheckboxGroup", (props) => { tunnelId: "checkboxes", }, CheckboxButton: { - tunnelId: "checkboxes", + tunnelId: "checkboxButtons", }, }; - const hasCheckboxButtons = deepHas(children, CheckboxButton); - return ( {children} - {hasCheckboxButtons && ( - - - - )} + + + - {!hasCheckboxButtons && ( -
- -
- )} +
+ +
diff --git a/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss b/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss index 2c4c94c06..c9870e575 100644 --- a/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss +++ b/packages/components/src/components/ColumnLayout/ColumnLayout.module.scss @@ -1,5 +1,9 @@ .columnLayoutContainer { container-type: inline-size; + + &:has(.columnLayout:empty) { + display: none; + } } .columnLayout { diff --git a/packages/components/src/components/MenuItem/MenuItemContent.tsx b/packages/components/src/components/MenuItem/MenuItemContent.tsx index 736d9c3aa..f7532c4e4 100644 --- a/packages/components/src/components/MenuItem/MenuItemContent.tsx +++ b/packages/components/src/components/MenuItem/MenuItemContent.tsx @@ -10,11 +10,7 @@ import { IconRadioOff, IconRadioOn, } from "@/components/Icon/components/icons"; -import { Text } from "@/components/Text"; -import { deepHas } from "@/lib/react/deepHas"; -import { Wrap } from "@/components/Wrap"; import clsx from "clsx"; -import { Avatar } from "@/components/Avatar"; import { Switch } from "@/components/Switch"; interface Props extends Aria.MenuItemRenderProps, PropsWithChildren { @@ -67,18 +63,13 @@ export const MenuItemContent: FC = (props) => { ); - const hasText = deepHas(children, Text); - const hasAvatar = deepHas(children, Avatar); - return ( <> {selectionIcon} - - {children} - + {children} ); diff --git a/packages/components/src/components/Navigation/Navigation.tsx b/packages/components/src/components/Navigation/Navigation.tsx index 8c6f4c0dc..8833b9cdd 100644 --- a/packages/components/src/components/Navigation/Navigation.tsx +++ b/packages/components/src/components/Navigation/Navigation.tsx @@ -2,12 +2,10 @@ import type { ComponentProps, FC, PropsWithChildren } from "react"; import React from "react"; import styles from "./Navigation.module.scss"; import clsx from "clsx"; -import { NavigationGroup } from "@/components/Navigation"; -import { Wrap } from "@/components/Wrap"; import type { PropsContext } from "@/lib/propsContext"; import { PropsContextProvider } from "@/lib/propsContext"; import type { PropsWithClassName } from "@/lib/types/props"; -import { deepHas } from "@/lib/react/deepHas"; +import { TunnelExit } from "@mittwald/react-tunnel"; export interface NavigationProps extends PropsWithChildren>, @@ -18,8 +16,6 @@ export const Navigation: FC = (props) => { const rootClassName = clsx(styles.navigation, className); - const hasGroups = deepHas(children, NavigationGroup); - const propsContext: PropsContext = { Link: { wrapWith:
  • , @@ -31,15 +27,17 @@ export const Navigation: FC = (props) => { Icon: { className: styles.icon, }, + tunnelId: "links", }, }; return ( ); diff --git a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx index 5d880ca06..7153323ae 100644 --- a/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx +++ b/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx @@ -31,7 +31,7 @@ export const NavigationGroup: FC = (props) => { "aria-hidden": true, }, Link: { - tunnelId: "links", + tunnelId: "groupLinks", }, }; @@ -43,7 +43,7 @@ export const NavigationGroup: FC = (props) => { {children}
      - +
    @@ -64,7 +64,7 @@ export const NavigationGroup: FC = (props) => { {children}
      - +
    diff --git a/packages/components/src/components/RadioGroup/RadioGroup.module.scss b/packages/components/src/components/RadioGroup/RadioGroup.module.scss index 19de0ccaf..0b270e135 100644 --- a/packages/components/src/components/RadioGroup/RadioGroup.module.scss +++ b/packages/components/src/components/RadioGroup/RadioGroup.module.scss @@ -3,4 +3,8 @@ display: flex; flex-direction: column; row-gap: var(--form-control--spacing-y); + + &:empty { + display: none; + } } diff --git a/packages/components/src/components/RadioGroup/RadioGroup.tsx b/packages/components/src/components/RadioGroup/RadioGroup.tsx index 941da0f29..ceaaf61da 100644 --- a/packages/components/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/components/src/components/RadioGroup/RadioGroup.tsx @@ -10,10 +10,8 @@ import type { ColumnLayoutProps } from "@/components/ColumnLayout"; import { ColumnLayout } from "@/components/ColumnLayout"; import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel"; import formFieldStyles from "../FormField/FormField.module.scss"; -import RadioButton from "./components/RadioButton"; import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent"; import { flowComponent } from "@/lib/componentFactory/flowComponent"; -import { deepHas } from "@/lib/react/deepHas"; export interface RadioGroupProps extends PropsWithChildren>, @@ -42,15 +40,13 @@ export const RadioGroup = flowComponent("RadioGroup", (props) => { tunnelId: "fieldError", }, RadioButton: { - tunnelId: "radios", + tunnelId: "radioButtons", }, Radio: { tunnelId: "radios", }, }; - const hasRadioButtons = deepHas(children, RadioButton); - return ( @@ -61,17 +57,13 @@ export const RadioGroup = flowComponent("RadioGroup", (props) => { > {children} - {hasRadioButtons && ( - - - - )} + + + - {!hasRadioButtons && ( -
    - -
    - )} +
    + +
    diff --git a/packages/components/src/styles/mixins/menuItem.scss b/packages/components/src/styles/mixins/menuItem.scss index 96f94a53e..b7365af62 100644 --- a/packages/components/src/styles/mixins/menuItem.scss +++ b/packages/components/src/styles/mixins/menuItem.scss @@ -26,20 +26,8 @@ /* Elements */ .icon { - order: 0; color: var(--menu-item--icon-color--default); - } - - .text { - order: 1; - } - - .icon + .text { - margin-inline-start: var(--menu-item--spacing); - } - - .switch { - order: 2; + margin-inline-end: var(--menu-item--spacing); } &:hover {