Skip to content

Commit

Permalink
feat(list): tweak for m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 11, 2022
1 parent cf80085 commit 8c1b1c1
Show file tree
Hide file tree
Showing 9 changed files with 32 additions and 36 deletions.
6 changes: 0 additions & 6 deletions src/config/extend-theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,6 @@ const extendTheme = () => {
'2xs': '0.625rem',
'icon-ios': '28px',
'icon-material': '24px',
'navbar-ios': '17px',
'navbar-material': '22px',
'list-title-ios': '17px',
'list-title-material': '16px',
};

// SCALE
Expand All @@ -75,8 +71,6 @@ const extendTheme = () => {
const colors = {
'ios-light-page': '#efeff4',
'ios-dark-page': '#000',
'page-material-light': '#fff',
'page-material-dark': '#121212',
'block-strong-light': '#fff',
'block-strong-dark': '#1c1c1d',
'list-divider-light': '#f4f4f4',
Expand Down
11 changes: 6 additions & 5 deletions src/react/components/ListItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const ListItem = forwardRef((props, ref) => {
contentChildren,
titleWrapClassName = '',

titleFontSizeIos = 'text-list-title-ios',
titleFontSizeMaterial = 'text-list-title-material',
titleFontSizeIos = 'text-[17px]',
titleFontSizeMaterial = 'text-[16px]',

// Content props
title,
Expand Down Expand Up @@ -90,9 +90,10 @@ const ListItem = forwardRef((props, ref) => {

const isMenuListItemActive = menuListItem && menuListItemActive;

const textColor = isMenuListItemActive
? colors.menuListItemText
: colors.text;
const textColorProp = `${isMenuListItemActive ? 'menuListItemText' : 'text'}${
theme === 'ios' ? 'Ios' : 'Material'
}`;
const textColor = colors[textColorProp];

const isLink = !!href || href === '' || menuListItem || link;
const isLabel = !!label;
Expand Down
5 changes: 3 additions & 2 deletions src/shared/classes/ListClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,20 @@ export const ListClasses = (props, colors, classes) => {
base: {
common: cls(
!nested && margin,
colors.bg,
!inset && !nested && hairlines && 'hairline-t hairline-b',
positionClass('relative', classes),
'z-10'
),
ios: colors.bgIos,
material: colors.bgMaterial,
},
ul: {
common: cls(inset && 'no-safe-areas', 'last-child-hairline-b-none'),
},
inset: {
common: `ml-4-safe mr-4-safe overflow-hidden`,
ios: `rounded-lg`,
material: `rounded`,
material: `rounded-xl`,
},
menuList: {
common: 'py-1',
Expand Down
25 changes: 10 additions & 15 deletions src/shared/classes/ListItemClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const ListItemClasses = (
textColor,
needsTouchRipple,
isMenuListItemActive,
darkClasses,
darkClasses: dark,
autoStrongTitle,
}
) => {
Expand Down Expand Up @@ -39,24 +39,21 @@ export const ListItemClasses = (
'duration-300 active:duration-0 cursor-pointer select-none',
hairlines && theme === 'ios' && 'active:hairline-transparent',
needsTouchRipple &&
cls(
`relative overflow-hidden`,
darkClasses('dark:touch-ripple-white z-10')
),
cls(`relative overflow-hidden`, dark('dark:touch-ripple-white z-10')),
isMenuListItemActive
? cls(colors.menuListItemActiveBg, 'bg-opacity-15')
: theme === 'ios' &&
cls(
`active:bg-black active:bg-opacity-10`,
darkClasses('dark:active:bg-white dark:active:bg-opacity-10')
dark('dark:active:bg-white dark:active:bg-opacity-10')
)
),
},

media: {
common: `mr-4 shrink-0 ${mediaClassName || mediaClass}`,
ios: 'py-2',
material: 'py-3 min-w-10',
material: 'py-3',
},
inner: {
common: cls(
Expand Down Expand Up @@ -93,32 +90,30 @@ export const ListItemClasses = (
after: cls(
textColor,
`text-opacity-55 shrink-0 ml-auto pl-1 flex items-center space-x-1`,
darkClasses('dark:text-opacity-55')
dark('dark:text-opacity-55')
),
chevron: 'opacity-20 shrink-0 ml-3',
subtitle: 'text-sm',
text: cls(
textColor,
`text-sm text-opacity-55 line-clamp-2`,
darkClasses('dark:text-opacity-55')
dark('dark:text-opacity-55')
),
header: 'text-xs mb-0.5',
footer: cls(
textColor,
`text-xs text-opacity-55 mt-0.5`,
darkClasses('dark:text-opacity-55')
dark('dark:text-opacity-55')
),

divider: {
common: cls(
`bg-list-divider-light text-black text-opacity-55 pl-4-safe pr-4-safe py-1 flex items-center z-20`,
divider ? 'relative' : 'sticky top-0',
darkClasses(
`dark:bg-list-divider-dark dark:text-white dark:text-opacity-55`
)
dark(`dark:bg-list-divider-dark dark:text-white dark:text-opacity-55`)
),
ios: `h-8${hairlines ? ' hairline-t' : ''} -mt-px text-list-title-ios`,
material: 'h-12 text-list-title-material',
ios: `h-8${hairlines ? ' hairline-t' : ''} -mt-px ${titleFontSizeIos}`,
material: `h-12 ${titleFontSizeMaterial}`,
},
};
};
3 changes: 2 additions & 1 deletion src/shared/colors/ListColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { cls } from '../cls.js';

export const ListColors = (colorsProp = {}, dark) => {
return {
bg: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
bgIos: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
bgMaterial: cls('bg-md-light-surface-1', dark('dark:bg-md-dark-surface-1')),
...colorsProp,
};
};
6 changes: 5 additions & 1 deletion src/shared/colors/ListItemColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import { cls } from '../cls.js';

export const ListItemColors = (colorsProp = {}, dark) => {
return {
text: cls(`text-black`, dark('dark:text-white')),
textIos: cls(`text-black`, dark('dark:text-white')),
textMaterial: cls(
`text-md-light-on-surface`,
dark('dark:text-md-dark-on-surface')
),
menuListItemText: cls(`text-primary`, dark('dark:text-white')),
menuListItemActiveBg: cls(`bg-primary`, dark('dark:bg-primary')),
...colorsProp,
Expand Down
4 changes: 2 additions & 2 deletions src/svelte/components/ListItem.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
export let contentClass = '';
export let titleWrapClass = '';
export let titleFontSizeIos = 'text-list-title-ios';
export let titleFontSizeMaterial = 'text-list-title-material';
export let titleFontSizeIos = 'text-[17px]';
export let titleFontSizeMaterial = 'text-[16px]';
export let withMedia = undefined;
export let withTitle = undefined;
Expand Down
4 changes: 2 additions & 2 deletions src/types/ListItem.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ interface Props {
/**
* Tailwind CSS class for item title font size in iOS theme
*
* @default 'text-list-title-ios'
* @default 'text-[17px]'
*/
titleFontSizeIos?: string;
/**
* Tailwind CSS class for item title font size in Material theme
*
* @default 'text-list-title-material'
* @default 'text-[16px]'
*/
titleFontSizeMaterial?: string;
/**
Expand Down
4 changes: 2 additions & 2 deletions src/vue/components/ListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,10 @@
innerClass: { type: String, default: '' },
contentClass: { type: String, default: '' },
titleWrapClass: { type: String, default: '' },
titleFontSizeIos: { type: String, default: 'text-list-title-ios' },
titleFontSizeIos: { type: String, default: 'text-[17px]' },
titleFontSizeMaterial: {
type: String,
default: 'text-list-title-material',
default: 'text-[16px]',
},
// Content props
Expand Down

0 comments on commit 8c1b1c1

Please sign in to comment.