Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into accordion-joy-classes
Browse files Browse the repository at this point in the history
sai6855 committed Sep 5, 2023
2 parents 6c3faf1 + b2c4a86 commit 3205fac
Showing 17 changed files with 128 additions and 116 deletions.
1 change: 0 additions & 1 deletion docs/.link-check-errors.txt
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
Broken links found by `yarn docs:link-check` that exist:

- https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
- https://mui.com/joy-ui/integrations/material-ui/
- https://mui.com/size-snapshot
35 changes: 11 additions & 24 deletions docs/data/joy/components/link/LinkCard.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import Box from '@mui/joy/Box';
import Card from '@mui/joy/Card';
import Link from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';
import CenterFocusWeak from '@mui/icons-material/CenterFocusWeak';

export default function LinkCard() {
return (
<Card>
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
<Avatar size="lg" src="/static/images/avatar/1.jpg" />
<div>
{/* This could be a heading (eg. h2) depends on your use case. */}
<Typography component="div">
<Link
overlay
href="#with-card"
textColor="inherit"
underline="none"
fontWeight="md"
>
Joy UI
</Link>
</Typography>
<Typography level="body-sm">Components that spark joy!</Typography>
</div>
</Box>
<Typography level="body-sm" display="flex" alignItems="center" gap={0.5}>
Click the <CenterFocusWeak /> and <kbd>TAB</kbd> to test the focus
</Typography>
<Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
<Avatar size="lg" src="/static/images/avatar/1.jpg" />
<Link
overlay
href="#introduction"
underline="none"
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
>
<Typography level="body-md">Joy UI</Typography>
<Typography level="body-sm">Components that spark joy!</Typography>
</Link>
</Card>
);
}
35 changes: 11 additions & 24 deletions docs/data/joy/components/link/LinkCard.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import Box from '@mui/joy/Box';
import Card from '@mui/joy/Card';
import Link from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';
import CenterFocusWeak from '@mui/icons-material/CenterFocusWeak';

export default function LinkCard() {
return (
<Card>
<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
<Avatar size="lg" src="/static/images/avatar/1.jpg" />
<div>
{/* This could be a heading (eg. h2) depends on your use case. */}
<Typography component="div">
<Link
overlay
href="#with-card"
textColor="inherit"
underline="none"
fontWeight="md"
>
Joy UI
</Link>
</Typography>
<Typography level="body-sm">Components that spark joy!</Typography>
</div>
</Box>
<Typography level="body-sm" display="flex" alignItems="center" gap={0.5}>
Click the <CenterFocusWeak /> and <kbd>TAB</kbd> to test the focus
</Typography>
<Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
<Avatar size="lg" src="/static/images/avatar/1.jpg" />
<Link
overlay
href="#introduction"
underline="none"
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
>
<Typography level="body-md">Joy UI</Typography>
<Typography level="body-sm">Components that spark joy!</Typography>
</Link>
</Card>
);
}
12 changes: 12 additions & 0 deletions docs/data/joy/components/link/LinkCard.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
<Avatar size="lg" src="/static/images/avatar/1.jpg" />
<Link
overlay
href="#introduction"
underline="none"
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
>
<Typography level="body-md">Joy UI</Typography>
<Typography level="body-sm">Components that spark joy!</Typography>
</Link>
</Card>
21 changes: 21 additions & 0 deletions docs/data/material/components/autocomplete/autocomplete.md
Original file line number Diff line number Diff line change
@@ -81,6 +81,27 @@ Learn more about controlled and uncontrolled components in the [React documentat

{{"demo": "ControllableStates.js"}}

:::warning

If you control the `value`, make sure it's referentially stable between renders.
In other words, the reference to the value shouldn't change if the value itself doesn't change.

```tsx
// ⚠️ BAD
return <Autocomplete multiple value={allValues.filter((v) => v.selected)} />;

// 👍 GOOD
const selectedValues = React.useMemo(
() => allValues.filter((v) => v.selected),
[allValues],
);
return <Autocomplete multiple value={selectedValues} />;
```

In the first example, `allValues.filter` is called and returns **a new array** every render.
The fix includes memoizing the value, so it changes only when needed.
:::

## Free solo

Set `freeSolo` to true so the textbox can contain any arbitrary value.
18 changes: 0 additions & 18 deletions docs/data/material/components/material-icons/SearchIcons.js
Original file line number Diff line number Diff line change
@@ -132,22 +132,10 @@ const Icons = React.memo(function Icons(props) {

const handleIconClick = (icon) => () => {
if (Math.random() < 0.1) {
window.ga('send', {
hitType: 'event',
eventCategory: 'material-icons',
eventAction: 'click',
eventLabel: icon.name,
});
window.gtag('event', 'material-icons', {
eventAction: 'click',
eventLabel: icon.name,
});
window.ga('send', {
hitType: 'event',
eventCategory: 'material-icons-theme',
eventAction: 'click',
eventLabel: icon.theme,
});
window.gtag('event', 'material-icons-theme', {
eventAction: 'click',
eventLabel: icon.theme,
@@ -505,12 +493,6 @@ export default function SearchIcons() {

// Keep track of the no results so we can add synonyms in the future.
if (value.length >= 4 && results.length === 0) {
window.ga('send', {
hitType: 'event',
eventCategory: 'material-icons',
eventAction: 'no-results',
eventLabel: value,
});
window.gtag('event', 'material-icons', {
eventAction: 'no-results',
eventLabel: value,
2 changes: 1 addition & 1 deletion docs/data/material/guides/routing/routing.md
Original file line number Diff line number Diff line change
@@ -101,7 +101,7 @@ const LinkBehavior = React.forwardRef((props, ref) => (

### Next.js Pages Router

The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.

- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/-/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx) component.
This component is unstyled and only responsible for handling the navigation.
7 changes: 0 additions & 7 deletions docs/pages/_app.js
Original file line number Diff line number Diff line change
@@ -359,13 +359,6 @@ export function reportWebVitals({ id, name, label, delta, value }) {
return;
}

window.ga('send', 'event', {
eventCategory: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
eventAction: name,
eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
eventLabel: id, // id unique to current page load
nonInteraction: true, // avoids affecting bounce rate.
});
window.gtag('event', name, {
value: delta,
metric_label: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
8 changes: 0 additions & 8 deletions docs/pages/_document.js
Original file line number Diff line number Diff line change
@@ -34,9 +34,6 @@ if (process.env.NODE_ENV === 'production') {
const PRODUCTION_GA =
process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';

// TODO remove https://support.google.com/analytics/answer/11986666
const GOOGLE_ANALYTICS_ID = PRODUCTION_GA ? 'UA-106598593-2' : 'UA-106598593-3';

const GOOGLE_ANALYTICS_ID_V4 = PRODUCTION_GA ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';

export default class MyDocument extends Document {
@@ -176,11 +173,6 @@ export default class MyDocument extends Document {
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
window.ga('create','${GOOGLE_ANALYTICS_ID}',{
sampleRate: ${PRODUCTION_GA ? 80 : 100},
});
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
window.gtag = gtag;
2 changes: 1 addition & 1 deletion docs/src/components/header/HeaderNavDropdown.tsx
Original file line number Diff line number Diff line change
@@ -113,7 +113,7 @@ const DOCS = [
name: 'MUI Toolpad',
description: 'Low-code admin builder.',
href: ROUTES.toolpadDocs,
chip: 'Alpha',
chip: 'Beta',
},
];

13 changes: 1 addition & 12 deletions docs/src/modules/components/Ad.js
Original file line number Diff line number Diff line change
@@ -88,12 +88,7 @@ class AdErrorBoundary extends React.Component {
// send explicit `'null'`
const eventLabel = String(this.props.eventLabel);
// TODO: Use proper error monitoring service (e.g. Sentry) instead
window.ga('send', {
hitType: 'event',
eventCategory: 'ad',
eventAction: 'crash',
eventLabel,
});

window.gtag('event', 'ad', {
eventAction: 'crash',
eventLabel,
@@ -199,12 +194,6 @@ export default function Ad() {
}

const delay = setTimeout(() => {
window.ga('send', {
hitType: 'event',
eventCategory: 'ad',
eventAction: 'display',
eventLabel,
});
window.gtag('event', 'ad', {
eventAction: 'display',
eventLabel,
17 changes: 0 additions & 17 deletions docs/src/modules/components/GoogleAnalytics.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useRouter } from 'next/router';
import loadScript from 'docs/src/modules/utils/loadScript';
import { useNoSsrCodeVariant } from 'docs/src/modules/utils/codeVariant';
import { useNoSsrCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
import { useUserLanguage } from 'docs/src/modules/utils/i18n';
@@ -30,12 +29,6 @@ function handleClick(event) {
return;
}

window.ga('send', {
hitType: 'event',
eventCategory: category,
eventAction: element.getAttribute('data-ga-event-action'),
eventLabel: element.getAttribute('data-ga-event-label'),
});
window.gtag('event', category, {
eventAction: element.getAttribute('data-ga-event-action'),
eventLabel: element.getAttribute('data-ga-event-label'),
@@ -56,14 +49,11 @@ let boundDataGaListener = false;
*/
function GoogleAnalytics() {
React.useEffect(() => {
loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head'));

if (!boundDataGaListener) {
boundDataGaListener = true;
document.addEventListener('click', handleClick);
}
}, []);

const router = useRouter();
const timeout = React.useRef();

@@ -73,8 +63,6 @@ function GoogleAnalytics() {
clearTimeout(timeout.current);
timeout.current = setTimeout(() => {
const { canonicalAsServer } = pathnameToLanguage(window.location.pathname);
window.ga('set', { page: canonicalAsServer });
window.ga('send', { hitType: 'pageview' });

// https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag
window.gtag('event', 'page_view', {
@@ -88,15 +76,13 @@ function GoogleAnalytics() {

const codeVariant = useNoSsrCodeVariant();
React.useEffect(() => {
window.ga('set', 'dimension1', codeVariant);
window.gtag('set', 'user_properties', {
codeVariant,
});
}, [codeVariant]);

const userLanguage = useUserLanguage();
React.useEffect(() => {
window.ga('set', 'dimension2', userLanguage);
window.gtag('set', 'user_properties', {
userLanguage,
});
@@ -109,7 +95,6 @@ function GoogleAnalytics() {
*/
function trackDevicePixelRation() {
const devicePixelRatio = Math.round(window.devicePixelRatio * 10) / 10;
window.ga('set', 'dimension3', devicePixelRatio);
window.gtag('set', 'user_properties', {
devicePixelRatio,
});
@@ -135,14 +120,12 @@ function GoogleAnalytics() {
const colorScheme = theme.palette.mode;

React.useEffect(() => {
window.ga('set', 'dimension4', colorSchemeOS);
window.gtag('set', 'user_properties', {
colorSchemeOS,
});
}, [colorSchemeOS]);

React.useEffect(() => {
window.ga('set', 'dimension5', colorScheme);
window.gtag('set', 'user_properties', {
colorScheme,
});
1 change: 1 addition & 0 deletions packages/mui-material/src/ImageListItem/ImageListItem.js
Original file line number Diff line number Diff line change
@@ -101,6 +101,7 @@ const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) {
gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
marginBottom: variant === 'masonry' ? gap : undefined,
breakInside: variant === 'masonry' ? 'avoid' : undefined,
...style,
}}
ownerState={ownerState}
32 changes: 31 additions & 1 deletion packages/mui-system/src/Box/Box.test.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from 'test/utils';
import { Box } from '@mui/system';
import { Box, createTheme, ThemeProvider } from '@mui/system';

describe('<Box />', () => {
const { render } = createRenderer();
@@ -279,4 +279,34 @@ describe('<Box />', () => {

expect(getByTestId('regular-box')).to.have.class('MuiBox-root');
});

describe('prop: maxWidth', () => {
it('should resolve breakpoints with custom units', function test() {
const isJSDOM = /jsdom/.test(window.navigator.userAgent);

if (isJSDOM) {
this.skip();
}

const theme = createTheme({
breakpoints: {
unit: 'rem',
values: {
xs: 10,
},
},
});

const { container } = render(
<ThemeProvider theme={theme}>
<Box maxWidth="xs" />,
</ThemeProvider>,
);

expect(container.firstChild).toHaveComputedStyle({
// 10rem x 16px = 160px
maxWidth: '160px',
});
});
});
});
Loading

0 comments on commit 3205fac

Please sign in to comment.