fix: various RMWC tweaks (#4117)

webiny · May 13, 2024 · 03b917f · 03b917f
1 parent d50ba58
commit 03b917f
Show file tree

Hide file tree

Showing 19 changed files with 52 additions and 42 deletions.
diff --git 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
@@ -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,14 +35,15 @@ const InnerImageFieldWrapper = styled("div")({
     alignItems: "center",
     flexBasis: "100%",
     maxHeight: "180px",
+    margin: "16px 0 0",
     "> div": {
         minWidth: "200px",
         maxHeight: "180px",
         padding: "30px"
     }
 });
 
-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 (
                             <div>
                                 <ImageFieldWrapper>
-                                    <Label>
-                                        <Typography use="body1" tag={"span"}>
-                                            {field.label}
-                                        </Typography>
-                                    </Label>
+                                    <Typography use="body2" tag={"span"}>
+                                        {field.label}
+                                    </Typography>
                                     <InnerImageFieldWrapper>
                                         <FileManager
                                             images={imagesOnly}

diff --git a/...ages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/styled.tsx b/...ages/app-headless-cms/src/admin/components/ContentEntries/Header/ButtonsCreate/styled.tsx
@@ -4,4 +4,5 @@ export const Container = styled("div")`
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    text-wrap: nowrap;
 `;
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/Accordion.tsx
@@ -106,7 +106,9 @@ const Accordion = ({ title, children, action, icon, defaultValue = false }: Acco
             >
                 <div className="accordion-header--left">
                     <div className={"accordion-title"}>
-                        <Typography use={"subtitle1"}>{title}</Typography>
+                        <Typography use={"subtitle1"} tag={"span"}>
+                            {title}
+                        </Typography>
                     </div>
                 </div>
                 <div className="accordion-header--right">

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
                             />
+                            <FormElementMessage>{field.helpText}</FormElementMessage>
                             {index > 0 && (
                                 <IconButton
                                     icon={<DeleteIcon />}

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
@@ -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
@@ -1,14 +1,14 @@
 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";
 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: <DeleteIcon />,

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
@@ -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
@@ -1,14 +1,14 @@
 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";
 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
@@ -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
@@ -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
@@ -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
@@ -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: <DeleteIcon />,

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
@@ -136,7 +136,9 @@ const Accordion = ({
             >
                 <div className="accordion-header--left">
                     <div className={"accordion-title"}>
-                        <Typography use={"subtitle1"}>{title}</Typography>
+                        <Typography use={"subtitle1"} tag={"span"}>
+                            {title}
+                        </Typography>
                     </div>
                 </div>
                 <div className="accordion-header--right">

diff --git 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,