diff --git a/src/lib/kit/components/Layouts/Column/Column.scss b/src/lib/kit/components/Layouts/Column/Column.scss index 5ff3cc23..76df6008 100644 --- a/src/lib/kit/components/Layouts/Column/Column.scss +++ b/src/lib/kit/components/Layouts/Column/Column.scss @@ -11,19 +11,19 @@ min-height: var(--df-column-first-row-min-height, 28px); display: flex; margin-bottom: auto; - flex-direction: column; + flex-direction: row; flex-shrink: 0; &-inner { - display: inline; + flex-grow: 1; margin-top: auto; margin-bottom: auto; } - &::after { - content: ''; - width: 100%; - flex-shrink: 1; + &-action { + padding-left: var(--g-spacing-2); + margin-top: auto; + margin-bottom: auto; } } diff --git a/src/lib/kit/components/Layouts/Column/Column.tsx b/src/lib/kit/components/Layouts/Column/Column.tsx index 62257ca1..f773fb0f 100644 --- a/src/lib/kit/components/Layouts/Column/Column.tsx +++ b/src/lib/kit/components/Layouts/Column/Column.tsx @@ -14,7 +14,9 @@ import './Column.scss'; const b = block('column'); -interface ColumnProps {} +interface ColumnProps { + action?: React.ReactNode; +} const ColumnBase = ({ name, @@ -22,6 +24,7 @@ const ColumnBase = ({ input, meta, children, + action, }: LayoutProps & ColumnProps) => { const arrayItem = React.useMemo(() => isArrayItem(name), [name]); const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]); @@ -47,6 +50,7 @@ const ColumnBase = ({ ) : null} + {Boolean(action) &&
{action}
}
diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss index 400807a0..e4aa716b 100644 --- a/src/lib/kit/components/Layouts/Row/Row.scss +++ b/src/lib/kit/components/Layouts/Row/Row.scss @@ -24,6 +24,10 @@ margin-bottom: auto; } + &-action { + padding-left: var(--g-spacing-2); + } + &::after { content: ''; width: 100%; diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx index 4345fa0e..9f3e4fcc 100644 --- a/src/lib/kit/components/Layouts/Row/Row.tsx +++ b/src/lib/kit/components/Layouts/Row/Row.tsx @@ -16,6 +16,7 @@ const b = block('row'); interface RowProps { verboseDescription?: boolean; + action?: React.ReactNode; } const RowBase = ({ @@ -24,6 +25,7 @@ const RowBase = ({ input, meta, verboseDescription, + action, children, }: LayoutProps & RowProps) => { const arrayItem = React.useMemo(() => isArrayItem(name), [name]); @@ -49,6 +51,7 @@ const RowBase = ({ ) : null} + {Boolean(action) && {action}}