Merge commits since PR creation (#1)

* [docs] Batch small changes (mui#17435) * [docs] Add synonyms for brand icons (mui#17455) * [docs] Add synonyms for brand icons * Remove Ic prefixed icons * [docs] Improve in-site search (mui#17450) * [ButtonBase] Fix blurry text issue (mui#17453) * [docs] Revert hits per page change (mui#17458) * [docs] Fix heading format in CONTRIBUTING.md (mui#17460) * [Chip] Load the right version of Avatar (mui#17469) * [TablePagination] Merge root classes properly (mui#17467) * [Breadcrumbs] Improve API docs (mui#17468) * [TextField] Handle Chrome autofill (mui#17436) * [docs] Clarify props spread for ListItem when button flag is set (mui#17466)
nrkroeker · Sep 18, 2019 · 64aea98 · 64aea98
1 parent b547d34
commit 64aea98
Show file tree

Hide file tree

Showing 223 changed files with 1,210 additions and 1,120 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -14,7 +14,7 @@ When adding new features or modifying existing, please attempt to include tests
 
 When submitting a new component, please add it to the [lab](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab).
 
-### Branch Structure
+### Branch structure
 
 All stable releases are tagged ([view tags](https://github.com/mui-org/material-ui/tags)).
 At any given time, `master` represents the latest development version of the library.

diff --git a/docs/pages/api/breadcrumbs.md b/docs/pages/api/breadcrumbs.md
@@ -29,7 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'nav'</span> | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
 | <span class="prop-name">itemsAfterCollapse</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | If max items is exceeded, the number of items to show after the ellipsis. |
 | <span class="prop-name">itemsBeforeCollapse</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | If max items is exceeded, the number of items to show before the ellipsis. |
-| <span class="prop-name">maxItems</span> | <span class="prop-type">number</span> | <span class="prop-default">8</span> | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first and last will be shown, with an ellipsis in between. |
+| <span class="prop-name">maxItems</span> | <span class="prop-type">number</span> | <span class="prop-default">8</span> | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. |
 | <span class="prop-name">separator</span> | <span class="prop-type">node</span> | <span class="prop-default">'/'</span> | Custom separator node. |
 
 The `ref` is forwarded to the root element.

diff --git a/docs/pages/api/button-base.md b/docs/pages/api/button-base.md
@@ -32,7 +32,7 @@ It contains a load of style reset and some focus/ripple logic.
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <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">component</span> | <span class="prop-type">element type</span> | <span class="prop-default">'button'</span> | The component used for the root node. Either a string to use a DOM element or a component.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the base button will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the base button will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. |
 | <span class="prop-name">disableTouchRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the touch ripple effect will be disabled. |
 | <span class="prop-name">focusRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |

diff --git a/docs/pages/api/list-item.md b/docs/pages/api/list-item.md
@@ -26,7 +26,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">alignItems</span> | <span class="prop-type">'flex-start'<br>&#124;&nbsp;'center'</span> | <span class="prop-default">'center'</span> | Defines the `align-items` style property. |
 | <span class="prop-name">autoFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be focused during the first mount. Focus will also be triggered if the value changes from false to true. |
-| <span class="prop-name">button</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be a button (using `ButtonBase`). |
+| <span class="prop-name">button</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be a button (using `ButtonBase`). Props intended for `ButtonBase` can then be applied to `ListItem`. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. If a `ListItemSecondaryAction` is used it must be the last child. |
 | <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">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |

diff --git a/docs/scripts/updateIconSynonyms.js b/docs/scripts/updateIconSynonyms.js
@@ -24,7 +24,7 @@ async function run() {
       // remove the icon name strings from the tags
       icon.tags = not(icon.tags, icon.name.replace('_'));
       // Fix the 3 exceptions
-      icon.name = myDestRewriter({ base: `ic_${icon.name}` });
+      icon.name = myDestRewriter({ base: icon.name });
 
       acc[icon.name] = icon.tags;
       return acc;

diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -89,7 +89,7 @@ function Ad(props) {
 
   return (
     <span className={classes.root}>
-      {random >= 0.7 ? <AdCodeFund /> : <AdCarbon />}
+      {random >= 0.6 ? <AdCodeFund /> : <AdCarbon />}
       {adblock === true ? getAdblock(classes, t) : null}
     </span>
   );

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -127,33 +127,33 @@ function AppFrame(props) {
   const crowdInLocale = LOCALES[userLanguage] || userLanguage;
 
   const [languageMenu, setLanguageMenu] = React.useState(null);
-  function handleLanguageIconClick(event) {
+  const handleLanguageIconClick = event => {
     setLanguageMenu(event.currentTarget);
-  }
-  function handleLanguageMenuClose(event) {
+  };
+  const handleLanguageMenuClose = event => {
     if (event.currentTarget.nodeName === 'A') {
       document.cookie = `userLanguage=noDefault;path=/;max-age=31536000`;
     }
     setLanguageMenu(null);
-  }
+  };
 
   const [mobileOpen, setMobileOpen] = React.useState(false);
-  function handleDrawerOpen() {
+  const handleDrawerOpen = () => {
     setMobileOpen(true);
-  }
-  function handleDrawerClose() {
+  };
+  const handleDrawerClose = () => {
     setMobileOpen(false);
-  }
+  };
 
   const changeTheme = useChangeTheme();
-  function handleTogglePaletteType() {
+  const handleTogglePaletteType = () => {
     const paletteType = theme.palette.type === 'light' ? 'dark' : 'light';
 
     changeTheme({ paletteType });
-  }
-  function handleToggleDirection() {
+  };
+  const handleToggleDirection = () => {
     changeTheme({ direction: theme.direction === 'ltr' ? 'rtl' : 'ltr' });
-  }
+  };
 
   const router = useRouter();
   const { canonical } = pathnameToLanguage(Router2._rewriteUrlForNextExport(router.asPath));

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -45,13 +45,16 @@ function initDocsearch(userLanguage) {
     }
 
     initialized = docsearchInput;
-    window.docsearch({
+    const search = window.docsearch({
       apiKey: '1d8534f83b9b0cfea8f16498d19fbcab',
       indexName: 'material-ui',
       inputSelector: '#docsearch-input',
       algoliaOptions: {
         facetFilters: ['version:master', `language:${userLanguage}`],
       },
+      autocompleteOptions: {
+        openOnFocus: true,
+      },
       handleSelected: (input, event, suggestion) => {
         event.button = 0;
         const parseUrl = url.parse(suggestion.url);
@@ -60,100 +63,135 @@ function initDocsearch(userLanguage) {
       },
       // debug: true, // Set debug to true if you want to inspect the dropdown.
     });
+
+    search.autocomplete.on('autocomplete:cursorchanged', event => {
+      const combobox = event.target;
+      const selectedOptionNode = document.getElementById(
+        combobox.getAttribute('aria-activedescendant'),
+      );
+      const listboxNode = document.querySelector('.ds-suggestions').parentElement;
+
+      if (selectedOptionNode === null || listboxNode === null) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('Cant scroll to selected option.');
+        }
+        return;
+      }
+
+      // scroll active descendant into view
+      // logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+      if (listboxNode.scrollHeight > listboxNode.clientHeight) {
+        const element = selectedOptionNode;
+
+        const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
+        const elementBottom = element.offsetTop + element.offsetHeight;
+        if (elementBottom > scrollBottom) {
+          listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
+        } else if (element.offsetTop < listboxNode.scrollTop) {
+          listboxNode.scrollTop = element.offsetTop;
+        }
+      }
+    });
   }, 100);
 }
 
-const useStyles = makeStyles(theme => ({
-  '@global': {
-    '.algolia-autocomplete': {
-      '& .ds-dropdown-menu': {
-        boxShadow: theme.shadows[1],
-        borderRadius: theme.shape.borderRadius,
-        '&::before': {
-          display: 'none',
-        },
-        '& [class^=ds-dataset-]': {
-          border: 0,
-          maxHeight: 'calc(100vh - 100px)',
+const useStyles = makeStyles(
+  theme => ({
+    '@global': {
+      '.algolia-autocomplete': {
+        '& .ds-dropdown-menu': {
+          boxShadow: theme.shadows[1],
           borderRadius: theme.shape.borderRadius,
+          '&::before': {
+            display: 'none',
+          },
+          '& [class^=ds-dataset-]': {
+            border: 0,
+            maxHeight: 'calc(100vh - 100px)',
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: theme.palette.background.paper,
+          },
+        },
+        '& .algolia-docsearch-suggestion--category-header-lvl0': {
+          color: theme.palette.text.primary,
+        },
+        '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column': {
+          opacity: 1,
+          padding: '5.33px 10.66px',
+          textAlign: 'right',
+          width: '25%',
+        },
+        '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content': {
+          float: 'right',
+          padding: '5.33px 0 5.33px 10.66px',
+          width: '75%',
+        },
+        '& .algolia-docsearch-suggestion--subcategory-column-text': {
+          color: theme.palette.text.secondary,
+          fontWeight: theme.typography.fontWeightRegular,
+        },
+        '& .algolia-docsearch-suggestion--highlight': {
+          color: theme.palette.type === 'light' ? '#174d8c' : '#acccf1',
+        },
+        '& .algolia-docsearch-suggestion': {
+          textDecoration: 'none',
           backgroundColor: theme.palette.background.paper,
         },
+        '& .algolia-docsearch-suggestion--title': {
+          ...theme.typography.h6,
+          color: theme.palette.text.primary,
+        },
+        '& .algolia-docsearch-suggestion--text': {
+          ...theme.typography.body2,
+          color: theme.palette.text.secondary,
+        },
+        '&& .algolia-docsearch-suggestion--no-results': {
+          width: '100%',
+          '&::before': {
+            display: 'none',
+          },
+        },
+        '& .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content': {
+          backgroundColor: `${theme.palette.action.selected} !important`,
+        },
       },
-      '& .algolia-docsearch-suggestion--category-header-lvl0': {
-        color: theme.palette.text.primary,
-      },
-      '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column': {
-        opacity: 1,
-        padding: '5.33px 10.66px',
-        textAlign: 'right',
-        width: '25%',
-      },
-      '& .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content': {
-        float: 'right',
-        padding: '5.33px 0 5.33px 10.66px',
-        width: '75%',
-      },
-      '& .algolia-docsearch-suggestion--subcategory-column-text': {
-        color: theme.palette.text.secondary,
-        fontWeight: theme.typography.fontWeightRegular,
-      },
-      '& .algolia-docsearch-suggestion--highlight': {
-        color: theme.palette.type === 'light' ? '#174d8c' : '#acccf1',
-      },
-      '& .algolia-docsearch-suggestion': {
-        textDecoration: 'none',
-        backgroundColor: theme.palette.background.paper,
-      },
-      '& .algolia-docsearch-suggestion--title': {
-        ...theme.typography.h6,
-        color: theme.palette.text.primary,
-      },
-      '& .algolia-docsearch-suggestion--text': {
-        ...theme.typography.body2,
-        color: theme.palette.text.secondary,
+    },
+    root: {
+      fontFamily: theme.typography.fontFamily,
+      position: 'relative',
+      marginRight: theme.spacing(2),
+      marginLeft: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: fade(theme.palette.common.white, 0.15),
+      '&:hover': {
+        backgroundColor: fade(theme.palette.common.white, 0.25),
       },
-      '&& .algolia-docsearch-suggestion--no-results': {
-        width: '100%',
-        '&::before': {
-          display: 'none',
+      '& $inputInput': {
+        transition: theme.transitions.create('width'),
+        width: 120,
+        '&:focus': {
+          width: 170,
         },
       },
     },
-  },
-  root: {
-    fontFamily: theme.typography.fontFamily,
-    position: 'relative',
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(1),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
+    search: {
+      width: theme.spacing(9),
+      height: '100%',
+      position: 'absolute',
+      pointerEvents: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    '& $inputInput': {
-      transition: theme.transitions.create('width'),
-      width: 120,
-      '&:focus': {
-        width: 170,
-      },
+    inputRoot: {
+      color: 'inherit',
+    },
+    inputInput: {
+      padding: theme.spacing(1, 1, 1, 9),
     },
-  },
-  search: {
-    width: theme.spacing(9),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputRoot: {
-    color: 'inherit',
-  },
-  inputInput: {
-    padding: theme.spacing(1, 1, 1, 9),
-  },
-}));
+  }),
+  { name: 'AppSearch' },
+);
 
 export default function AppSearch() {
   const classes = useStyles();