@descope-ui/descope-apps-list 2.2.15 → 2.2.17

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.17](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.16...web-components-ui-2.2.17) (2026-01-05)
+
+## [2.2.16](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.15...web-components-ui-2.2.16) (2025-12-28)
+
+
+### Features
+
+* Add design options to apps list ([#815](https://github.com/descope/web-components-ui/issues/815)) ([fd250ac](https://github.com/descope/web-components-ui/commit/fd250acf2802c38905df2b2e6350477b06e2431c))
+
 ## [2.2.15](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.14...web-components-ui-2.2.15) (2025-12-23)
 
 ## [2.2.14](https://github.com/descope/web-components-ui/compare/web-components-ui-2.2.13...web-components-ui-2.2.14) (2025-12-22)

package/package.json

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

package/src/component/AppsListClass.js

@@ -1,5 +1,8 @@
 import { compose } from '@descope-ui/common/utils';
-import { getComponentName, limitAbbreviation } from '@descope-ui/common/components-helpers';
+import {
+  getComponentName,
+  limitAbbreviation,
+} from '@descope-ui/common/components-helpers';
 import {
   createStyleMixin,
   draggableMixin,
@@ -14,7 +17,7 @@ import { ListItemClass } from '@descope-ui/descope-list-item/class';
 export const componentName = getComponentName('apps-list');
 
 const itemRenderer = ({ name, icon, url }, _, ref) => `
-  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+  <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
     <descope-list-item>
     <div class="avatar-wrapper">
       <descope-avatar
@@ -45,6 +48,10 @@ const customMixin = (superclass) =>
     get logoSize() {
       return this.getAttribute('logo-size');
     }
+
+    get openInSameWindow() {
+      return this.getAttribute('open-in-same-window') === 'true';
+    }
   };
 
 export const AppsListClass = compose(
@@ -53,6 +60,14 @@ export const AppsListClass = compose(
       maxHeight: { selector: () => ':host' },
       minHeight: { selector: () => ':host' },
       hostDirection: { selector: () => ':host', property: 'direction' },
+      gap: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.gap,
+      },
+      maxRowItems: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.maxRowItems,
+      },
       itemsFontWeight: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.fontWeightOverride,
@@ -69,6 +84,10 @@ export const AppsListClass = compose(
         selector: ListItemClass.componentName,
         property: ListItemClass.cssVarList.backgroundColor,
       },
+      itemHoverBackgroundColor: {
+        selector: `${ListItemClass.componentName}:hover`,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
       backgroundColor: {
         selector: ListClass.componentName,
         property: ListClass.cssVarList.backgroundColorOverride,
@@ -95,14 +114,25 @@ export const AppsListClass = compose(
       },
       itemAlignment: [
         { selector: () => '.avatar-wrapper', property: 'text-align' },
-        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
-      ]
+        {
+          selector: TextClass.componentName,
+          property: TextClass.cssVarList.textAlign,
+        },
+      ],
     },
   }),
-  createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
+  createDynamicDataMixin({
+    itemRenderer,
+    rerenderAttrsList: [
+      'size',
+      'item-text-variant',
+      'logo-size',
+      'open-in-same-window',
+    ],
+  }),
   draggableMixin,
   componentNameValidationMixin,
-  customMixin
+  customMixin,
 )(
   createProxy({
     slots: ['empty-state'],
@@ -140,5 +170,5 @@ export const AppsListClass = compose(
         width: 100%;
       }
     `,
-  })
+  }),
 );

package/src/theme.js

@@ -11,6 +11,7 @@ const appsList = {
   [vars.itemsTextAlign]: 'start',
   [vars.hostDirection]: globalRefs.direction,
   [vars.maxHeight]: defaultHeight,
+  [vars.itemHoverBackgroundColor]: globalRefs.colors.surface.highlight,
 
   _empty: {
     [vars.minHeight]: defaultHeight,

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

@@ -12,6 +12,7 @@ const Template = ({
   'item-text-variant': itemTextVariant,
   'st-item-alignment': itemAlignment,
   'st-background-color': backgroundColor,
+  maxItemsPerRow,
 }) => `
   <descope-apps-list
     st-host-direction="${direction || ''}"
@@ -22,6 +23,7 @@ const Template = ({
     item-text-variant="${itemTextVariant || ''}"
     st-item-alignment="${itemAlignment || ''}"
     st-background-color="${backgroundColor || ''}"
+    st-max-row-items="${maxItemsPerRow || ''}"
   >
   <div slot="empty-state">${emptyState}</div>
   </descope-apps-list>
@@ -39,7 +41,7 @@ export default {
             name: `${args.itemSampleText} ${i + 1}`,
             icon: i % 2 > 0 ? avatarImage : '',
             url: 'https://www.google.com',
-          })
+          }),
         );
       });
       return story();
@@ -49,7 +51,7 @@ export default {
     ...directionControl,
     size: {
       name: 'Size',
-      options: [undefined,'xs', 'sm', 'md', 'lg'],
+      options: [undefined, 'xs', 'sm', 'md', 'lg'],
       control: { type: 'select' },
     },
     variant: {
@@ -81,6 +83,10 @@ export default {
       name: 'Background Color',
       control: 'color',
     },
+    maxItemsPerRow: {
+      name: 'Max Items Per Row (for tiles variant)',
+      control: { type: 'number', min: 1, max: 1000, step: 1 },
+    },
   },
 };