[SvgIcon] Rename nativeColor -> htmlColor (#14863)

Author: oliviertassinari

docs/src/modules/utils/textToHash.js

@@ -18,7 +18,7 @@ export default function textToHash(text, unique = {}) {
         // eslint-disable-next-line no-useless-escape
         .replace(/[!@#\$%\^&\*\(\)=_\+\[\]{}`~;:'"\|,\.<>\/\?\s]+/g, '-')
         .replace(/-+/g, '-')
-        .replace(/-$/g, ''),
+        .replace(/^-|-$/g, ''),
     ),
     unique,
   );

docs/src/modules/utils/textToHash.test.js

@@ -13,6 +13,10 @@ describe('textToHash', () => {
       textToHash('createGenerateClassName([options]) => class name generator'),
       'creategenerateclassname-options-class-name-generator',
     );
+    assert.strictEqual(
+      textToHash('@material-ui/core/styles vs @material-ui/styles'),
+      'material-ui-core-styles-vs-material-ui-styles',
+    );
   });
 
   it('should generate a unique hash', () => {

docs/src/pages/style/color/ColorDemo.js

@@ -93,7 +93,7 @@ function ColorDemo(props) {
 \`\`\``}
         />
         <Fab className={classes.fab} style={{ backgroundColor: secondary.main }} aria-label="Add">
-          <AddIcon nativeColor={secondary.contrastText} />
+          <AddIcon htmlColor={secondary.contrastText} />
         </Fab>
       </div>
     </div>

docs/src/pages/versions/LatestVersions.js

@@ -55,7 +55,7 @@ function LatestVersions(props) {
                 variant="body2"
                 color="secondary"
                 rel="nofollow"
-                href="https://next.material-ui.com/"
+                href="https://next--material-ui.netlify.com/"
               >
                 Documentation
               </Link>

packages/material-ui/src/SvgIcon/SvgIcon.d.ts

@@ -6,7 +6,7 @@ export interface SvgIconProps
   color?: PropTypes.Color | 'action' | 'disabled' | 'error';
   component?: React.ReactType<SvgIconProps>;
   fontSize?: 'inherit' | 'default' | 'small' | 'large';
-  nativeColor?: string;
+  htmlColor?: string;
   shapeRendering?: string;
   titleAccess?: string;
   viewBox?: string;

packages/material-ui/src/SvgIcon/SvgIcon.js

@@ -60,7 +60,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
     color,
     component: Component,
     fontSize,
-    nativeColor,
+    htmlColor,
     titleAccess,
     viewBox,
     ...other
@@ -78,7 +78,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
       )}
       focusable="false"
       viewBox={viewBox}
-      color={nativeColor}
+      color={htmlColor}
       aria-hidden={titleAccess ? 'false' : 'true'}
       role={titleAccess ? 'img' : 'presentation'}
       ref={ref}
@@ -106,7 +106,7 @@ SvgIcon.propTypes = {
   className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
-   * You can use the `nativeColor` property to apply a color attribute to the SVG element.
+   * You can use the `htmlColor` property to apply a color attribute to the SVG element.
    */
   color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled']),
   /**
@@ -121,7 +121,7 @@ SvgIcon.propTypes = {
   /**
    * Applies a color attribute to the SVG element.
    */
-  nativeColor: PropTypes.string,
+  htmlColor: PropTypes.string,
   /**
    * The shape-rendering attribute. The behavior of the different options is described on the
    * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).

pages/api/svg-icon.md

@@ -20,10 +20,10 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | Node passed into the SVG element. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br></span> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `nativeColor` property to apply a color attribute to the SVG element. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit', 'primary', 'secondary', 'action', 'error', 'disabled'<br></span> | <span class="prop-default">'inherit'</span> | The color of the component. It supports those theme colors that make sense for this component. You can use the `htmlColor` property to apply a color attribute to the SVG element. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'svg'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'&nbsp;&#124;<br>&nbsp;'small'&nbsp;&#124;<br>&nbsp;'large'<br></span> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
-| <span class="prop-name">nativeColor</span> | <span class="prop-type">string</span> |   | Applies a color attribute to the SVG element. |
+| <span class="prop-name">htmlColor</span> | <span class="prop-type">string</span> |   | Applies a color attribute to the SVG element. |
 | <span class="prop-name">shapeRendering</span> | <span class="prop-type">string</span> |   | The shape-rendering attribute. The behavior of the different options is described on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). If you are having issues with blurry icons you should investigate this property. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string</span> |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
 | <span class="prop-name">viewBox</span> | <span class="prop-type">string</span> | <span class="prop-default">'0 0 24 24'</span> | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |