From 1db00e109e8f078a020f56207e84497ed7e6651c Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Mon, 27 Feb 2023 13:42:00 +0100 Subject: [PATCH 1/3] fix(Field): grid column sizing --- src/components/forms/FieldWrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/forms/FieldWrapper.tsx b/src/components/forms/FieldWrapper.tsx index ff45a56f..cfe508ea 100644 --- a/src/components/forms/FieldWrapper.tsx +++ b/src/components/forms/FieldWrapper.tsx @@ -21,8 +21,8 @@ const FieldElement = tasty({ styles: { display: 'grid', gridColumns: { - '': '1fr', - 'has-sider': '@(full-label-width, auto) 1fr', + '': 'minmax(0, 1fr)', + 'has-sider': '@(full-label-width, auto) minmax(0, 1fr)', }, gap: 0, placeItems: 'baseline stretch', From 6a4de6f15c3ddaff082b8fae7bda65c955714c3e Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Mon, 27 Feb 2023 15:43:14 +0300 Subject: [PATCH 2/3] Create .changeset/polite-keys-visit.md --- .changeset/polite-keys-visit.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-keys-visit.md diff --git a/.changeset/polite-keys-visit.md b/.changeset/polite-keys-visit.md new file mode 100644 index 00000000..2bbefe22 --- /dev/null +++ b/.changeset/polite-keys-visit.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Limit the size of the Field items to avoid overflow in the real layouts. From ffea62fd92372042e7447b5eccf0668bce846862 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Mon, 27 Feb 2023 13:58:51 +0100 Subject: [PATCH 3/3] fix(Field): grid column sizing * 2 --- src/components/forms/Checkbox/CheckboxGroup.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/forms/Checkbox/CheckboxGroup.tsx b/src/components/forms/Checkbox/CheckboxGroup.tsx index 7ad8cd6b..70dcb6e2 100644 --- a/src/components/forms/Checkbox/CheckboxGroup.tsx +++ b/src/components/forms/Checkbox/CheckboxGroup.tsx @@ -24,14 +24,6 @@ import { CheckboxGroupContext } from './context'; import type { AriaCheckboxGroupProps } from '@react-types/checkbox'; -const WRAPPER_STYLES = { - display: 'grid', - gridColumns: { - '': '1fr', - 'has-sider': 'max-content 1fr', - }, -}; - const CheckGroupElement = tasty({ qa: 'CheckboxGroup', styles: { @@ -85,7 +77,7 @@ function CheckboxGroup(props: WithNullableValue, ref) { } = props; let domRef = useDOMRef(ref); - let styles = extractStyles(otherProps, CONTAINER_STYLES, WRAPPER_STYLES); + let styles = extractStyles(otherProps, CONTAINER_STYLES); let state = useCheckboxGroupState(props); let { groupProps, labelProps } = useCheckboxGroup(props, state);