Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: center align select widgets and RTE widget labels. (#18378)

Browse Source 
* fix: center align select and RTE labels.

* feat: added label tooltips to select widgets.

* fix: added center label alignment to datepicker.
This commit is contained in:
Arsalan Yaldram 2022-12-03 17:28:02 +05:30 committed by GitHub
parent cb82b299b1
commit b41606e2b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 157 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/widgets/BaseInputWidget/component/index.tsx
View File

@ -116,7 +116,7 @@ const InputComponentWrapper = styled((props) => (
return "flex: 1; margin-right: 5px; label { margin-right: 5px; margin-bottom: 0;}";
}
}}
align-items: centert;
align-items: center;
${({ compactMode, labelPosition }) => {
if (!labelPosition && !compactMode) {
return "max-height: 20px; .bp3-popover-wrapper {max-height: 20px}";

22
app/client/src/widgets/DatePickerWidget2/component/index.tsx
View File

@ -34,6 +34,20 @@ const StyledControlGroup = styled(ControlGroup)<{
}>`
${labelLayoutStyles}
/**
When the label is on the left it is not center aligned
here set height to auto and not 100% because the input
has fixed height and stretch the container.
*/
${({ labelPosition }) => {
if (labelPosition === LabelPosition.Left) {
return `
height: auto !important;
align-items: stretch;
`;
}
}}
&&& {
.${Classes.INPUT} {
color: var(--wds-color-text);
@ -44,7 +58,7 @@ const StyledControlGroup = styled(ControlGroup)<{
border-color: ${({ isValid }) =>
!isValid
? `var(--wds-color-border-danger);`
: `var(--wds-color-border);`}
: `var(--wds-color-border);`};
width: 100%;
height: 100%;
min-height: 32px;
@ -75,17 +89,17 @@ const StyledControlGroup = styled(ControlGroup)<{
isValid
? lightenColor(accentColor)
: "var(--wds-color-border-danger-focus-light)"
} !important;`}
} !important;`};
}
}
.${Classes.INPUT}:disabled {
background: var(--wds-color-bg-disabled);
color: var(--wds-color-text-disabled)
color: var(--wds-color-text-disabled);
}
.${Classes.INPUT}:not(:disabled)::placeholder {
color:var(--wds-color-text-light);
color: var(--wds-color-text-light);
}
.${Classes.INPUT}::placeholder {

15
app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx
View File

@ -609,6 +609,21 @@ export const TreeSelectContainer = styled.div<{
accentColor: string;
}>`
${labelLayoutStyles}
/**
When the label is on the left it is not center aligned
here set height to auto and not 100% because the input
has fixed height and stretch the container.
*/
${({ labelPosition }) => {
if (labelPosition === LabelPosition.Left) {
return `
height: auto !important;
align-items: stretch;
`;
}
}}
& .${LABEL_CONTAINER_CLASS} {
label {
${({ labelPosition }) => {

3
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
View File

@ -47,6 +47,7 @@ export interface TreeSelectProps
labelTextColor?: string;
labelTextSize?: TextSize;
labelStyle?: string;
labelTooltip?: string;
compactMode: boolean;
dropDownWidth: number;
width: number;
@ -121,6 +122,7 @@ function MultiTreeSelectComponent({
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
loading,
mode,
@ -245,6 +247,7 @@ function MultiTreeSelectComponent({
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
isDynamicHeightEnabled={isDynamicHeightEnabled}
loading={loading}
position={labelPosition}

11
app/client/src/widgets/MultiSelectTreeWidget/widget/index.tsx
View File

@ -259,6 +259,16 @@ class MultiSelectTreeWidget extends BaseWidget<
isBindProperty: false,
isTriggerProperty: false,
},
{
helpText: "Show help text or details about current input",
propertyName: "labelTooltip",
label: "Tooltip",
controlType: "INPUT_TEXT",
placeholderText: "Value must be atleast 6 chars",
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets a Placeholder Text",
propertyName: "placeholderText",
@ -537,6 +547,7 @@ class MultiSelectTreeWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
mode={this.props.mode}

15
app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
View File

@ -392,6 +392,21 @@ export const MultiSelectContainer = styled.div<{
accentColor?: string;
}>`
${labelLayoutStyles}
/**
When the label is on the left it is not center aligned
here set height to auto and not 100% because the input
has fixed height and stretch the container.
*/
${({ labelPosition }) => {
if (labelPosition === LabelPosition.Left) {
return `
height: auto !important;
align-items: stretch;
`;
}
}}
& .${LABEL_CONTAINER_CLASS} {
label {
${({ labelPosition }) => {

3
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
View File

@ -51,6 +51,7 @@ export interface MultiSelectProps
labelTextSize?: TextSize;
labelStyle?: string;
compactMode: boolean;
labelTooltip?: string;
isValid: boolean;
allowSelectAll?: boolean;
filterText?: string;
@ -86,6 +87,7 @@ function MultiSelectComponent({
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
loading,
onBlur,
@ -307,6 +309,7 @@ function MultiSelectComponent({
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
isDynamicHeightEnabled={isDynamicHeightEnabled}
loading={loading}
position={labelPosition}

11
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx
View File

@ -382,6 +382,16 @@ class MultiSelectWidget extends BaseWidget<
{
sectionName: "General",
children: [
{
helpText: "Show help text or details about current input",
propertyName: "labelTooltip",
label: "Tooltip",
controlType: "INPUT_TEXT",
placeholderText: "Value must be atleast 6 chars",
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets a Placeholder Text",
propertyName: "placeholderText",
@ -670,6 +680,7 @@ class MultiSelectWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
onChange={this.onOptionChange}

14
app/client/src/widgets/RichTextEditorWidget/component/index.tsx
View File

@ -7,10 +7,11 @@ import { TextSize } from "constants/WidgetConstants";
// @ts-expect-error: loader types not available
import cssVariables from "!!raw-loader!theme/wds.css";
import { labelLayoutStyles } from "design-system";
import { isMacOs } from "utils/AppsmithUtils";
import LabelWithTooltip from "widgets/components/LabelWithTooltip";
import LabelWithTooltip, {
labelLayoutStyles,
LABEL_CONTAINER_CLASS,
} from "widgets/components/LabelWithTooltip";
const StyledRTEditor = styled.div<{
borderRadius: string;
@ -208,6 +209,10 @@ const StyledRTEditor = styled.div<{
}
${labelLayoutStyles}
& .${LABEL_CONTAINER_CLASS} {
align-self: center;
}
`;
export const RichTextEditorInputWrapper = styled.div<{
@ -243,6 +248,7 @@ export interface RichtextEditorComponentProps {
labelWidth?: number;
labelTextColor?: string;
labelTextSize?: TextSize;
labelTooltip?: string;
labelStyle?: string;
isValid?: boolean;
onValueChange: (valueAsString: string) => void;
@ -259,6 +265,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) {
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
} = props;
@ -320,6 +327,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) {
disabled={isDisabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
isDynamicHeightEnabled={isDynamicHeightEnabled}
position={labelPosition}
text={labelText}

11
app/client/src/widgets/RichTextEditorWidget/widget/index.tsx
View File

@ -158,6 +158,16 @@ class RichTextEditorWidget extends BaseWidget<
{
sectionName: "General",
children: [
{
helpText: "Show help text or details about current input",
propertyName: "labelTooltip",
label: "Tooltip",
controlType: "INPUT_TEXT",
placeholderText: "Value must be atleast 6 chars",
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
propertyName: "isVisible",
label: "Visible",
@ -407,6 +417,7 @@ class RichTextEditorWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
onValueChange={this.onValueChange}
placeholder={this.props.placeholder}

15
app/client/src/widgets/SelectWidget/component/index.styled.tsx
View File

@ -217,6 +217,21 @@ export const DropdownContainer = styled.div<{
}>`
${BlueprintCSSTransform}
${labelLayoutStyles}
/**
When the label is on the left it is not center aligned
here set height to auto and not 100% because the input
has fixed height and stretch the container.
*/
${({ labelPosition }) => {
if (labelPosition === LabelPosition.Left) {
return `
height: auto !important;
align-items: stretch;
`;
}
}}
& .${LABEL_CONTAINER_CLASS} {
label {
${({ labelPosition }) => {

3
app/client/src/widgets/SelectWidget/component/index.tsx
View File

@ -267,6 +267,7 @@ class SelectComponent extends React.Component<
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
widgetId,
} = this.props;
@ -325,6 +326,7 @@ class SelectComponent extends React.Component<
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
isDynamicHeightEnabled={isDynamicHeightEnabled}
loading={isLoading}
position={labelPosition}
@ -419,6 +421,7 @@ export interface SelectComponentProps extends ComponentProps {
labelTextSize?: TextSize;
labelStyle?: string;
labelWidth?: number;
labelTooltip?: string;
compactMode: boolean;
selectedIndex?: number;
options: DropdownOption[];

11
app/client/src/widgets/SelectWidget/widget/index.tsx
View File

@ -318,6 +318,16 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
{
sectionName: "General",
children: [
{
helpText: "Show help text or details about current input",
propertyName: "labelTooltip",
label: "Tooltip",
controlType: "INPUT_TEXT",
placeholderText: "Value must be atleast 6 chars",
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets a Placeholder Text",
propertyName: "placeholderText",
@ -593,6 +603,7 @@ class SelectWidget extends BaseWidget<SelectWidgetProps, WidgetState> {
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
onFilterChange={this.onFilterChange}
onOptionSelected={this.onOptionSelected}

15
app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx
View File

@ -621,6 +621,21 @@ export const TreeSelectContainer = styled.div<{
accentColor: string;
}>`
${labelLayoutStyles}
/**
When the label is on the left it is not center aligned
here set height to auto and not 100% because the input
has fixed height and stretch the container.
*/
${({ labelPosition }) => {
if (labelPosition === LabelPosition.Left) {
return `
height: auto !important;
align-items: stretch;
`;
}
}}
& .${LABEL_CONTAINER_CLASS} {
label {
${({ labelPosition }) => {

3
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
View File

@ -46,6 +46,7 @@ export interface TreeSelectProps
labelTextColor?: string;
labelTextSize?: TextSize;
labelStyle?: string;
labelTooltip?: string;
compactMode: boolean;
dropDownWidth: number;
width: number;
@ -120,6 +121,7 @@ function SingleSelectTreeComponent({
labelText,
labelTextColor,
labelTextSize,
labelTooltip,
labelWidth,
loading,
onChange,
@ -257,6 +259,7 @@ function SingleSelectTreeComponent({
disabled={disabled}
fontSize={labelTextSize}
fontStyle={labelStyle}
helpText={labelTooltip}
isDynamicHeightEnabled={isDynamicHeightEnabled}
loading={loading}
position={labelPosition}

11
app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx
View File

@ -222,6 +222,16 @@ class SingleSelectTreeWidget extends BaseWidget<
{
sectionName: "General",
children: [
{
helpText: "Show help text or details about current input",
propertyName: "labelTooltip",
label: "Tooltip",
controlType: "INPUT_TEXT",
placeholderText: "Value must be atleast 6 chars",
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.TEXT },
},
{
helpText: "Sets a Placeholder Text",
propertyName: "placeholderText",
@ -499,6 +509,7 @@ class SingleSelectTreeWidget extends BaseWidget<
labelText={this.props.labelText}
labelTextColor={this.props.labelTextColor}
labelTextSize={this.props.labelTextSize}
labelTooltip={this.props.labelTooltip}
labelWidth={this.getLabelWidth()}
loading={this.props.isLoading}
onChange={this.onOptionChange}