'Correct' ListItem (makes it worse)

mui · Oct 10, 2019 · 461baf8 · 461baf8
1 parent 8db91c6
commit 461baf8
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 51 deletions.
diff --git a/framer/Material-UI.framerfx/code/IconButton.tsx b/framer/Material-UI.framerfx/code/IconButton.tsx
@@ -36,10 +36,10 @@ export const IconButton: React.SFC<Props> = (props: Props) => {
   const { badgeColor, badgeContent, height, icon, iconTheme, width, ...other } = props;
   const IconBadge =
     badgeContent === '' ? (
-      <Icon icon={icon} />
+      <Icon icon={icon} theme={iconTheme} />
     ) : (
       <MuiBadge badgeContent={badgeContent} color={badgeColor}>
-        <Icon icon={icon} />
+        <Icon icon={icon} theme={iconTheme} />
       </MuiBadge>
     );
 

diff --git a/framer/Material-UI.framerfx/code/ListItem.tsx b/framer/Material-UI.framerfx/code/ListItem.tsx
@@ -105,7 +105,7 @@ export const ListItem: React.SFC<Props> = (props: Props) => {
     case 'checkbox':
       primary = (
         <MuiListItemIcon>
-          <MuiCheckbox />
+          <MuiCheckbox edge="start" />
         </MuiListItemIcon>
       );
       break;
@@ -120,21 +120,13 @@ export const ListItem: React.SFC<Props> = (props: Props) => {
       );
       break;
     case 'iconButton':
-      secondary = (
-        <MuiListItemIcon>
-          <IconButton icon={secondaryIcon} />
-        </MuiListItemIcon>
-      );
+      secondary = <IconButton icon={secondaryIcon} edge="end" />;
       break;
     case 'checkbox':
-      secondary = (
-        <MuiListItemIcon>
-          <MuiCheckbox />
-        </MuiListItemIcon>
-      );
+      secondary = <MuiCheckbox edge="end" />;
       break;
     case 'switch':
-      secondary = <MuiSwitch />;
+      secondary = <MuiSwitch edge="end" />;
       break;
   }
 
@@ -146,10 +138,8 @@ export const ListItem: React.SFC<Props> = (props: Props) => {
         primary={label}
         secondary={secondaryLabel ? secondaryLabel : undefined}
       />
-      {/* This causes the text to have a bullet. No idea why! */}
-      {/* <MuiListItemSecondaryAction> */}
-      {secondary}
-      {/* </MuiListItemSecondaryAction>  */}
+      {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */}
+      <MuiListItemSecondaryAction>{secondary}</MuiListItemSecondaryAction>
     </MuiListItem>
   );
 };

diff --git a/framer/Material-UI.framerfx/design/document.json b/framer/Material-UI.framerfx/design/document.json
@@ -3269,7 +3269,6 @@
               "badgeColor" : "primary",
               "badgeContent" : "9",
               "icon" : "",
-              "invisible" : false,
               "max" : 99,
               "showZero" : false,
               "theme" : "Filled",

diff --git a/framer/scripts/templates/icon_button.txt b/framer/scripts/templates/icon_button.txt
@@ -21,10 +21,10 @@ export const «componentName»: React.SFC<Props> = (props: Props) => {
   const { badgeColor, badgeContent, height, icon, iconTheme, width, ...other } = props;
   const IconBadge =
   badgeContent === '' ? (
-    <Icon icon={icon} />
+    <Icon icon={icon} theme={iconTheme} />
   ) : (
     <MuiBadge badgeContent={badgeContent} color={badgeColor}>
-      <Icon icon={icon} />
+      <Icon icon={icon} theme={iconTheme} />
     </MuiBadge>
   );
 

diff --git a/framer/scripts/templates/list_item.txt b/framer/scripts/templates/list_item.txt
@@ -35,54 +35,64 @@ const defaultProps: Props =  {
 };
 
 export const «componentName»: React.SFC<Props> = (props: Props) => {
-  const { 
-    height, 
-    imageFile, 
-    imageUrl, 
-    inset, 
-    label, 
-    primaryAction, 
-    primaryIcon, 
-    secondaryAction, 
+  const {
+    height,
+    imageFile,
+    imageUrl,
+    inset,
+    label,
+    primaryAction,
+    primaryIcon,
+    secondaryAction,
     secondaryIcon,
-    secondaryLabel, 
-    width,  
-    ...other 
+    secondaryLabel,
+    width,
+    ...other
   } = props;
 
   let primary = null;
   let secondary = null;
 
   switch (primaryAction) {
     case 'icon':
-      primary = (<MuiListItemIcon>
-        <Icon icon={primaryIcon} />
-      </MuiListItemIcon>);
+      primary = (
+        <MuiListItemIcon>
+          <Icon icon={primaryIcon} />
+        </MuiListItemIcon>
+      );
       break;
     case 'avatar':
-      primary = (<MuiListItemAvatar><Avatar icon={primaryIcon} imageFile={imageFile} imageUrl={imageUrl}/></MuiListItemAvatar>);
+      primary = (
+        <MuiListItemAvatar>
+          <Avatar icon={primaryIcon} imageFile={imageFile} imageUrl={imageUrl} />
+        </MuiListItemAvatar>
+      );
       break;
     case 'checkbox':
-      primary = (<MuiListItemIcon><MuiCheckbox /></MuiListItemIcon>);
+      primary = (
+        <MuiListItemIcon>
+          <MuiCheckbox edge="start" />
+        </MuiListItemIcon>
+      );
       break;
   }
 
   switch (secondaryAction) {
     case 'icon':
-      secondary = (<MuiListItemIcon>
-        <Icon icon={secondaryIcon} />
-      </MuiListItemIcon>);
+      secondary = (
+        <MuiListItemIcon>
+          <Icon icon={secondaryIcon} />
+        </MuiListItemIcon>
+      );
       break;
     case 'iconButton':
-      secondary = (<MuiListItemIcon>
-        <IconButton icon={secondaryIcon} />
-      </MuiListItemIcon>);
+      secondary = <IconButton icon={secondaryIcon} edge="end" />;
       break;
     case 'checkbox':
-      secondary = (<MuiListItemIcon><MuiCheckbox /></MuiListItemIcon>);
+      secondary = <MuiCheckbox edge="end" />;
       break;
     case 'switch':
-      secondary = (<MuiSwitch />);
+      secondary = <MuiSwitch edge="end" />;
       break;
   }
 
@@ -94,13 +104,11 @@ export const «componentName»: React.SFC<Props> = (props: Props) => {
         primary={label}
         secondary={secondaryLabel ? secondaryLabel : undefined}
       />
-      {/* This causes the text to have a bullet. No idea why! */}
-      {/* <MuiListItemSecondaryAction> */}
-        {secondary}
-      {/* </MuiListItemSecondaryAction>  */}
+      {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */}
+      <MuiListItemSecondaryAction>{secondary}</MuiListItemSecondaryAction>
     </MuiListItem>
   );
-}
+};
 
 «componentName».defaultProps = defaultProps;