diff --git a/.changeset/nine-frogs-kneel.md b/.changeset/nine-frogs-kneel.md new file mode 100644 index 000000000..560d7ea00 --- /dev/null +++ b/.changeset/nine-frogs-kneel.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix LayoutHeader inner layout. diff --git a/src/components/actions/Button/Button.tsx b/src/components/actions/Button/Button.tsx index e42ef3b11..168b3c654 100644 --- a/src/components/actions/Button/Button.tsx +++ b/src/components/actions/Button/Button.tsx @@ -378,6 +378,7 @@ export const Button = forwardRef(function Button( tooltip = true, defaultTooltipPlacement = 'top', onPress: userOnPress, + tokens, ...props } = allProps; @@ -599,7 +600,10 @@ export const Button = forwardRef(function Button( data-size={size} data-popover-dismiss="" styles={styles} - tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined} + tokens={{ + ...tokens, + ...(sizeTokenValue ? { $size: sizeTokenValue } : {}), + }} > ( highlightStyles, insideWrapper = false, showActions = false, + tokens, ...rest } = props; @@ -949,7 +950,10 @@ const Item = ( aria-selected={isSelected} mods={finalMods} styles={styles} - tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined} + tokens={{ + ...tokens, + ...(sizeTokenValue ? { $size: sizeTokenValue } : {}), + }} type={htmlType as any} {...mergeProps(rest, tooltipTriggerProps || {})} style={style} diff --git a/src/components/content/Layout/LayoutHeader.tsx b/src/components/content/Layout/LayoutHeader.tsx index befcde2d1..040494dda 100644 --- a/src/components/content/Layout/LayoutHeader.tsx +++ b/src/components/content/Layout/LayoutHeader.tsx @@ -26,19 +26,22 @@ const HeaderElement = tasty(LayoutContent, { border: 'bottom', flexShrink: 0, flexGrow: 0, + height: 'min 6x', Inner: { $: '>', display: 'grid', gridTemplate: ` - "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" auto - "back title suffix extra" 1fr + "breadcrumbs breadcrumbs breadcrumbs extra" auto + "back title suffix extra" max-content ".. subtitle subtitle extra" auto / auto max-content 1fr minmax(0, auto) `, gap: 0, - placeContent: 'stretch', + placeContent: 'center stretch', placeItems: 'center stretch', + padding: '0 ($content-padding, 1x)', + placeSelf: 'center stretch', }, Back: { @@ -64,13 +67,13 @@ const HeaderElement = tasty(LayoutContent, { $: '> Inner >', gridArea: 'title', preset: { - '': 'h3', - 'level=1': 'h1', - 'level=2': 'h2', - 'level=3': 'h3', - 'level=4': 'h4', - 'level=5': 'h5', - 'level=6': 'h6', + '': 'h3 / tight', + 'level=1': 'h1 / tight', + 'level=2': 'h2 / tight', + 'level=3': 'h3 / tight', + 'level=4': 'h4 / tight', + 'level=5': 'h5 / tight', + 'level=6': 'h6 / tight', }, color: '#dark', margin: 0, @@ -91,7 +94,7 @@ const HeaderElement = tasty(LayoutContent, { gridArea: 'extra', display: 'flex', placeItems: 'center', - placeSelf: 'end', + placeSelf: 'center', gap: '1x', width: 'max 100%', },