Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Updated subtitle position to bottom #35789

Merged
merged 4 commits into from
Aug 22, 2024
Merged

feat: Updated subtitle position to bottom #35789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b888ef
feat: Action redesign - updated helper text to show below the control
albinAppsmith Aug 20, 2024
ccd6ffa
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
albinAppsmith Aug 20, 2024
dd2b3cd
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
albinAppsmith Aug 21, 2024
9387183
Merge branch 'release' of https://github.com/appsmithorg/appsmith int…
albinAppsmith Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
//SWITCH and CHECKBOX display label text and form input aligned side by side
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block;"
: "inline-block;"}
? "block"
: "inline-block"};
font-weight: normal;
color: var(--ads-v2-color-fg-muted);
font-size: 12px;
Expand All @@ -19,7 +19,12 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
props?.config?.controlType !== "CHECKBOX"
? "1px"
: "0px"};
margin-top: 5px;
margin-top: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
props?.config?.controlType === "SWITCH" ||
props?.config?.controlType === "CHECKBOX"
? "0px"
: "5px"};
margin-bottom: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
props?.config?.controlType !== "SWITCH" &&
Expand All @@ -30,15 +35,15 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
`;

const FormSubtitleText = styled.span<{ config?: ControlProps }>`
display: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block;"
: "inline;"}
font-weight: normal;
color: var(--ads-v2-color-fg-muted);
font-size: 12px;
display: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block"
: "inline"};
font-weight: normal;
color: var(--ads-v2-color-fg-muted);
font-size: 12px;
`;

//Styled help text, intended to be used with Form Fields
Expand Down
23 changes: 19 additions & 4 deletions app/client/src/pages/Editor/FormConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,12 @@ interface FormConfigProps extends FormControlProps {
changesViewType: boolean;
}

const controlsWithSubtitleInTop = [
"ARRAY_FIELD",
"WHERE_CLAUSE",
"QUERY_DYNAMIC_TEXT",
];

// top contains label, subtitle, urltext, tooltip, display type
// bottom contains the info and error text
// props.children will render the form element
Expand Down Expand Up @@ -177,6 +183,7 @@ function renderFormConfigTop(props: {
changesViewType: boolean;
}) {
const {
controlType,
encrypted,
isRequired,
label,
Expand All @@ -186,16 +193,21 @@ function renderFormConfigTop(props: {
url,
urlText,
} = { ...props.config };
const shouldRenderSubtitle =
subtitle && controlsWithSubtitleInTop.includes(controlType);
return (
<div className="form-config-top" key={props.config.label}>
{!nestedFormControl && // if the form control is a nested form control hide its label
(label?.length > 0 || encrypted || tooltipText || subtitle) && (
(label?.length > 0 ||
encrypted ||
tooltipText ||
shouldRenderSubtitle) && (
<>
<FlexWrapper>
<FormLabel
config={props.config}
extraStyles={{
marginBottom: !!subtitle && "0px",
marginBottom: shouldRenderSubtitle && "0px",
minWidth: !!props.changesViewType && "unset",
}}
>
Expand Down Expand Up @@ -238,7 +250,7 @@ function renderFormConfigTop(props: {
/>
)}
</FlexWrapper>
{subtitle && (
{shouldRenderSubtitle && (
<FormInfoText config={props.config}>{subtitle}</FormInfoText>
)}
</>
Expand All @@ -256,9 +268,12 @@ function renderFormConfigBottom(props: {
config: ControlProps;
configErrors?: EvaluationError[];
}) {
const { controlType, info } = { ...props.config };
const { controlType, info, subtitle } = { ...props.config };
return (
<>
{subtitle && !controlsWithSubtitleInTop.includes(controlType) && (
<FormInfoText config={props.config}>{subtitle}</FormInfoText>
)}
{info && (
<FormInputHelperText
addMarginTop={controlType === "CHECKBOX" ? "8px" : "2px"} // checkboxes need a higher margin top than others form control types
Expand Down
Loading