@descope-ui/descope-apps-list 2.1.17 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.0](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.18...web-components-ui-2.2.0) (2025-10-26)
+
+## [2.1.18](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.17...web-components-ui-2.1.18) (2025-10-26)
+
 ## [2.1.17](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.16...web-components-ui-2.1.17) (2025-10-20)
 
 ## [2.1.16](https://github.com/descope/web-components-ui/compare/web-components-ui-2.1.15...web-components-ui-2.1.16) (2025-10-19)

package/e2e/descope-apps-list.spec.ts

@@ -1,11 +1,41 @@
 import { test, expect } from '@playwright/test';
-import { getStoryUrl, loopConfig } from 'e2e-utils';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
 
 const componentAttributes = {
   direction: ['ltr', 'rtl'],
   numberOfItems: ['0'],
   size: ['xs', 'sm', 'md', 'lg'],
   variant: ['list', 'tiles'],
+  'item-padding': ['xs', 'sm', 'md', 'lg', 'xl'],
+  'st-background-color': ['red'],
+  'logo-size': ['xs', 'sm', 'md', 'lg'],
+};
+
+const presets = {
+  'item alignment center in tiles mode': {
+    'st-item-alignment': 'center',
+    variant: 'tiles',
+  },
+  'item alignment start in tiles mode': {
+    'st-item-alignment': 'start',
+    variant: 'tiles',
+  },
+  'item alignment end in tiles mode': {
+    'st-item-alignment': 'end',
+    variant: 'tiles',
+  },
+  'item text variant h1': {
+    'item-text-variant': 'h1',
+    size: '!undefined',
+  },
+  'item text variant subtitle1': {
+    'item-text-variant': 'subtitle1',
+    size: '!undefined',
+  },
+  'item text variant body1': {
+    'item-text-variant': 'body1',
+    size: '!undefined',
+  },
 };
 
 const storyName = 'descope-apps-list';
@@ -24,4 +54,13 @@ test.describe('theme', () => {
       });
     });
   });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
 });
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-apps-list",
-  "version": "2.1.17",
+  "version": "2.2.0",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,14 +14,15 @@
   },
   "devDependencies": {
     "@playwright/test": "1.38.1",
-    "e2e-utils": "2.1.17"
+    "e2e-utils": "2.2.0"
   },
   "dependencies": {
-    "@descope-ui/common": "2.1.17",
-    "@descope-ui/theme-globals": "2.1.17",
-    "@descope-ui/descope-list": "2.1.17",
-    "@descope-ui/descope-avatar": "2.1.17",
-    "@descope-ui/descope-text": "2.1.17"
+    "@descope-ui/common": "2.2.0",
+    "@descope-ui/theme-globals": "2.2.0",
+    "@descope-ui/descope-list": "2.2.0",
+    "@descope-ui/descope-list-item": "2.2.0",
+    "@descope-ui/descope-avatar": "2.2.0",
+    "@descope-ui/descope-text": "2.2.0"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/AppsListClass.js

@@ -8,6 +8,8 @@ import {
   createDynamicDataMixin,
 } from '@descope-ui/common/components-mixins';
 import { TextClass } from '@descope-ui/descope-text/class';
+import { ListClass } from '@descope-ui/descope-list/class';
+import { ListItemClass } from '@descope-ui/descope-list-item/class';
 
 export const componentName = getComponentName('apps-list');
 
@@ -17,10 +19,10 @@ const itemRenderer = ({ name, icon, url }, _, ref) => `
     <descope-avatar
       ${icon ? `img="${icon}"` : ''}
       ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
-      size=${ref.size}
+      size="${ref.logoSize || ref.size}"
     ></descope-avatar>
     <descope-text
-      variant="body1"
+      variant="${ref.itemTextVariant}"
       mode="primary"
     >${name}</descope-text>
     </descope-list-item>
@@ -29,9 +31,18 @@ const itemRenderer = ({ name, icon, url }, _, ref) => `
 
 const customMixin = (superclass) =>
   class AppsListMixinClass extends superclass {
+    // size controls both item logo size and font size
     get size() {
       return this.getAttribute('size') || 'sm';
     }
+
+    get itemTextVariant() {
+      return this.getAttribute('item-text-variant') || 'body1';
+    }
+
+    get logoSize() {
+      return this.getAttribute('logo-size');
+    }
   };
 
 export const AppsListClass = compose(
@@ -42,19 +53,51 @@ export const AppsListClass = compose(
       hostDirection: { selector: () => ':host', property: 'direction' },
       itemsFontWeight: {
         selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontWeight,
+        property: TextClass.cssVarList.fontWeightOverride,
       },
       itemsFontSize: {
         selector: TextClass.componentName,
-        property: TextClass.cssVarList.fontSize,
+        property: TextClass.cssVarList.fontSizeOverride,
       },
       itemsTextAlign: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.textAlign,
       },
+      itemBackgroundColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
+      backgroundColor: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.backgroundColorOverride,
+      },
+      itemBorderStyle: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderStyleOverride,
+      },
+      itemBorderColor: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderColorOverride,
+      },
+      itemBorderWidth: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.borderWidthOverride,
+      },
+      itemVerticalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.verticalPaddingOverride,
+      },
+      itemHorizontalPadding: {
+        selector: ListItemClass.componentName,
+        property: ListItemClass.cssVarList.horizontalPaddingOverride,
+      },
+      itemAlignment: [
+        { selector: ListItemClass.componentName, property: ListItemClass.cssVarList.alignItemsOverride },
+        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
+      ]
     },
   }),
-  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size'] }),
+  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
   draggableMixin,
   componentNameValidationMixin,
   customMixin
@@ -83,6 +126,7 @@ export const AppsListClass = compose(
 
       descope-text {
         ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+        max-width: 100%;
       }
     `,
   })

package/src/theme.js

@@ -31,6 +31,29 @@ const appsList = {
       [vars.itemsFontSize]: '20px',
     },
   },
+
+  itemPadding: {
+    xs: {
+      [vars.itemVerticalPadding]: globalRefs.spacing.xs,
+      [vars.itemHorizontalPadding]: globalRefs.spacing.xs,
+    },
+    sm: {
+      [vars.itemVerticalPadding]: globalRefs.spacing.sm,
+      [vars.itemHorizontalPadding]: globalRefs.spacing.sm,
+    },
+    md: {
+      [vars.itemVerticalPadding]: globalRefs.spacing.md,
+      [vars.itemHorizontalPadding]: globalRefs.spacing.md,
+    },
+    lg: {
+      [vars.itemVerticalPadding]: globalRefs.spacing.lg,
+      [vars.itemHorizontalPadding]: globalRefs.spacing.lg,
+    },
+    xl: {
+      [vars.itemVerticalPadding]: globalRefs.spacing.xl,
+      [vars.itemHorizontalPadding]: globalRefs.spacing.xl,
+    },
+  },
 };
 
 export default appsList;

package/stories/descope-apps-list.stories.js

@@ -7,11 +7,21 @@ const Template = ({
   emptyState,
   size,
   variant,
+  'logo-size': logoSize,
+  'item-padding': itemPadding,
+  'item-text-variant': itemTextVariant,
+  'st-item-alignment': itemAlignment,
+  'st-background-color': backgroundColor,
 }) => `
   <descope-apps-list
     st-host-direction="${direction || ''}"
-    size=${size || ''}
+    size="${size || ''}"
     variant="${variant}"
+    logo-size="${logoSize || ''}"
+    item-padding="${itemPadding || ''}"
+    item-text-variant="${itemTextVariant || ''}"
+    st-item-alignment="${itemAlignment || ''}"
+    st-background-color="${backgroundColor || ''}"
   >
   <div slot="empty-state">${emptyState}</div>
   </descope-apps-list>
@@ -37,12 +47,40 @@ export default {
   ],
   argTypes: {
     ...directionControl,
-    ...sizeControl,
+    size: {
+      name: 'Size',
+      options: [undefined,'xs', 'sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
     variant: {
       name: 'Variant',
       options: ['list', 'tiles'],
       control: { type: 'radio' },
     },
+    'logo-size': {
+      name: 'Logo Size',
+      options: ['xs', 'sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    'item-padding': {
+      name: 'Item Padding',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'select' },
+    },
+    'item-text-variant': {
+      name: 'Item Text Variant',
+      options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+      control: { type: 'select' },
+    },
+    'st-item-alignment': {
+      name: 'Item Alignment',
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+    },
+    'st-background-color': {
+      name: 'Background Color',
+      control: 'color',
+    },
   },
 };