Skip to content

Commit

Permalink
feat(list-item): item title font sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Sep 6, 2021
1 parent 5153047 commit 615d950
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 3 deletions.
2 changes: 2 additions & 0 deletions src/config/extend-theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ const extendTheme = () => {
'icon-material': '24px',
'navbar-ios': '17px',
'navbar-material': '17px',
'list-title-ios': '17px',
'list-title-material': '16px',
};

// SCALE
Expand Down
13 changes: 10 additions & 3 deletions src/react/components/ListItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ const ListItem = forwardRef((props, ref) => {
contentChildren,
titleWrapClassName = '',

titleFontSizeIos = 'text-list-title-ios',
titleFontSizeMaterial = 'text-list-title-material',

// Content props
title,
subtitle,
Expand Down Expand Up @@ -156,7 +159,11 @@ const ListItem = forwardRef((props, ref) => {
ios: 'py-2.5',
material: 'py-3',
},
titleWrap: `flex justify-between items-center ${titleWrapClassName}`,
titleWrap: {
common: cls(`flex justify-between items-center ${titleWrapClassName}`),
ios: cls(!menuListItem && titleFontSizeIos),
material: cls(!menuListItem && titleFontSizeMaterial),
},
title: {
common: `flex-shrink`,
menuListItem: cls(
Expand Down Expand Up @@ -196,8 +203,8 @@ const ListItem = forwardRef((props, ref) => {
divider ? 'relative' : 'sticky top-0',
dark(`dark:bg-list-divider-dark dark:text-white dark:text-opacity-55`)
),
ios: `h-8${hairlines ? ' hairline-t' : ''} -mt-px`,
material: 'h-12',
ios: `h-8${hairlines ? ' hairline-t' : ''} -mt-px text-list-title-ios`,
material: 'h-12 text-list-title-material',
},
},
className
Expand Down
13 changes: 13 additions & 0 deletions src/types/ListItem.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,19 @@ interface Props {
* Content of the item-content
*/
contentChildren?: string | number | React.ReactNode;

/**
* Tailwind CSS class for item title font size in iOS theme
*
* @default 'text-list-title-ios'
*/
titleFontSizeIos?: string;
/**
* Tailwind CSS class for item title font size in Material theme
*
* @default 'text-list-title-material'
*/
titleFontSizeMaterial?: string;
/**
* Additional class to add on item "titleWrap" element
*/
Expand Down

0 comments on commit 615d950

Please sign in to comment.