[material-ui] Export Pigment CSS layout components #42693

siriwatknp · 2024-06-20T07:59:08Z

~~Waiting for mui/pigment-css#160 to be released.~~

Summary

import PigmentStack from '@mui/material/PigmentStack';
import PigmentHidden from '@mui/material/PigmentHidden';
import PigmentContainer from '@mui/material/PigmentContainer';
import PigmentGrid from '@mui/material/PigmentGrid';

RSC components

PigmentContainer
PigmentGrid
PigmentStack

PigmentGrid

The class is pretty long and should be refined from Pigment CSS (not a blocker of this PR).

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2024-06-20T08:02:02Z

Netlify deploy preview

PigmentHidden: parsed: +Infinity% , gzip: +Infinity%
PigmentGrid: parsed: +Infinity% , gzip: +Infinity%
PigmentContainer: parsed: +Infinity% , gzip: +Infinity%
PigmentStack: parsed: +Infinity% , gzip: +Infinity%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against e66f40d

brijeshb42 · 2024-06-20T08:06:52Z

packages/mui-material/src/PigmentHidden/PigmentHidden.tsx

+   * If `true`, component is hidden on screens below (but not including) this size.
+   * @default false
+   */
+  lgDown?: boolean;


While we are working on finalizing the Grid API, I think we should also update this component to follow a similar API.

Hidden is a bit complicated as it contains HiddenJs implementation. I don't think changing the API would be simple and what's should be the name of the prop.

How do we handle this?

<Hidden smDown lgUp>

The major issue I see currently is the props (TS or prop-types). It's hardcoded to the default breakpoints. But if someone changes that, they won't get correct autocompletion. This is also an issue for core Material UI packages.

The major issue I see currently is the props (TS or prop-types)

You mean just for this component or the layout components?

For all the layout components that we have that have similar props that depend on the theme.

mnajdova · 2024-06-20T09:17:21Z

Are we final on the names? 😅

siriwatknp · 2024-06-20T10:01:41Z

Are we final on the names? 😅

99.99% unless someone has a better name 😅.

They have to have Pigment either a prefix or suffix because it's for Pigment CSS specifically.
Using RSC would not work because Hidden is not RSC and they are not built for RSC but for Pigment CSS (RSC compatibility is just a by-product).

…t/layout-components

brijeshb42 · 2024-06-24T15:12:28Z

@siriwatknp Can you try using these csb packages - https://ci.codesandbox.io/status/mui/pigment-css/pr/160/builds/516964

siriwatknp · 2024-06-25T01:54:02Z

@siriwatknp Can you try using these csb packages - https://ci.codesandbox.io/status/mui/pigment-css/pr/160/builds/516964

Thanks, it's working!

…t/layout-components

This reverts commit 646a3c3.

siriwatknp · 2024-06-25T07:05:29Z

packages/api-docs-builder/utils/createTypeScriptProject.ts

+   *
+   * Use an array to target more than one entrypoint.
+   *
+   * @example 'src/index.d.ts'
+   * @example ['src/index.d.ts', 'src/PigmentStack/PigmentStack.tsx']
+   *          `PigmentStack` cannot be included in the `index.d.ts` file because it is using Pigment CSS specific API.
   */
-  entryPointPath?: string;
+  entryPointPath?: string | string[];


@mui/docs-infra there is a change related to docs-infra. I appreciate another eye to make sure I don't break other projects.

I don't see a way it could break other projects.

I tried it on mui-x and the proptypes & docs:api script do not modify anything 👍

Thanks @alexfauquette

siriwatknp · 2024-06-25T07:08:59Z

packages/mui-material/src/PigmentContainer/PigmentContainer.tsx

+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+// @ts-ignore


Removing this @ts-ignore is far beyond this PR, it's related to the tsconfig setup with proper module resolution which I am not sure how to solve it.

apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx

DiegoAndai · 2024-06-25T14:26:13Z

packages/rsc-builder/buildRsc.ts

+      'packages/mui-material/src/PigmentContainer/PigmentContainer.tsx', // RSC compatible
+      'packages/mui-material/src/PigmentGrid/PigmentGrid.tsx', // RSC compatible
+      'packages/mui-material/src/PigmentStack/PigmentStack.tsx', // RSC compatible


I was wrong. The layout components still need useDefaultProps so use client is required for them.

Based on the discussion, I remove the useDefaultProps for now.

DiegoAndai · 2024-06-25T14:27:09Z

packages/mui-material/src/PigmentGrid/PigmentGrid.tsx

+
+export type GridSize = 'auto' | 'grow' | number;
+
+export interface GridBaseProps {


Maybe not for this PR, but should we consider sharing types between the components and their pigment version? I think this would help us keep the interchangeable

…t/layout-components

This reverts commit ac919fa.

DiegoAndai

Besides my comment here, which I think we can deal with later, this looks good to me 🚀

siriwatknp added 3 commits June 20, 2024 13:55

export pigment layout components

3a23222

reexport layout components

2f14862

poc with latest pigment

24ed402

siriwatknp added package: material-ui Specific to @mui/material v6.x package: pigment-css Specific to @pigment-css/* on hold There is a blocker, we need to wait labels Jun 20, 2024

brijeshb42 reviewed Jun 20, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 23, 2024

siriwatknp added 7 commits June 24, 2024 09:41

restore

088e088

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

8ab5f8a

…t/layout-components

[docs-infra] support mulitple entrypoints

c8cb8fb

run docs:api

2bf53cf

update pigment to latest

79b5dd2

add PigmentGrid

9a5882f

add layout component demo pages

fe622f5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 24, 2024

ignore PigmentContainer, PigmentGrid, and PigmentStack

865e815

brijeshb42 mentioned this pull request Jun 24, 2024

[nextjs] Make library path check OS agnostic mui/pigment-css#160

Merged

1 task

test windows fix

646a3c3

siriwatknp added 4 commits June 25, 2024 09:25

add classes

9bc2fad

add specs

050ac80

run docs:api

7ef300d

add 'grow' to grid size

9e75c6a

brijeshb42 closed this in mui/pigment-css#160 Jun 25, 2024

siriwatknp added 3 commits June 25, 2024 13:36

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

f8d6b16

…t/layout-components

Revert "test windows fix"

3d4a775

This reverts commit 646a3c3.

update to latest pigment css

2053947

siriwatknp reopened this Jun 25, 2024

siriwatknp marked this pull request as ready for review June 25, 2024 07:03

siriwatknp commented Jun 25, 2024

View reviewed changes

siriwatknp requested review from mnajdova and DiegoAndai June 25, 2024 08:20

link PigmentGrid API to Grid2

8b7be98

siriwatknp removed the on hold There is a blocker, we need to wait label Jun 25, 2024

DiegoAndai reviewed Jun 25, 2024

View reviewed changes

siriwatknp added 7 commits June 26, 2024 07:57

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

661b5d4

…t/layout-components

add useDefaultProps

ac919fa

remove use client from demo pages

823aae0

fix

5c828bc

Revert "add useDefaultProps"

362e233

This reverts commit ac919fa.

ignore Pigment layout components

6cd978a

remove useDefaultProps from PigmentGrid

146f943

DiegoAndai approved these changes Jun 26, 2024

View reviewed changes

run proptypes and docs:api

e66f40d

siriwatknp enabled auto-merge (squash) June 27, 2024 03:18

siriwatknp disabled auto-merge June 27, 2024 05:02

siriwatknp merged commit 20565ce into mui:next Jun 27, 2024
21 checks passed

DiegoAndai mentioned this pull request Jun 28, 2024

[material-ui][Grid] Update Grid props to match PigmentGrid #42742

Merged

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[material-ui] Export Pigment CSS layout components (mui#42693)

aeb5401

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Export Pigment CSS layout components #42693

[material-ui] Export Pigment CSS layout components #42693

siriwatknp commented Jun 20, 2024 •

edited

Loading

mui-bot commented Jun 20, 2024 •

edited

Loading

brijeshb42 Jun 20, 2024

siriwatknp Jun 20, 2024

brijeshb42 Jun 20, 2024

siriwatknp Jun 24, 2024

brijeshb42 Jun 24, 2024

mnajdova commented Jun 20, 2024

siriwatknp commented Jun 20, 2024 •

edited

Loading

brijeshb42 commented Jun 24, 2024

siriwatknp commented Jun 25, 2024

siriwatknp Jun 25, 2024 •

edited

Loading

alexfauquette Jun 25, 2024

siriwatknp Jun 26, 2024

siriwatknp Jun 25, 2024 •

edited

Loading

DiegoAndai Jun 25, 2024

siriwatknp Jun 26, 2024

siriwatknp Jun 27, 2024

DiegoAndai Jun 25, 2024

DiegoAndai left a comment


		export type GridSize = 'auto' \| 'grow' \| number;

		export interface GridBaseProps {

[material-ui] Export Pigment CSS layout components #42693

[material-ui] Export Pigment CSS layout components #42693

Conversation

siriwatknp commented Jun 20, 2024 • edited Loading

Summary

RSC components

mui-bot commented Jun 20, 2024 • edited Loading

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mnajdova commented Jun 20, 2024

siriwatknp commented Jun 20, 2024 • edited Loading

brijeshb42 commented Jun 24, 2024

siriwatknp commented Jun 25, 2024

siriwatknp Jun 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp Jun 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

siriwatknp commented Jun 20, 2024 •

edited

Loading

mui-bot commented Jun 20, 2024 •

edited

Loading

siriwatknp commented Jun 20, 2024 •

edited

Loading

siriwatknp Jun 25, 2024 •

edited

Loading

siriwatknp Jun 25, 2024 •

edited

Loading