Merge pull request #32 from sippy-platform/0.14

Mellow UI 0.14

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sippy-platform/mellow-ui",
-  "version": "0.13.4",
+  "version": "0.14.1",
   "description": "React components for the Mellow Design System.",
   "main": "./dist/mellow-ui.umd.js",
   "module": "./dist/mellow-ui.es.js",
@@ -49,7 +49,7 @@
     "vite-plugin-dts": "1.4.1"
   },
   "peerDependencies": {
-    "@sippy-platform/mellow-css": ">=0.11.0",
+    "@sippy-platform/mellow-css": ">=0.14.0",
     "@sippy-platform/valkyrie": ">=0.15.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"

src/components/ListItem/ListItem.tsx

@@ -7,6 +7,10 @@ export type ListItemProps<T extends ElementType> = {
    * Show a label around the list
    */
   primary: string;
+  /**
+   * Show a label around the list
+   */
+  secondary?: string;
   /**
    * Show the list item as active
    */
@@ -67,6 +71,7 @@ export type ListItemProps<T extends ElementType> = {
 export function ListItem<T extends ElementType>({
   active,
   primary,
+  secondary,
   className,
   href,
   onClick,
@@ -103,6 +108,7 @@ export function ListItem<T extends ElementType>({
       {startAction && <span className="list-item-action-s">{startAction}</span>}
       {startIcon && <span className="list-item-icon-s">{startIcon}</span>}
       {primary && <span className={clsx('list-item-label', { 'text-truncate': truncate })}>{primary}</span>}
+      {secondary && <span className={clsx('list-item-description', { 'text-truncate': truncate })}>{secondary}</span>}
       {endIcon && <span className="list-item-icon-e">{endIcon}</span>}
       {endAction && <span className="list-item-action-e">{endAction}</span>}
     </Component>

src/docs/pages/Components/ListDemo.tsx

@@ -23,6 +23,7 @@ export default function ListDemo() {
             />
             <ListItem
               primary="This is also list item"
+              secondary="This is a list item description"
               endAction={<Radio value="second" />}
             />
             <ListItemDivider