[system] Add `spacing` theme token to be used in `theme.spacing()` #40224

siriwatknp · 2023-12-18T02:57:57Z

// before
theme.spacing(1) // 8px

// after
theme.spacing(1) // calc(1 * var(--mui-spacing))

Changes

When using extendTheme({ spacing: string | number }), a new token (--mui-spacing) is created for use with CSS calc function.

Screen.Recording.2567-03-13.at.15.52.46.mov

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

mui-bot · 2023-12-18T03:01:12Z

Netlify deploy preview

https://deploy-preview-40224--material-ui.netlify.app/

@material-ui/core: parsed: +0.08% , gzip: +0.08%
@mui/joy: parsed: +0.07% , gzip: +0.11%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 077fd51

…e/spacing-var

siriwatknp · 2024-03-13T09:54:14Z

@DiegoAndai This is not a breaking change but do you think it should a part of v5 or v6?

siriwatknp · 2024-03-13T11:40:16Z

Moved to v6.

DiegoAndai · 2024-03-13T18:31:33Z

@DiegoAndai This is not a breaking change but do you think it should a part of v5 or v6?

Being so close to v5 freezing, I agree with you to not merge it to master and wait for v6.

siriwatknp · 2024-03-20T06:38:45Z

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

@@ -27,6 +27,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses';

 function getOffset(val) {
  const parse = parseFloat(val);


val could be a CSS expression.

…spacing-var

siriwatknp · 2024-03-22T07:22:29Z

packages/mui-joy/src/Typography/Typography.test.tsx

+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }


Testing margin values should use Karma

DiegoAndai · 2024-03-22T13:55:36Z

@siriwatknp let me know when this is ready for review 😊

…spacing-var

siriwatknp · 2024-03-25T03:34:04Z

@siriwatknp let me know when this is ready for review 😊

It's ready!

DiegoAndai

This is a great addition! A couple of questions

packages/mui-material/src/styles/experimental_extendTheme.js

packages/mui-material/src/styles/experimental_extendTheme.test.js

siriwatknp · 2024-03-27T02:32:50Z

packages/mui-system/src/spacing/spacing.js

-      if (typeof abs === 'string') {
-        return abs;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return (val) => {


I changed the variable name to reflect what we expect because the val is no longer an absolute of the user input. It's the user input without any modification.

DiegoAndai

LGTM

…ui#40224)

siriwatknp added 2 commits December 17, 2023 23:19

add spacingSize to the theme

f529b10

replace spacing fn

bb8f428

siriwatknp added the customization: theme Centered around the theming features label Dec 18, 2023

siriwatknp mentioned this pull request Dec 18, 2023

[WIP][system] Stabilizing CSS theme variable APIs #40225

Open

6 tasks

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

siriwatknp added 2 commits December 20, 2023 09:03

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

db80fc4

…e/spacing-var

switch to use spacing for vars

0a07aac

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

siriwatknp changed the title ~~[WIP] Add spacingSize theme token to be used in theme.spacing()~~ [WIP] Add spacing theme token to be used in theme.spacing() Dec 20, 2023

danilo-leal changed the title ~~[WIP] Add spacing theme token to be used in theme.spacing()~~ [WIP][system] Add spacing theme token to be used in theme.spacing() Dec 21, 2023

danilo-leal added the package: system Specific to @mui/system label Dec 21, 2023

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

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

74193ab

…e/spacing-var

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

siriwatknp added the new feature New feature or request label Mar 13, 2024

siriwatknp changed the title ~~[WIP][system] Add spacing theme token to be used in theme.spacing()~~ [system] Add spacing theme token to be used in theme.spacing() Mar 13, 2024

siriwatknp added 4 commits March 13, 2024 14:59

add a test

768a882

fix theme.spacing and add tests

3d5d4a1

fix test

6e4337e

fix grid

a65da07

siriwatknp marked this pull request as ready for review March 13, 2024 09:53

siriwatknp requested a review from DiegoAndai March 13, 2024 09:53

siriwatknp closed this Mar 13, 2024

siriwatknp reopened this Mar 20, 2024

siriwatknp commented Mar 20, 2024

View reviewed changes

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

d219ae4

…spacing-var

siriwatknp added 5 commits March 22, 2024 12:05

restore createSpacing

865e9f9

update extendTheme

15113b1

turn on vars check for spacing

90c494f

generateSpacing in CssVarsProvider

4fc3d5a

fix all tests

0f39d07

siriwatknp changed the base branch from master to next March 22, 2024 07:21

siriwatknp commented Mar 22, 2024

View reviewed changes

siriwatknp added 2 commits March 25, 2024 09:18

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

f524263

…spacing-var

fix spacing

077fd51

DiegoAndai reviewed Mar 25, 2024

View reviewed changes

packages/mui-material/src/styles/experimental_extendTheme.js Show resolved Hide resolved

packages/mui-material/src/styles/experimental_extendTheme.test.js Show resolved Hide resolved

siriwatknp commented Mar 27, 2024

View reviewed changes

siriwatknp requested a review from DiegoAndai March 27, 2024 02:34

DiegoAndai approved these changes Mar 27, 2024

View reviewed changes

siriwatknp merged commit 04c8786 into mui:next Mar 27, 2024
19 checks passed

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

[system] Add spacing theme token to be used in theme.spacing() (m…

f538e69

…ui#40224)

tejasparkar pushed a commit to tejasparkar/material-ui that referenced this pull request Mar 30, 2024

[system] Add spacing theme token to be used in theme.spacing() (m…

43fe437

…ui#40224)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[system] Add `spacing` theme token to be used in `theme.spacing()` #40224

[system] Add `spacing` theme token to be used in `theme.spacing()` #40224

siriwatknp commented Dec 18, 2023 •

edited

mui-bot commented Dec 18, 2023 •

edited

siriwatknp commented Mar 13, 2024

siriwatknp commented Mar 13, 2024

DiegoAndai commented Mar 13, 2024

siriwatknp Mar 20, 2024

siriwatknp Mar 22, 2024

DiegoAndai commented Mar 22, 2024

siriwatknp commented Mar 25, 2024

DiegoAndai left a comment

siriwatknp Mar 27, 2024

DiegoAndai left a comment

		@@ -27,6 +27,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses';

		function getOffset(val) {
		const parse = parseFloat(val);

[system] Add spacing theme token to be used in theme.spacing() #40224

[system] Add spacing theme token to be used in theme.spacing() #40224

Conversation

siriwatknp commented Dec 18, 2023 • edited

Changes

mui-bot commented Dec 18, 2023 • edited

Netlify deploy preview

Bundle size report

siriwatknp commented Mar 13, 2024

siriwatknp commented Mar 13, 2024

DiegoAndai commented Mar 13, 2024

siriwatknp Mar 20, 2024

Choose a reason for hiding this comment

siriwatknp Mar 22, 2024

Choose a reason for hiding this comment

DiegoAndai commented Mar 22, 2024

siriwatknp commented Mar 25, 2024

DiegoAndai left a comment

Choose a reason for hiding this comment

siriwatknp Mar 27, 2024

Choose a reason for hiding this comment

DiegoAndai left a comment

Choose a reason for hiding this comment

[system] Add `spacing` theme token to be used in `theme.spacing()` #40224

[system] Add `spacing` theme token to be used in `theme.spacing()` #40224

siriwatknp commented Dec 18, 2023 •

edited

mui-bot commented Dec 18, 2023 •

edited