changed API

mui · Dec 12, 2020 · 3845a64 · 3845a64
1 parent 7869f47
commit 3845a64
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 55 deletions.
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -56,7 +56,7 @@ const overridesResolver = (props, styles) => {
 const BadgeRoot = styled(
   'span',
   {},
-  { displayName: 'BadgeRoot', className: 'MuiBadge-root', muiName: 'MuiBadge', overridesResolver },
+  { name: 'Badge', slot: 'Root', overridesResolver },
 )({
   position: 'relative',
   display: 'inline-flex',
@@ -68,7 +68,7 @@ const BadgeRoot = styled(
 const BadgeBadge = styled(
   'span',
   {},
-  { displayName: 'BadgeBadge', className: 'MuiBadge-badge', overridesResolver },
+  { name: 'Badge', slot: 'Badge', overridesResolver },
 )((props) => ({
   display: 'flex',
   flexDirection: 'row',

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
@@ -69,9 +69,8 @@ export const SliderRoot = experimentalStyled(
   'span',
   {},
   {
-    displayName: 'SliderRoot',
-    muiName: 'MuiSlider',
-    className: 'MuiSlider-root',
+    name: 'Slider',
+    slot: 'Root',
     overridesResolver,
   },
 )((props) => ({
@@ -136,7 +135,7 @@ export const SliderRoot = experimentalStyled(
 export const SliderRail = experimentalStyled(
   'span',
   {},
-  { displayName: 'SliderRail', className: 'MuiSlider-rail' },
+  { name: 'Slider', slot: 'Rail' },
 )((props) => ({
   display: 'block',
   position: 'absolute',
@@ -157,7 +156,7 @@ export const SliderRail = experimentalStyled(
 export const SliderTrack = experimentalStyled(
   'span',
   {},
-  { displayName: 'SliderTrack', className: 'MuiSlider-track' },
+  { name: 'Slider', slot: 'Track' },
 )((props) => ({
   display: 'block',
   position: 'absolute',
@@ -182,7 +181,7 @@ export const SliderTrack = experimentalStyled(
 export const SliderThumb = experimentalStyled(
   'span',
   {},
-  { displayName: 'SliderThumb', className: 'MuiSlider-thumb' },
+  { name: 'Slider', slot: 'Thumb' },
 )((props) => ({
   position: 'absolute',
   width: 12,
@@ -248,7 +247,7 @@ export const SliderThumb = experimentalStyled(
 export const SliderValueLabel = experimentalStyled(
   SliderValueLabelUnstyled,
   {},
-  { displayName: 'SliderValueLabel', className: 'MuiSlider-valueLabel' },
+  { name: 'Slider', slot: 'ValueLabel' },
 )((props) => ({
   // IE 11 centering bug, to remove from the customization demos once no longer supported
   left: 'calc(-50% - 4px)',
@@ -271,7 +270,7 @@ export const SliderValueLabel = experimentalStyled(
 export const SliderMark = experimentalStyled(
   'span',
   {},
-  { displayName: 'SliderMark', className: 'MuiSlider-mark' },
+  { name: 'Slider', slot: 'Mark' },
 )((props) => ({
   position: 'absolute',
   width: 2,
@@ -287,7 +286,7 @@ export const SliderMark = experimentalStyled(
 export const SliderMarkLabel = experimentalStyled(
   'span',
   {},
-  { displayName: 'SliderMarkLabel', className: 'MuiSlider-markLabel' },
+  { name: 'Slider', slot: 'MarkLabel' },
 )((props) => ({
   ...props.theme.typography.body2,
   color: props.theme.palette.text.secondary,

diff --git a/packages/material-ui/src/styles/experimentalStyled.d.ts b/packages/material-ui/src/styles/experimentalStyled.d.ts
@@ -180,9 +180,8 @@ export interface StyledOptions {
 }
 
 interface MuiStyledOptions<Theme extends object = any> {
-  displayName?: string;
-  className?: string;
-  muiName?: string;
+  name: string;
+  slot: string;
   overridesResolver?: (props: any, styles: string | object, name: string) => string | object;
   skipSx?: boolean;
 }

diff --git a/packages/material-ui/src/styles/experimentalStyled.js b/packages/material-ui/src/styles/experimentalStyled.js
@@ -62,14 +62,26 @@ const variantsResolver = (props, styles, theme, name) => {
 const shouldForwardProp = (prop) =>
   prop !== 'styleProps' && prop !== 'theme' && prop !== 'isRtl' && prop !== 'sx' && prop !== 'as';
 
+const lowercaseFirstLetter = (string) => {
+  return string.charAt(0).toLowerCase() + string.slice(1);
+};
+
 const experimentalStyled = (tag, options, muiOptions = {}) => {
-  const displayName = muiOptions.displayName;
-  const name = muiOptions.muiName;
-  const className = muiOptions.className;
+  const componentName = muiOptions.name;
+  const componentSlot = muiOptions.slot;
   const skipSx = muiOptions.skipSx || false;
+
+  let displayName, name, className;
+
+  if (componentName && componentSlot) {
+    displayName = `${componentName}${componentSlot}`;
+    name = componentSlot === 'Root' ? `Mui${componentName}` : null;
+    className = `Mui${componentName}-${lowercaseFirstLetter(componentSlot)}`;
+  }
+
   const defaultStyledResolver = styled(tag, {
     shouldForwardProp,
-    label: className || name || displayName,
+    label: className || componentName || '',
     ...options,
   });
   const muiStyledResolver = (styleArg, ...expressions) => {
@@ -123,7 +135,10 @@ const experimentalStyled = (tag, options, muiOptions = {}) => {
     }
 
     const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
-    Component.displayName = displayName || name;
+
+    if (displayName || name) {
+      Component.displayName = displayName || name;
+    }
 
     return Component;
   };

diff --git a/packages/material-ui/src/styles/experimentalStyled.test.js b/packages/material-ui/src/styles/experimentalStyled.test.js
@@ -176,7 +176,7 @@ describe('experimentalStyled', () => {
       Test = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { muiName: 'MuiTest', overridesResolver: testOverridesResolver },
+        { name: 'Test', slot: 'Root', overridesResolver: testOverridesResolver },
       )`
         width: 200px;
         height: 300px;
@@ -185,7 +185,7 @@ describe('experimentalStyled', () => {
       TestObj = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { muiName: 'MuiTest', overridesResolver: testOverridesResolver },
+        { name: 'Test', slot: 'Root', overridesResolver: testOverridesResolver },
       )({
         width: '200px',
         height: '300px',
@@ -363,7 +363,7 @@ describe('experimentalStyled', () => {
       const TestNoSx = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { muiName: 'MuiTest', overridesResolver: testOverridesResolver, skipSx: true },
+        { name: 'Test', slot: 'Root', overridesResolver: testOverridesResolver, skipSx: true },
       )(({ sx = {} }) => ({
         ...(sx.mt && {
           marginTop: `${sx.mt * -1}px`,
@@ -384,7 +384,7 @@ describe('experimentalStyled', () => {
       const TestWithSx = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { muiName: 'MuiTest', overridesResolver: testOverridesResolver },
+        { name: 'Test', slot: 'Root', overridesResolver: testOverridesResolver },
       )(({ sx = {} }) => ({
         ...(sx.mt && {
           marginTop: `${sx.m * -1}px`,
@@ -407,75 +407,56 @@ describe('experimentalStyled', () => {
       const Component = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { displayName: 'Component', muiName: 'MuiComponent' },
+        { name: 'Component' },
       )`
         width: 200px;
         height: 300px;
       `;
 
-      expect(Component.displayName).to.equal("Component");
+      expect(Component.displayName).to.equal('Component');
     });
 
-    it('should set displayName as muiName if displayName is not specified', () => {
+    it('should set displayName as name + slot if both are specified', () => {
       const Component = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { muiName: 'MuiComponent' },
+        { name: 'Component', slot: 'Root' },
       )`
         width: 200px;
         height: 300px;
       `;
 
-      expect(Component.displayName).to.equal("MuiComponent");
+      expect(Component.displayName).to.equal('ComponentRoot');
     });
 
-    it('should use className when generating the classes', () => {
+    it('should set the className when generating the classes', () => {
       const Component = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { displayName: 'Component', muiName: 'MuiComponent', className: 'MuiComponent-root' },
+        { name: 'Component', slot: 'Slot' },
       )`
         width: 200px;
         height: 300px;
       `;
 
-      const { container } = render(
-        <Component>Test</Component>,
-      );
-
-      expect(container.firstChild.getAttribute('class').includes('MuiComponent-root')).to.equal(true);
-    });
-
-    it('should use muiName as className when generating the classes if className is not defined', () => {
-      const Component = styled(
-        'div',
-        { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { displayName: 'Component', muiName: 'MuiComponent' },
-      )`
-        width: 200px;
-        height: 300px;
-      `;
+      const { container } = render(<Component>Test</Component>);
 
-      const { container } = render(
-        <Component>Test</Component>,
+      expect(container.firstChild.getAttribute('class').includes('MuiComponent-slot')).to.equal(
+        true,
       );
-
-      expect(container.firstChild.getAttribute('class').includes('MuiComponent')).to.equal(true);
     });
 
-    it('should use displayName as className when generating the classes if className and muiName are not defined', () => {
+    it('should use name as className when slot is not specified', () => {
       const Component = styled(
         'div',
         { shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx' },
-        { displayName: 'Component' },
+        { name: 'Component' },
       )`
         width: 200px;
         height: 300px;
       `;
 
-      const { container } = render(
-        <Component>Test</Component>,
-      );
+      const { container } = render(<Component>Test</Component>);
 
       expect(container.firstChild.getAttribute('class').includes('Component')).to.equal(true);
     });