diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
index 69324428f5094369dd028b430c2f63ba414233f1..331b352ff49f87b8562abe6198844d8a71775d09 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
@@ -1,18 +1,21 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeDemoDropzoneUploading = ({ splittedOnly = false, button=false }) => {
+const CodeDemoDropzoneUploading = ({
+ splittedOnly = false,
+ button = false,
+}) => {
if (button)
+ return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJSButton}
+ codeCompleteTS={completeCodeTSButton}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJSButton}
+ codeSplittedTS={splittedCodeTSButton}
+ />
+ );
return (
- <ShowDemoCode
- splittedOnly={splittedOnly}
- codeCompleteJS={completeCodeJSButton}
- codeCompleteTS={completeCodeTSButton}
- codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJSButton}
- codeSplittedTS={splittedCodeTSButton}
- />
- );
- return (
<ShowDemoCode
splittedOnly={splittedOnly}
codeCompleteJS={completeCodeJS}
@@ -26,7 +29,6 @@ const CodeDemoDropzoneUploading = ({ splittedOnly = false, button=false }) => {
};
export default CodeDemoDropzoneUploading;
-
const splittedCodeJSButton = `<FileInputButton
onChange={updateFiles}
value={files}
@@ -79,7 +81,7 @@ const splittedCodeTSButton = `<FileInputButton
{files.map((file: ExtFile) => (
<FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
))}`;
-const completeCodeJSButton =`import { FileInputButton, FileCard } from "@files-ui/react";
+const completeCodeJSButton = `import { FileInputButton, FileCard } from "@files-ui/react";
import * as React from "react";
export default function App() {
@@ -218,8 +220,6 @@ export default function App() {
/////
-
-
const splittedCodeJS = `<Dropzone
onChange={updateFiles}
value={files}
diff --git a/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
index 5b25be4af4d7d04384236d00429959a67b9b2d4d..ddf64a75be3b828efef0fcde3b23cc3043b2fac1 100644
--- a/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoStyling.jsx
@@ -1,5 +1,17 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeDemoDropzoneStyling = ({ splittedOnly = false }) => {
+const CodeDemoDropzoneStyling = ({ splittedOnly = false, button }) => {
+ if (button)
+ return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJSButton}
+ codeCompleteTS={completeCodeTSButton}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJSButton}
+ codeSplittedTS={splittedCodeTSButton}
+ />
+ );
return (
<ShowDemoCode
splittedOnly={splittedOnly}
@@ -14,6 +26,79 @@ const CodeDemoDropzoneStyling = ({ splittedOnly = false }) => {
};
export default CodeDemoDropzoneStyling;
+const splittedCodeJSButton = `<FileInputButton>Default color</FileInputButton>
+<FileInputButton color="#6200EE">color="#6200EE"</FileInputButton>
+
+<FileInputButton textColor="teal" color="aliceblue">
+ textColor="teal"
+</FileInputButton>
+
+<FileInputButton>{"Contained"}</FileInputButton>
+<FileInputButton variant="outlined">outlined</FileInputButton>
+<FileInputButton variant="text">{"Text"}</FileInputButton>
+
+<FileInputButton textTransform="uppercase">
+ {"Text transform uppercase"}
+</FileInputButton>
+<FileInputButton textTransform="capitalize">
+ {"Text transform capitalize"}
+</FileInputButton>
+<FileInputButton textTransform="lowercase">
+ {"Text transform LOWERCASE"}
+</FileInputButton>
+<FileInputButton textTransform="none">
+ {"Text transform unset"}
+</FileInputButton>`;
+const splittedCodeTSButton = splittedCodeJSButton;
+const completeCodeJSButton = `import { FileInputButton } from "@files-ui/react";
+import * as React from "react";
+
+export default function App() {
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "20px",
+ }}
+ >
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton>Default color</FileInputButton>
+ <FileInputButton color="#6200EE">color="#6200EE"</FileInputButton>
+ </div>
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton textColor="teal" color="aliceblue">
+ textColor="teal"
+ </FileInputButton>
+ </div>
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton>{"Contained"}</FileInputButton>
+ <FileInputButton variant="outlined">outlined</FileInputButton>
+ <FileInputButton variant="text">{"Text"}</FileInputButton>
+ </div>
+
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton textTransform="uppercase">
+ {"Text transform uppercase"}
+ </FileInputButton>
+ <FileInputButton textTransform="capitalize">
+ {"Text transform capitalize"}
+ </FileInputButton>
+ <FileInputButton textTransform="lowercase">
+ {"Text transform LOWERCASE"}
+ </FileInputButton>
+ <FileInputButton textTransform="none">
+ {"Text transform unset"}
+ </FileInputButton>
+ </div>
+ </div>
+ );
+}`;
+const completeCodeTSButton = completeCodeJSButton;
+
+/////
+
const splittedCodeJS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
<Dropzone
minHeight="120px"
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
index 0a2658c50edb10e0725ad614a0f788eec159974b..d64d8d371c1e5cebb54826deeffccb43ada34f3c 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneStyling.jsx
@@ -1,7 +1,48 @@
import * as React from "react";
-import { Dropzone } from "../../../files-ui";
+import { Dropzone, FileInputButton } from "../../../files-ui";
-const DemoDropzoneStyling = () => {
+const DemoDropzoneStyling = ({ button }) => {
+ if (button)
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap: "20px",
+ }}
+ >
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton>Default color</FileInputButton>
+ <FileInputButton color="#6200EE">Color= "#6200EE"</FileInputButton>
+ </div>
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton textColor="teal" color="aliceblue">
+ textColor="teal"
+ </FileInputButton>
+ </div>
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton>Contained</FileInputButton>
+ <FileInputButton variant="outlined">Outlined</FileInputButton>
+ <FileInputButton variant="text">Text</FileInputButton>
+ </div>
+
+ <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+ <FileInputButton textTransform="uppercase">
+ Text transform uppercase
+ </FileInputButton>
+ <FileInputButton textTransform="capitalize">
+ Text transform capitalize
+ </FileInputButton>
+ <FileInputButton textTransform="lowercase">
+ Text transform LOWERCASE
+ </FileInputButton>
+ <FileInputButton textTransform="none">
+ Text transform unset
+ </FileInputButton>
+ </div>
+ </div>
+ );
return (
<div
style={{
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
index c65c711408450430433a96c982875c7396e7f9d4..4391bcc1de7cff373e43274d7f5c09d44b1942e4 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImgPreview.tsx
@@ -31,7 +31,7 @@ const DemoFileMosaicImgPreview: React.FC<DemoFileMosaicImgPreviewProps> = (
<FileInputButton
label="Browse File..."
onChange={updateFiles}
- textDecoration="uppercase"
+ textTransform="uppercase"
accept="image/*"
/>
)}
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index fd47c5c1b00149c76d8534a0e85565a8fca3d673..616738a2632df6dbfa37805063f4098c4047bfe4 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -92,7 +92,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
//advancedConfig,
variant,
- textDecoration,
+ textTransform,
resetStyles,
...rest
} = mergeProps(props, defaultFileInputButtonProps);
@@ -514,7 +514,8 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
style={style}
color={color}
variant={variant}
- textDecoration={textDecoration}
+ textTransform={textTransform}
+ textColor={textColor}
resetStyles={resetStyles}
onClick={handleClick}
{...rest}
diff --git a/src/files-ui/components/file-input-button/InputButtonProps.ts b/src/files-ui/components/file-input-button/InputButtonProps.ts
index fe4b1e7166b9550bbf9e1d0b4e7d33f153f1c268..4e05985ecf9915ae46d85fbcdbb5d5047108da2d 100644
--- a/src/files-ui/components/file-input-button/InputButtonProps.ts
+++ b/src/files-ui/components/file-input-button/InputButtonProps.ts
@@ -143,7 +143,7 @@ export declare type FileInputButtonProps =
export const defaultFileInputButtonProps: FileInputButtonProps =
{
- textDecoration: "uppercase",
+ textTransform: "uppercase",
label: "browse...",
behaviour: "add",
disabled: false,
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
index 2768a30b48138f20dbbb3a4f28672b2abea87f56..be11fe2c9f7adf0d13ee515a00c1c5631effa613 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -11,7 +11,7 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
const {
disabled,
href,
- textDecoration,
+ textTransform:textDecoration,
variant = "contained",
color = "#1976d2",
textColor ="white",
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index f75aa9a83ad995a1bc62a65b0471a48e8d176099..7ca40ede3895a505b6af4ee335cff486bdfa003a 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -15,7 +15,7 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
* - none: no text decoration
* @default 'uppercase'
*/
- textDecoration?: "uppercase" | "capitalize" | "lowercase" | "none";
+ textTransform?: "uppercase" | "capitalize" | "lowercase" | "none";
/**
* The type of style that will be rendered.
* - contained: with background color
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index a94655b007b075a96a1c87fbe4d18b9170b76554..8cd35bcbe065336269d1393fb367b992f3ea90fb 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -298,181 +298,38 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<CodeDemoDropzoneActionButtons button />
</section>
- <section id="header-config">
- <SubTitle content="Dropzone header config" />
- <DescParagraph>
- You can use the <TypeHighlight>headerConfig</TypeHighlight> prop to
- define what will be displayed in the header.
- <ul>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.customHeader</TypeHighlight> prop
- defined will display this prop replacing the entire default
- header.
- </li>
- </ul>
- By default all of these values are set to{" "}
- <TypeHighlight>true</TypeHighlight>.
- </DescParagraph>
-
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneHeaderConfig />
- </Paper>
-
- <CodeDemoDropzoneHeaderConfig />
- <Alert severity="info">
- <AlertTitle> HeaderConfig </AlertTitle>
- There are more options that can be defined such as:
- <ul>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.deleteFiles</TypeHighlight> prop set
- to <TypeHighlight>true</TypeHighlight> will display a delete
- button which triggers the delete process.
- <br />
- This button will be visible only{" "}
- <strong>when the "upload" process is not active</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.cleanFiles</TypeHighlight> prop set
- to <TypeHighlight>true</TypeHighlight> will display a "clean"
- buton. This button will be visible only during the "upload"
- process.
- <br />
- button will be visible only{" "}
- <strong>when the "upload" process is not active</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.uploadFiles</TypeHighlight> prop set
- to <TypeHighlight>true</TypeHighlight> will display a button
- which starts the upload process.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.uploading</TypeHighlight> prop set
- to <TypeHighlight>true</TypeHighlight> will display a loading
- icon <strong>during the "upload" process</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.maxFileSize</TypeHighlight> prop set
- to <TypeHighlight>true</TypeHighlight> will display the max file
- size label.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>headerConfig.validFilesCount</TypeHighlight> prop
- set to <TypeHighlight>true</TypeHighlight> will display the
- current count of valid files.
- </li>
- </ul>
- By default all of these values are set to
- <TypeHighlight>true</TypeHighlight>. The complete type definition
- can be found{" "}
- <AnchorToTab href="/types#header-config">here</AnchorToTab>.
- </Alert>
- </section>
-
- <section id="footer-config">
- <SubTitle content="Dropzone footer config" />
- <DescParagraph>
- You can use the <TypeHighlight>footerConfig</TypeHighlight> prop to
- define what will be displayed in the footer.
- <ul>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>footerConfig.customMessage</TypeHighlight> prop
- defined will be considered the message to display in the footer.
- </li>
- </ul>
- </DescParagraph>
-
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneFooterConfig />
- </Paper>
-
- <CodeDemoDropzoneFooterConfig />
-
- <Alert severity="info">
- <AlertTitle> FooterConfig </AlertTitle>
- There are more options that can be defined such as:
- <ul>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>footerConfig.allowedTypesLabel</TypeHighlight>{" "}
- prop set to <TypeHighlight>false</TypeHighlight> will hide the
- label that indicates the files types allowed. This label will be
- hidden <strong>when the "upload" process is active</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>
- footerConfig.uploadProgressMessage
- </TypeHighlight>{" "}
- prop set to <TypeHighlight>false</TypeHighlight> will not
- display the label with the upload progress. This label will be
- visible<strong> only during the "upload" process</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>footerConfig.uploadResultMessage</TypeHighlight>{" "}
- prop set to <TypeHighlight>false</TypeHighlight> will not
- display a label at the end of the upload process. This label can{" "}
- be visible for 2 seconds just{" "}
- <strong>after the "upload" process finishes</strong>.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>footerConfig.noMissingFilesLabel</TypeHighlight>{" "}
- prop set to <TypeHighlight>false</TypeHighlight> will not
- display a label when upload starts with no uploadable files.
- </li>
- <li>
- Dropzone with the{" "}
- <TypeHighlight>footerConfig.style</TypeHighlight> prop set to{" "}
- <TypeHighlight>false</TypeHighlight>defined will override the
- styles associated to the footer component.
- </li>
- </ul>
- By default all of these values are set to
- <TypeHighlight>true</TypeHighlight>.
- <br />
- The complete type definition can be found{" "}
- <AnchorToTab href="/types#footer-config">here</AnchorToTab>.
- </Alert>
- </section>
-
<section id="styling">
- <SubTitle content="Styling Dropzone" />
+ <SubTitle content="Styling FileInputButton" />
<DescParagraph>
You can use change the look and feel of the{" "}
- <CodeHighlight>Dropzone</CodeHighlight> component
+ <CodeHighlight>FileInputButton</CodeHighlight> component
<ul>
<li>
- Dropzone with the <TypeHighlight>color</TypeHighlight> prop
- defined will use this color for border, drop layer, font color
- and ripple.
+ FileInputButton with the <TypeHighlight>color</TypeHighlight>{" "}
+ prop defined will use this color as the theme color.
+ </li>
+ <li>
+ FileInputButton with the{" "}
+ <TypeHighlight>textColor</TypeHighlight> prop defined will use
+ this value to define the color of the text to be displayed.
</li>
<li>
- Dropzone with the <TypeHighlight>minHeight</TypeHighlight> prop
- defined will use this value to define the minimum height of the
- component.
+ FileInputButton with the <TypeHighlight>variant</TypeHighlight>{" "}
+ prop defined can display the button in 3 different variants:
+ contained(default), outlined and text.
</li>
<li>
- Dropzone with the <TypeHighlight>background</TypeHighlight> prop
- defined will use this value for the background. You can set nice
- gradients or even a background image.
+ FileInputButton with the <TypeHighlight>textTransform</TypeHighlight>{" "}
+ prop defined can display the text with a text transform style (e.g. "uppercase").
</li>
</ul>
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneStyling />
+ <DemoDropzoneStyling button />
</Paper>
- <CodeDemoDropzoneStyling />
+ <CodeDemoDropzoneStyling button />
</section>
<section id="label">