chore!(icon): Renamed the download icon to upload

BREAKING_CHANGE: The `download` icon used by the `IconProvider` has been
renamed to `upload` to better match the icon that is being used.

Author: mlaursen

examples/create-react-app-typescript/src/components/Layout/Layout.tsx

@@ -25,7 +25,6 @@ import navItems from "./navItems";
 const icons: ConfigurableIcons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -36,6 +35,7 @@ const icons: ConfigurableIcons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 };
 
 interface LayoutProps {

examples/create-react-app/src/components/Layout/Layout.js

@@ -23,7 +23,6 @@ import navItems from './navItems';
 const icons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -34,6 +33,7 @@ const icons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 };
 
 export default function Layout({ children }) {

examples/gatsby-typescript/src/components/Layout/Layout.jsx

@@ -24,7 +24,6 @@ import navItems from "./navItems"
 const icons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -35,6 +34,7 @@ const icons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 }
 
 export default function Layout({ children, location: { pathname } }) {

examples/gatsby/src/components/Layout/Layout.jsx

@@ -24,7 +24,6 @@ import navItems from "./navItems"
 const icons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -35,6 +34,7 @@ const icons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 }
 
 export default function Layout({ children, path }) {

examples/nextjs-typescript/src/components/Layout/Layout.tsx

@@ -26,7 +26,6 @@ import navItems from "./navItems";
 const icons: ConfigurableIcons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -37,6 +36,7 @@ const icons: ConfigurableIcons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 };
 
 interface LayoutProps {

examples/nextjs/src/components/Layout/Layout.jsx

@@ -24,7 +24,6 @@ import navItems from './navItems';
 const icons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
-  download: <FileUploadSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
@@ -35,6 +34,7 @@ const icons = {
   radio: <RadioButtonCheckedSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 };
 
 export default function Layout({ children }) {

packages/documentation/src/components/Layout/Layout.tsx

@@ -50,7 +50,6 @@ const icons: ConfiguredIcons = {
   back: <KeyboardArrowLeftSVGIcon />,
   checkbox: <CheckBoxSVGIcon />,
   dropdown: <ArrowDropDownSVGIcon />,
-  download: <FileUploadSVGIcon />,
   expander: <KeyboardArrowDownSVGIcon />,
   error: <ErrorOutlineSVGIcon />,
   forward: <KeyboardArrowRightSVGIcon />,
@@ -60,6 +59,7 @@ const icons: ConfiguredIcons = {
   password: <RemoveRedEyeSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
+  upload: <FileUploadSVGIcon />,
 };
 
 let devLayoutConf: LayoutConfiguration | undefined;

packages/form/src/file-input/FileInput.tsx

@@ -97,7 +97,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
     ref
   ) {
     const { id, disabled } = props;
-    const icon = useIcon("download", propIcon);
+    const icon = useIcon("upload", propIcon);
     const disableIconSpacing =
       propDisableIconSpacing ?? typeof propChildren === "undefined";
 

packages/icon/src/IconProvider.tsx

@@ -8,6 +8,9 @@ import {
 
 import { FontIcon } from "./FontIcon";
 
+/**
+ * @remarks \@since 5.0.0 The `download` icon has been renamed to `upload`.
+ */
 export interface ConfigurableIcons {
   /**
    * The general icon for navigating backwards or closing an item to the left.
@@ -25,15 +28,6 @@ export interface ConfigurableIcons {
    */
   dropdown?: ReactNode;
 
-  /**
-   * The general icon to use for the `FileInput` component (normally file
-   * uploads).
-   *
-   * @remarks \@since 4.0.3 Changed the default icon to be `file_upload` and
-   * this will be renamed to `upload` in the next major release.
-   */
-  download?: ReactNode;
-
   /**
    * The general icon to use when there are form errors.
    *
@@ -86,14 +80,22 @@ export interface ConfigurableIcons {
    * behavior.
    */
   sort?: ReactNode;
+
+  /**
+   * The general icon to use for the `FileInput` component (normally file
+   * uploads).
+   *
+   * @remarks \@since 5.0.0
+   */
+  upload?: ReactNode;
 }
 
 export type ConfiguredIcons = Required<ConfigurableIcons>;
 
 const DEFAULT_ICONS: ConfiguredIcons = {
   back: <FontIcon>keyboard_arrow_left</FontIcon>,
   checkbox: <FontIcon>check_box</FontIcon>,
-  download: <FontIcon>file_upload</FontIcon>,
+  upload: <FontIcon>file_upload</FontIcon>,
   dropdown: <FontIcon>arrow_drop_down</FontIcon>,
   error: <FontIcon>error_outline</FontIcon>,
   expander: <FontIcon>keyboard_arrow_down</FontIcon>,
@@ -153,7 +155,6 @@ export function IconProvider({
   children,
   back = DEFAULT_ICONS.back,
   checkbox = DEFAULT_ICONS.checkbox,
-  download = DEFAULT_ICONS.download,
   dropdown = DEFAULT_ICONS.dropdown,
   expander = DEFAULT_ICONS.expander,
   error = DEFAULT_ICONS.error,
@@ -164,12 +165,12 @@ export function IconProvider({
   radio = DEFAULT_ICONS.radio,
   selected = DEFAULT_ICONS.selected,
   sort = DEFAULT_ICONS.sort,
+  upload = DEFAULT_ICONS.upload,
 }: IconProviderProps): ReactElement {
-  const value = useMemo(
+  const value = useMemo<ConfiguredIcons>(
     () => ({
       back,
       checkbox,
-      download,
       dropdown,
       error,
       expander,
@@ -180,11 +181,11 @@ export function IconProvider({
       radio,
       selected,
       sort,
+      upload,
     }),
     [
       back,
       checkbox,
-      download,
       dropdown,
       error,
       expander,
@@ -195,6 +196,7 @@ export function IconProvider({
       radio,
       selected,
       sort,
+      upload,
     ]
   );