Skip to content

Commit

Permalink
alignContent='center' in the component section grid row (#5959)
Browse files Browse the repository at this point in the history
**Problem:**
We converted some flex rows to UIGridRow last week, but it messed up
vertical alignment on some rows.

![image](https://github.com/concrete-utopia/utopia/assets/2226774/21474f05-95c1-4887-b203-0566696c98d7)


**Fix:**
Set alignContent: 'center' on all three places using UIGridRow in the
component inspector
<img width="280" alt="image"
src="https://github.com/concrete-utopia/utopia/assets/2226774/ebb62b30-5bb5-4eb6-9f16-0428b1af0e41">
  • Loading branch information
balazsbajorics authored Jun 17, 2024
1 parent c32d082 commit 2a91de1
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -654,7 +654,12 @@ const RowForBaseControl = React.memo((props: RowForBaseControlProps) => {
data={null}
>
{dataPickerButtonData.popupIsOpen ? dataPickerButtonData.DataPickerComponent : null}
<UIGridRow padded={false} style={{ padding: '3px 8px' }} variant='<--1fr--><--1fr-->'>
<UIGridRow
padded={false}
alignContent='center'
style={{ padding: '3px 8px' }}
variant='<--1fr--><--1fr-->'
>
{propertyLabel}
<div
style={{
Expand Down
7 changes: 6 additions & 1 deletion editor/src/components/inspector/widgets/ui-grid-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,14 @@ export interface GridRowProps extends React.InputHTMLAttributes<HTMLDivElement>
* alignItems: default value is 'center'
*/
alignItems?: 'start' | 'center' | 'stretch'
/**
* alignContent: default value is 'center'
*/
alignContent?: 'start' | 'center' | 'stretch'
}

export const UIGridRow = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridRowProps>>(
({ tall, variant, alignItems, style, padded, children, ...props }, ref) => (
({ tall, variant, alignItems, alignContent, style, padded, children, ...props }, ref) => (
<div
ref={ref}
{...props}
Expand All @@ -142,6 +146,7 @@ export const UIGridRow = React.forwardRef<HTMLDivElement, React.PropsWithChildre
gridColumnGap: 10,
overflow: 'hidden',
alignItems: alignItems ?? 'center',
alignContent: alignContent,
...gridTemplates[variant],
...(style as any), // TODO Emotion and React 18 types don't like each other
}}
Expand Down

0 comments on commit 2a91de1

Please sign in to comment.