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>
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { Alignment } from "@blueprintjs/core";
|
|
import { LabelPosition } from "components/constants";
|
|
import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
|
|
import { ResponsiveBehavior } from "utils/autoLayout/constants";
|
|
import { DynamicHeight } from "utils/WidgetFeatures";
|
|
|
|
import IconSVG from "./icon.svg";
|
|
import Widget from "./widget";
|
|
|
|
export const CONFIG = {
|
|
features: {
|
|
dynamicHeight: {
|
|
sectionIndex: 4,
|
|
defaultValue: DynamicHeight.FIXED,
|
|
active: true,
|
|
},
|
|
},
|
|
type: Widget.getWidgetType(),
|
|
name: "Select",
|
|
iconSVG: IconSVG,
|
|
needsMeta: true,
|
|
searchTags: ["dropdown"],
|
|
defaults: {
|
|
rows: 7,
|
|
columns: 20,
|
|
placeholderText: "Select option",
|
|
labelText: "Label",
|
|
labelPosition: LabelPosition.Top,
|
|
labelAlignment: Alignment.LEFT,
|
|
labelWidth: 5,
|
|
options: [
|
|
{ label: "Blue", value: "BLUE" },
|
|
{ label: "Green", value: "GREEN" },
|
|
{ label: "Red", value: "RED" },
|
|
],
|
|
serverSideFiltering: false,
|
|
widgetName: "Select",
|
|
defaultOptionValue: "GREEN",
|
|
version: 1,
|
|
isFilterable: true,
|
|
isRequired: false,
|
|
isDisabled: false,
|
|
animateLoading: true,
|
|
labelTextSize: "0.875rem",
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
minWidth: FILL_WIDGET_MIN_WIDTH,
|
|
},
|
|
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(),
|
|
},
|
|
autoLayout: {
|
|
disabledPropsDefaults: {
|
|
labelPosition: LabelPosition.Top,
|
|
labelTextSize: "0.875rem",
|
|
},
|
|
defaults: {
|
|
rows: 6.6,
|
|
},
|
|
autoDimension: {
|
|
height: true,
|
|
},
|
|
widgetSize: [
|
|
{
|
|
viewportMinWidth: 0,
|
|
configuration: () => {
|
|
return {
|
|
minWidth: "120px",
|
|
};
|
|
},
|
|
},
|
|
],
|
|
disableResizeHandles: {
|
|
vertical: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
export default Widget;
|