fix: checkbox-group widget breaking UI issue (#14820)
- Hides Style alignment when Inline option is false which fixes UI overlapping issues - Resizing the widget other options which are outside don't come within the widget boundaries - Fixed - Behaviour of widget when placed at top of the canvas - Fixed
This commit is contained in:
parent
63e2240eed
commit
6686b94280
|
|
@ -69,6 +69,15 @@ export interface CheckboxGroupContainerProps {
|
||||||
|
|
||||||
export const CheckboxGroupContainer = styled.div<CheckboxGroupContainerProps>`
|
export const CheckboxGroupContainer = styled.div<CheckboxGroupContainerProps>`
|
||||||
${labelLayoutStyles}
|
${labelLayoutStyles}
|
||||||
|
justify-content: ${({ compactMode, labelPosition }) => {
|
||||||
|
if (
|
||||||
|
labelPosition &&
|
||||||
|
labelPosition !== LabelPosition.Left &&
|
||||||
|
!compactMode
|
||||||
|
) {
|
||||||
|
return "flex-start";
|
||||||
|
}
|
||||||
|
}};
|
||||||
& .${LABEL_CONTAINER_CLASS} {
|
& .${LABEL_CONTAINER_CLASS} {
|
||||||
${({ labelPosition }) =>
|
${({ labelPosition }) =>
|
||||||
labelPosition === LabelPosition.Left && "min-height: 30px"};
|
labelPosition === LabelPosition.Left && "min-height: 30px"};
|
||||||
|
|
|
||||||
|
|
@ -165,9 +165,29 @@ class CheckboxGroupWidget extends BaseWidget<
|
||||||
isJSConvertible: true,
|
isJSConvertible: true,
|
||||||
isBindProperty: true,
|
isBindProperty: true,
|
||||||
isTriggerProperty: false,
|
isTriggerProperty: false,
|
||||||
|
updateHook: (
|
||||||
|
props: CheckboxGroupWidgetProps,
|
||||||
|
propertyPath: string,
|
||||||
|
propertyValue: string,
|
||||||
|
) => {
|
||||||
|
const propertiesToUpdate = [{ propertyPath, propertyValue }];
|
||||||
|
const isOffInline =
|
||||||
|
typeof propertyValue === "string"
|
||||||
|
? !(propertyValue === "true")
|
||||||
|
: !propertyValue;
|
||||||
|
|
||||||
|
if (isOffInline) {
|
||||||
|
propertiesToUpdate.push({
|
||||||
|
propertyPath: "optionAlignment",
|
||||||
|
propertyValue: CheckboxGroupAlignmentTypes.NONE,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return propertiesToUpdate;
|
||||||
|
},
|
||||||
validation: {
|
validation: {
|
||||||
type: ValidationTypes.BOOLEAN,
|
type: ValidationTypes.BOOLEAN,
|
||||||
},
|
},
|
||||||
|
dependencies: ["isInline"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
propertyName: "isSelectAll",
|
propertyName: "isSelectAll",
|
||||||
|
|
@ -315,6 +335,12 @@ class CheckboxGroupWidget extends BaseWidget<
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
hidden: (props: CheckboxGroupWidgetProps) => {
|
||||||
|
return typeof props.isInline === "string"
|
||||||
|
? !(props.isInline === "true")
|
||||||
|
: !props.isInline;
|
||||||
|
},
|
||||||
|
dependencies: ["isInline"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
propertyName: "labelTextColor",
|
propertyName: "labelTextColor",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user