[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)

oliviertassinari · 2024-06-08T14:19:45Z

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

+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };


Can't we do this?

Suggested change

theme.generateSpacing = function generateSpacing() {

return createSpacing(input.spacing, createUnarySpacing(this));

};

Why do we need generateSpacing in the first place, and even more in the public API? It seems that using theme.spacing directly is simple enough.

oliviertassinari · 2024-06-08T15:33:25Z

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

  theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.spacing = theme.generateSpacing();


Suggested change

theme.spacing = theme.generateSpacing();

theme.spacing = createSpacing(input.spacing, createUnarySpacing(theme));

oliviertassinari · 2024-06-08T18:29:22Z

There is a regression visible in the video description of these changes:

I opened to try to fix it #42574.

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

[system] Stabilizing CSS theme variable APIs #40225

Closed

5 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)

ZeeshanTamboli mentioned this pull request May 22, 2024

[system] Allow theme.spacing() to return a number #29086

Open

1 task

oliviertassinari reviewed Jun 8, 2024

View reviewed changes

This was referenced Jun 8, 2024

[material-ui] Stabilize CssVarsProvider and extendTheme #42246

Merged

[Grid] Fix support for CSS variables #42574

Merged

DiegoAndai mentioned this pull request Dec 5, 2024

[Grid] Fix Grid v1 spacing when using CSS variables #44663

Merged

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

Loading

mui-bot commented Dec 18, 2023 •

edited

Loading

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

oliviertassinari Jun 8, 2024

oliviertassinari Jun 8, 2024

oliviertassinari commented Jun 8, 2024

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

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

	theme.generateSpacing = function generateSpacing() {
	return createSpacing(input.spacing, createUnarySpacing(this));
	};

		theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
		theme.spacing = theme.generateSpacing();

	theme.spacing = theme.generateSpacing();
	theme.spacing = createSpacing(input.spacing, createUnarySpacing(theme));

[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 Loading

Changes

mui-bot commented Dec 18, 2023 • edited Loading

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

oliviertassinari Jun 8, 2024

Choose a reason for hiding this comment

oliviertassinari Jun 8, 2024

Choose a reason for hiding this comment

oliviertassinari commented Jun 8, 2024

[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

Loading

mui-bot commented Dec 18, 2023 •

edited

Loading