feat(menu-list): m3 styles

konstaui · Aug 12, 2022 · bf946b0 · bf946b0
1 parent e386600
commit bf946b0
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 29 deletions.
diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx
@@ -90,10 +90,16 @@ const ListItem = forwardRef((props, ref) => {
 
   const isMenuListItemActive = menuListItem && menuListItemActive;
 
-  const textColorProp = `${isMenuListItemActive ? 'menuListItemText' : 'text'}${
-    theme === 'ios' ? 'Ios' : 'Material'
-  }`;
-  const textColor = colors[textColorProp];
+  const textColor =
+    colors[
+      `${
+        isMenuListItemActive
+          ? 'menuListItemActiveText'
+          : menuListItem
+          ? 'menuListItemText'
+          : 'text'
+      }${theme === 'ios' ? 'Ios' : 'Material'}`
+    ];
 
   const isLink = !!href || href === '' || menuListItem || link;
   const isLabel = !!label;

diff --git a/src/shared/classes/ListItemClasses.js b/src/shared/classes/ListItemClasses.js
@@ -32,33 +32,45 @@ export const ListItemClasses = (
     base: menuListItem ? `${textColor} py-1` : '',
     itemContent: {
       common: cls(
-        menuListItem ? 'pl-2 ml-2-safe mr-2-safe rounded-lg' : 'pl-4-safe',
+        !menuListItem && 'pl-4-safe',
         `flex items-center ${contentClassName || contentClass}`
       ),
-      ios: colors.primaryTextIos,
-      material: colors.primaryTextMaterial,
+      ios: cls(
+        !menuListItem && colors.primaryTextIos,
+        menuListItem && 'rounded-lg ml-2-safe mr-2-safe pl-2'
+      ),
+      material: cls(
+        !menuListItem && colors.primaryTextMaterial,
+        menuListItem && 'rounded-full min-h-[3.5rem] ml-4-safe mr-4-safe pl-4'
+      ),
       link: cls(
         'duration-300 active:duration-0 cursor-pointer select-none',
         hairlines && theme === 'ios' && 'active:hairline-transparent',
         needsTouchRipple &&
           cls(
-            `relative overflow-hidden touch-ripple-black`,
-            dark('dark:touch-ripple-white dark:z-10')
+            `relative overflow-hidden touch-ripple-black z-10`,
+            dark('dark:touch-ripple-white')
           ),
         isMenuListItemActive
-          ? cls(colors.menuListItemActiveBg, 'bg-opacity-15')
-          : theme === 'ios' &&
-              cls(
-                `active:bg-black active:bg-opacity-10`,
-                dark('dark:active:bg-white dark:active:bg-opacity-10')
-              )
+          ? cls(
+              theme === 'ios'
+                ? colors.menuListItemActiveBgIos
+                : colors.menuListItemActiveBgMaterial
+            )
+          : menuListItem
+          ? cls(
+              theme === 'ios'
+                ? colors.menuListItemBgIos
+                : colors.menuListItemBgMaterial
+            )
+          : cls(theme === 'ios' ? colors.activeBgIos : colors.activeBgMaterial)
       ),
     },
 
     media: {
-      common: `mr-4 shrink-0 flex ${mediaClassName || mediaClass}`,
-      ios: 'py-2',
-      material: 'py-3',
+      common: `shrink-0 flex ${mediaClassName || mediaClass}`,
+      ios: 'py-2 mr-4',
+      material: cls('py-3', menuListItem ? 'mr-3' : 'mr-4'),
     },
     inner: {
       common: cls(

diff --git a/src/shared/colors/ListItemColors.js b/src/shared/colors/ListItemColors.js
@@ -7,7 +7,6 @@ export const ListItemColors = (colorsProp = {}, dark) => {
       `text-md-light-on-surface`,
       dark('dark:text-md-dark-on-surface')
     ),
-
     secondaryTextIos: cls(
       'text-black text-opacity-55',
       dark('dark:text-white dark:text-opacity-55')
@@ -16,7 +15,11 @@ export const ListItemColors = (colorsProp = {}, dark) => {
       'text-md-light-on-surface-variant',
       dark('dark:text-md-dark-on-surface-variant')
     ),
-
+    activeBgIos: cls(
+      `active:bg-black active:bg-opacity-10`,
+      dark('dark:active:bg-white dark:active:bg-opacity-10')
+    ),
+    activeBgMaterial: '',
     dividerBgIos: cls(
       'bg-list-divider-light',
       dark('dark:bg-list-divider-dark')
@@ -25,8 +28,32 @@ export const ListItemColors = (colorsProp = {}, dark) => {
       'bg-md-light-surface-2',
       dark('dark:bg-md-dark-surface-2')
     ),
-    menuListItemText: cls(`text-primary`, dark('dark:text-white')),
-    menuListItemActiveBg: cls(`bg-primary`, dark('dark:bg-primary')),
+    menuListItemTextIos: cls(`text-black`, dark('dark:text-white')),
+    menuListItemTextMaterial: cls(
+      `text-md-light-on-surface-variant`,
+      dark('dark:text-md-dark-on-surface-variant')
+    ),
+    menuListItemBgIos: cls(
+      `active:bg-black active:bg-opacity-10`,
+      dark('dark:active:bg-white dark:active:bg-opacity-10')
+    ),
+    menuListItemBgMaterial: cls(
+      'bg-md-light-surface-1',
+      dark('dark:bg-md-dark-surface-1')
+    ),
+    menuListItemActiveTextIos: cls(`text-primary`, dark('dark:text-white')),
+    menuListItemActiveTextMaterial: cls(
+      `text-md-light-on-secondary-container`,
+      dark('dark:text-md-dark-on-secondary-container')
+    ),
+    menuListItemActiveBgIos: cls(
+      `bg-primary bg-opacity-15`,
+      dark('dark:bg-primary')
+    ),
+    menuListItemActiveBgMaterial: cls(
+      `bg-md-light-secondary-container`,
+      dark('dark:bg-md-dark-secondary-container')
+    ),
     ...colorsProp,
   };
 };
diff --git a/src/svelte/components/ListItem.svelte b/src/svelte/components/ListItem.svelte
@@ -74,7 +74,16 @@
 
   $: isMenuListItemActive = menuListItem && menuListItemActive;
 
-  $: textColor = isMenuListItemActive ? colors.menuListItemText : colors.text;
+  $: textColor =
+    colors[
+      `${
+        isMenuListItemActive
+          ? 'menuListItemActiveText'
+          : menuListItem
+          ? 'menuListItemText'
+          : 'text'
+      }${theme === 'ios' ? 'Ios' : 'Material'}`
+    ];
 
   $: isLink = !!href || href === '' || menuListItem || link;
   $: isLabel = !!label;

diff --git a/src/vue/components/ListItem.vue b/src/vue/components/ListItem.vue
@@ -127,6 +127,7 @@
     },
     setup(props, ctx) {
       const rippleElRef = ref(null);
+      const theme = useTheme(props);
 
       const colors = computed(() =>
         ListItemColors(props.colors || {}, useDarkClasses)
@@ -136,10 +137,17 @@
         () => props.menuListItem && props.menuListItemActive
       );
 
-      const textColor = computed(() =>
-        isMenuListItemActive.value
-          ? colors.value.menuListItemText
-          : colors.value.text
+      const textColor = computed(
+        () =>
+          colors.value[
+            `${
+              isMenuListItemActive.value
+                ? 'menuListItemActiveText'
+                : props.menuListItem
+                ? 'menuListItemText'
+                : 'text'
+            }${theme.value === 'ios' ? 'Ios' : 'Material'}`
+          ]
       );
 
       const isLink = computed(
@@ -148,8 +156,6 @@
       );
       const isLabel = computed(() => !!props.label);
 
-      const theme = useTheme(props);
-
       const needsTouchRipple = computed(
         () =>
           theme.value === 'material' &&