412c48481e
## Description - Defined the default vertical alignment of widgets within a row. Now, all widgets will align bottom except container widget which will align top - Added a predefined row gap of 12px in the case of desktop and 8px in the case of mobile viewport. Fixes #22227 Fixes #22228 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Drag n drop multiple widgets, verified all the widgets except container widget are bottom aligned and container widget is top aligned - Checked if the row gap is 12px in the case of non-mobile viewport and it is 8px in the case of mobile viewport - Checked if the highlights are shown in the proper position - Tested some templates after conversion ### Test Plan > Add Testsmith test cases links that relate to this PR ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com> Co-authored-by: Preet <preetsidhu.bits@gmail.com>
95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import { ButtonBoxShadowTypes } from "components/constants";
|
|
import { Colors } from "constants/Colors";
|
|
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
|
|
import { GridDefaults, WidgetHeightLimits } from "constants/WidgetConstants";
|
|
import {
|
|
FlexVerticalAlignment,
|
|
ResponsiveBehavior,
|
|
} from "utils/autoLayout/constants";
|
|
import type { WidgetProps } from "widgets/BaseWidget";
|
|
import IconSVG from "./icon.svg";
|
|
import Widget from "./widget";
|
|
|
|
export const CONFIG = {
|
|
type: Widget.getWidgetType(),
|
|
name: "Container",
|
|
iconSVG: IconSVG,
|
|
isCanvas: true,
|
|
features: {
|
|
dynamicHeight: {
|
|
sectionIndex: 0,
|
|
active: true,
|
|
},
|
|
},
|
|
canvasHeightOffset: (props: WidgetProps): number => {
|
|
const offset =
|
|
props.borderWidth && props.borderWidth > 1
|
|
? Math.ceil(
|
|
(2 * parseInt(props.borderWidth, 10) || 0) /
|
|
GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
|
|
)
|
|
: 0;
|
|
|
|
return offset;
|
|
},
|
|
searchTags: ["div", "parent", "group"],
|
|
defaults: {
|
|
backgroundColor: "#FFFFFF",
|
|
rows: WidgetHeightLimits.MIN_CANVAS_HEIGHT_IN_ROWS,
|
|
columns: 24,
|
|
widgetName: "Container",
|
|
containerStyle: "card",
|
|
borderColor: Colors.GREY_5,
|
|
borderWidth: "1",
|
|
boxShadow: ButtonBoxShadowTypes.NONE,
|
|
animateLoading: true,
|
|
children: [],
|
|
blueprint: {
|
|
view: [
|
|
{
|
|
type: "CANVAS_WIDGET",
|
|
position: { top: 0, left: 0 },
|
|
props: {
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
detachFromLayout: true,
|
|
children: [],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
version: 1,
|
|
flexVerticalAlignment: FlexVerticalAlignment.Top,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
minWidth: FILL_WIDGET_MIN_WIDTH,
|
|
},
|
|
autoLayout: {
|
|
widgetSize: [
|
|
{
|
|
viewportMinWidth: 0,
|
|
configuration: () => {
|
|
return {
|
|
minWidth: "280px",
|
|
minHeight: "50px",
|
|
};
|
|
},
|
|
},
|
|
],
|
|
disableResizeHandles: {
|
|
vertical: true,
|
|
},
|
|
},
|
|
properties: {
|
|
derived: Widget.getDerivedPropertiesMap(),
|
|
default: Widget.getDefaultPropertiesMap(),
|
|
meta: Widget.getMetaPropertiesMap(),
|
|
config: Widget.getPropertyPaneConfig(),
|
|
contentConfig: Widget.getPropertyPaneContentConfig(),
|
|
styleConfig: Widget.getPropertyPaneStyleConfig(),
|
|
stylesheetConfig: Widget.getStylesheetConfig(),
|
|
autocompleteDefinitions: Widget.getAutocompleteDefinitions(),
|
|
},
|
|
};
|
|
|
|
export default Widget;
|