[docs] Clarify Hidden down props as exclusive (#36927)

Co-authored-by: ZeeshanTamboli <[email protected]>

docs/translations/api-docs/hidden/hidden.json

@@ -4,17 +4,17 @@
     "children": "The content of the component.",
     "implementation": "Specify which implementation to use.  'js' is the default, 'css' works better for server-side rendering.",
     "initialWidth": "You can use this prop when choosing the <code>js</code> implementation with server-side rendering.<br>As <code>window.innerWidth</code> is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width.<br>For instance, you could be using the user-agent or the client-hints. <a href=\"https://caniuse.com/#search=client%20hint\">https://caniuse.com/#search=client%20hint</a>",
-    "lgDown": "If <code>true</code>, screens this size and down are hidden.",
-    "lgUp": "If <code>true</code>, screens this size and up are hidden.",
-    "mdDown": "If <code>true</code>, screens this size and down are hidden.",
-    "mdUp": "If <code>true</code>, screens this size and up are hidden.",
+    "lgDown": "If <code>true</code>, component is hidden on screens below (but not including) this size.",
+    "lgUp": "If <code>true</code>, component is hidden on screens this size and above.",
+    "mdDown": "If <code>true</code>, component is hidden on screens below (but not including) this size.",
+    "mdUp": "If <code>true</code>, component is hidden on screens this size and above.",
     "only": "Hide the given breakpoint(s).",
-    "smDown": "If <code>true</code>, screens this size and down are hidden.",
-    "smUp": "If <code>true</code>, screens this size and up are hidden.",
-    "xlDown": "If <code>true</code>, screens this size and down are hidden.",
-    "xlUp": "If <code>true</code>, screens this size and up are hidden.",
-    "xsDown": "If <code>true</code>, screens this size and down are hidden.",
-    "xsUp": "If <code>true</code>, screens this size and up are hidden."
+    "smDown": "If <code>true</code>, component is hidden on screens below (but not including) this size.",
+    "smUp": "If <code>true</code>, component is hidden on screens this size and above.",
+    "xlDown": "If <code>true</code>, component is hidden on screens below (but not including) this size.",
+    "xlUp": "If <code>true</code>, component is hidden on screens this size and above.",
+    "xsDown": "If <code>true</code>, component is hidden on screens below (but not including) this size.",
+    "xsUp": "If <code>true</code>, component is hidden on screens this size and above."
   },
   "classDescriptions": {}
 }

packages/mui-material/src/Hidden/Hidden.js

@@ -85,22 +85,22 @@ Hidden.propTypes /* remove-proptypes */ = {
    */
   initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp: PropTypes.bool,
@@ -112,32 +112,32 @@ Hidden.propTypes /* remove-proptypes */ = {
     PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired),
   ]),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp: PropTypes.bool,

packages/mui-material/src/Hidden/withWidth.js

@@ -16,7 +16,7 @@ export const isWidthUp = (breakpoint, width, inclusive = true) => {
   return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-// By default, returns true if screen width is the same or less than the given breakpoint.
+// By default, returns true if screen width is less than the given breakpoint.
 export const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {
     return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);