From 03b917f474c9a5ab19b6bc5022d36a5e529ae210 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Mon, 13 May 2024 14:47:30 +0200 Subject: [PATCH] fix: various RMWC tweaks (#4117) --- .../src/styles/material-theme-assignments.scss | 6 ------ .../modules/HeadlessCms/fileRenderer/fileField.tsx | 13 ++++++------- .../ContentEntries/Header/ButtonsCreate/styled.tsx | 1 + .../src/admin/plugins/fieldRenderers/Accordion.tsx | 4 +++- .../fieldRenderers/boolean/booleanSwitch.tsx | 4 ++-- .../src/admin/plugins/fieldRenderers/checkboxes.tsx | 4 ++-- .../fieldRenderers/dateTime/dateTimeField.tsx | 4 ++-- .../fieldRenderers/dateTime/dateTimeFields.tsx | 4 ++-- .../lexicalText/lexicalTextInputs.tsx | 6 ++++-- .../plugins/fieldRenderers/longText/longText.tsx | 4 ++-- .../plugins/fieldRenderers/longText/longTexts.tsx | 7 +++++-- .../plugins/fieldRenderers/number/numberInput.tsx | 4 ++-- .../plugins/fieldRenderers/number/numberInputs.tsx | 7 +++++-- .../admin/plugins/fieldRenderers/radioButtons.tsx | 4 ++-- .../src/admin/plugins/fieldRenderers/select.tsx | 4 ++-- .../admin/plugins/fieldRenderers/text/textInput.tsx | 4 ++-- .../plugins/fieldRenderers/text/textInputs.tsx | 7 +++++-- .../elementSettings/components/Accordion.tsx | 4 +++- packages/ui/src/Select/Select.tsx | 3 ++- 19 files changed, 52 insertions(+), 42 deletions(-) diff --git a/packages/app-admin/src/styles/material-theme-assignments.scss b/packages/app-admin/src/styles/material-theme-assignments.scss index 057ba0e146c..04a0312adf0 100644 --- a/packages/app-admin/src/styles/material-theme-assignments.scss +++ b/packages/app-admin/src/styles/material-theme-assignments.scss @@ -187,12 +187,6 @@ Fix the width of input components when inside grids @include textfield.label-color($mdc-theme-text-primary-on-background); @include textfield.ink-color($mdc-theme-on-surface); &.mdc-text-field--textarea { - textarea { - padding-top: 25px; - } - .mdc-floating-label.mdc-floating-label { - top: 35px; - } &.--focused { .mdc-floating-label.mdc-floating-label { top: 0px; diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx index ceea73578e5..bf98993ad3b 100644 --- a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx +++ b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileField.tsx @@ -14,7 +14,7 @@ const ImageFieldWrapper = styled("div")({ background: "var(--mdc-theme-on-background)", borderBottom: "1px solid rgba(0, 0, 0, 0.42)", height: "100%", - padding: "25px 15px", + padding: "16px", boxSizing: "border-box", display: "flex", flexDirection: "column", @@ -35,6 +35,7 @@ const InnerImageFieldWrapper = styled("div")({ alignItems: "center", flexBasis: "100%", maxHeight: "180px", + margin: "16px 0 0", "> div": { minWidth: "200px", maxHeight: "180px", @@ -42,7 +43,7 @@ const InnerImageFieldWrapper = styled("div")({ } }); -const FieldRenderer = ({ field, getBind, Label }: CmsModelFieldRendererProps) => { +const FieldRenderer = ({ field, getBind }: CmsModelFieldRendererProps) => { const Bind = getBind(); const imagesOnly = field.settings && field.settings.imagesOnly; @@ -55,11 +56,9 @@ const FieldRenderer = ({ field, getBind, Label }: CmsModelFieldRendererProps) => return (
- + + {field.label} +
- {title} + + {title} +
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx index 7b2f02cac1f..45e850ae557 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx @@ -1,12 +1,12 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Switch } from "@webiny/ui/Switch"; import { i18n } from "@webiny/app/i18n"; const t = i18n.ns("app-headless-cms/admin/fields/boolean"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-boolean", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx index eaa9e481fa7..0a82656e2a1 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx @@ -1,12 +1,12 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { i18n } from "@webiny/app/i18n"; import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-checkboxes-buttons", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeField.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeField.tsx index dd008e53b8e..f197508a3e6 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeField.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeField.tsx @@ -1,6 +1,6 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { i18n } from "@webiny/app/i18n"; import { DateOnly } from "./DateOnly"; import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone"; @@ -9,7 +9,7 @@ import { Time } from "./Time"; const t = i18n.ns("app-headless-cms/admin/fields/date-time"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-date-time", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx index fae7baafe11..0610acc1b97 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dateTime/dateTimeFields.tsx @@ -1,7 +1,7 @@ import React from "react"; import get from "lodash/get"; import DynamicSection from "../DynamicSection"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { i18n } from "@webiny/app/i18n"; import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg"; import { DateTimeWithoutTimezone } from "./DateTimeWithoutTimezone"; @@ -11,7 +11,7 @@ import { Time } from "./Time"; const t = i18n.ns("app-headless-cms/admin/fields/date-time"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-date-times", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx index 19c82865de7..f51ad5b207b 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInputs.tsx @@ -1,13 +1,14 @@ import React from "react"; import get from "lodash/get"; import { i18n } from "@webiny/app/i18n"; -import { CmsModelField, CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types"; import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg"; import DynamicSection, { DynamicSectionPropsChildrenParams } from "../DynamicSection"; import { IconButton } from "@webiny/ui/Button"; import styled from "@emotion/styled"; import { LexicalCmsEditor } from "~/admin/components/LexicalCmsEditor/LexicalCmsEditor"; import { modelHasLegacyRteField } from "~/admin/plugins/fieldRenderers/richText/utils"; +import { FormElementMessage } from "@webiny/ui/FormElementMessage"; const t = i18n.ns("app-headless-cms/admin/fields/rich-text"); @@ -30,7 +31,7 @@ const EditorWrapper = styled("div")({ } }); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-lexical-inputs", renderer: { @@ -61,6 +62,7 @@ const plugin: CmsEditorFieldRendererPlugin = { key={getKey(field, bind, index)} placeholder={field.placeholderText} /> + {field.helpText} {index > 0 && ( } diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx index 3b2ba34e16e..5b83c9927e0 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longText.tsx @@ -1,12 +1,12 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Input } from "@webiny/ui/Input"; import { i18n } from "@webiny/app/i18n"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-long-text-textarea", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx index a27a82b4fdb..294eae2742c 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/longText/longTexts.tsx @@ -1,6 +1,6 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Input } from "@webiny/ui/Input"; import { i18n } from "@webiny/app/i18n"; import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg"; @@ -8,7 +8,7 @@ import DynamicSection from "../DynamicSection"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-long-text-inputs", renderer: { @@ -30,6 +30,9 @@ const plugin: CmsEditorFieldRendererPlugin = { {...bind.index} rows={5} label={t`Value {number}`({ number: index + 1 })} + placeholder={props.field.placeholderText} + description={props.field.helpText} + data-testid={`fr.input.longTexts.${props.field.label}.${index + 1}`} trailingIcon={ index > 0 && { icon: , diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx index e2852e3983b..e49a9da7ebf 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInput.tsx @@ -1,12 +1,12 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Input } from "@webiny/ui/Input"; import { i18n } from "@webiny/app/i18n"; const t = i18n.ns("app-headless-cms/admin/fields/number"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-number", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx index f5d00f4717a..2d104f3e85c 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/number/numberInputs.tsx @@ -1,6 +1,6 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Input } from "@webiny/ui/Input"; import { i18n } from "@webiny/app/i18n"; import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg"; @@ -8,7 +8,7 @@ import DynamicSection from "../DynamicSection"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-number-inputs", renderer: { @@ -33,6 +33,9 @@ const plugin: CmsEditorFieldRendererPlugin = { }} onEnter={() => bind.field.appendValue("")} label={t`Value {number}`({ number: index + 1 })} + placeholder={props.field.placeholderText} + description={props.field.helpText} + data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`} type="number" trailingIcon={ index > 0 && { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx index 3fe366a9683..41323cb2ade 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx @@ -1,12 +1,12 @@ import React from "react"; import get from "lodash/get"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { i18n } from "@webiny/app/i18n"; import { Radio, RadioGroup } from "@webiny/ui/Radio"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-radio-buttons", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx index 2d0619442ca..bb8b467c5fd 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx @@ -3,7 +3,7 @@ import get from "lodash/get"; import { i18n } from "@webiny/app/i18n"; import { CmsEditorFieldPredefinedValuesEntry as Option, - CmsEditorFieldRendererPlugin + CmsModelFieldRendererPlugin } from "~/types"; import { Select } from "@webiny/ui/Select"; @@ -19,7 +19,7 @@ const getDefaultValue = (initialValue?: string | null, options?: Option[]): stri return selected ? selected.value : undefined; }; -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-select-box", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx index afbbdaf3679..5eb1b422270 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInput.tsx @@ -1,12 +1,12 @@ import React from "react"; import { i18n } from "@webiny/app/i18n"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { Input } from "@webiny/ui/Input"; import get from "lodash/get"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-text", renderer: { diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx index 6157b83cde4..87731a9a1b6 100644 --- a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx +++ b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/text/textInputs.tsx @@ -1,14 +1,14 @@ import React from "react"; import get from "lodash/get"; import { i18n } from "@webiny/app/i18n"; -import { CmsEditorFieldRendererPlugin } from "~/types"; +import { CmsModelFieldRendererPlugin } from "~/types"; import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg"; import DynamicSection from "../DynamicSection"; import { Input } from "@webiny/ui/Input"; const t = i18n.ns("app-headless-cms/admin/fields/text"); -const plugin: CmsEditorFieldRendererPlugin = { +const plugin: CmsModelFieldRendererPlugin = { type: "cms-editor-field-renderer", name: "cms-editor-field-renderer-text-inputs", renderer: { @@ -30,6 +30,9 @@ const plugin: CmsEditorFieldRendererPlugin = { {...bind.index} onEnter={() => bind.field.appendValue("")} label={t`Value {number}`({ number: index + 1 })} + placeholder={props.field.placeholderText} + description={props.field.helpText} + data-testid={`fr.input.texts.${props.field.label}.${index + 1}`} trailingIcon={ index > 0 && { icon: , diff --git a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx index 0650bdad724..4b92bae00ea 100644 --- a/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx +++ b/packages/app-page-builder/src/editor/plugins/elementSettings/components/Accordion.tsx @@ -136,7 +136,9 @@ const Accordion = ({ >
- {title} + + {title} +
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx index 9afe3d12c15..f2ccbb01f5d 100644 --- a/packages/ui/src/Select/Select.tsx +++ b/packages/ui/src/Select/Select.tsx @@ -92,7 +92,7 @@ const getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps * Error says to use the empty string in null/undefined case. */ export const Select = (props: SelectProps) => { - const { value: initialValue, description, validation, ...other } = props; + const { value: initialValue, description, validation, placeholder, ...other } = props; const value = initialValue === null || initialValue === undefined ? "" : initialValue; @@ -107,6 +107,7 @@ export const Select = (props: SelectProps) => { ref={undefined} options={options} value={value} + placeholder={placeholder ?? ""} // Fix RMWC version 14.2.2 to make the label float by default when a predefined value is selected. className={classNames( "webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", webinySelect,