[theme] Remove theme.breakpoints.width helper (#25918)

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -151,6 +151,13 @@ export default function PlainCssPriority() {
  +<Hidden mdDown>{...}</Hidden> // '@media (min-width:600px)'
  ```
 
+- The `theme.breakpoints.width` utility was removed because it's redundant. Use `theme.breakpoints.values` to get the same values.
+
+ ```diff
+ -theme.breakpoints.width('md')
+ +theme.breakpoints.values.md
+ ```
+
 - The signature of `theme.palette.augmentColor` helper has changed:
 
  ```diff

packages/material-ui/src/styles/createBreakpoints.d.ts

@@ -16,7 +16,6 @@ export interface Breakpoints {
  down: (key: Breakpoint | number) => string;
  between: (start: Breakpoint | number, end: Breakpoint | number) => string;
  only: (key: Breakpoint) => string;
- width: (key: Breakpoint) => number;
 }
 
 export type BreakpointsOptions = Partial<

packages/material-ui/src/styles/createBreakpoints.js

@@ -55,18 +55,13 @@ export default function createBreakpoints(breakpoints) {
  return up(key);
  }
 
- function width(key) {
- return values[key];
- }
-
  return {
  keys,
  values,
  up,
  down,
  between,
  only,
- width,
  unit,
  ...other,
  };

packages/material-ui/src/styles/createBreakpoints.test.js

@@ -96,14 +96,4 @@ describe('createBreakpoints', () => {
  );
  });
  });
-
- describe('width', () => {
- it('should work', () => {
- expect(breakpoints.width('md')).to.equal(960);
- });
-
- it('should work for custom breakpoints', () => {
- expect(customBreakpoints.width('tablet')).to.equal(640);
- });
- });
 });