design-system-next 2.22.0 → 2.22.2

package/src/components/list/list-item/list-item.ts

@@ -1,48 +1,60 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { MenuListType } from '../list';
-
-export const listItemPropTypes = {
-  item: {
-    type: Object as PropType<MenuListType>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  classes: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
-    required: true,
-  },
-  multiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  lozenge: {
-    type: Boolean,
-    default: false,
-  },
-  ladderized: {
-    type: Boolean,
-    default: false,
-  },
-  noCheck: {
-    type: Boolean,
-    default: false,
-  },
-  itemIcon: {
-    type: String,
-    default: '',
-  },
-  disabledUnselectedItems: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const listItemEmitTypes = {
-  select: () => true,
-};
-
-export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
-export type ListItemEmitTypes = typeof listItemEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  itemIconTone: {
+    type: String,
+    default: 'plain',
+  },
+  itemIconFill: {
+    type: Boolean,
+    default: false,
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+  radioList: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

package/src/components/list/list-item/list-item.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="props.classes" @click="$emit('select')">
     <template v-if="showLozengeMode">
-      <div class="spr-flex spr-items-center spr-gap-1">
+      <div class="spr-flex spr-items-center spr-gap-2">
         <spr-checkbox
           v-if="props.multiSelect"
           :disabled="listItem.disabled || (props.disabledUnselectedItems && !isSelected)"
@@ -19,22 +19,32 @@
       </div>
     </template>
     <template v-else>
-      <div class="spr-flex spr-items-center spr-gap-1">
+      <div class="spr-flex spr-items-center spr-gap-2">
         <spr-checkbox
           v-if="props.multiSelect"
           :disabled="listItem.disabled || (props.disabledUnselectedItems && !isSelected)"
           :checked="isSelected"
         />
+        <spr-radio
+          v-if="props.radioList && !props.multiSelect"
+          :id="`radio-${props.item?.value}`"
+          class="spr-flex spr-items-center"
+          name="radio-group"
+          :value="props.item?.value"
+          :model-value="isSelected ? props.item?.value : undefined"
+          :disabled="props.item?.disabled || (props.disabledUnselectedItems && !isSelected)"
+          @update:model-value="$emit('select')"
+        />
         <div :class="[listItem.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
           <span
             v-if="hasIcon"
             :class="[
-              listItem.iconColor,
-              'spr-mt-[2px]',
+              'spr-flex spr-h-[30px] spr-w-[30px] spr-items-center spr-justify-center',
+              iconClasses,
               { 'spr-text-color-disabled': listItem.disabled || (props.disabledUnselectedItems && !isSelected) },
             ]"
           >
-            <Icon :icon="iconName" width="20px" height="20px" />
+            <Icon class="spr-text-xl" :icon="iconName" />
           </span>
           <div
             :class="[
@@ -59,11 +69,11 @@
       </div>
 
       <!-- Right Side Actions -->
-      <div class="spr-flex spr-items-center spr-gap-1">
+      <div class="spr-flex spr-items-center spr-gap-2">
         <template v-if="props.ladderized">
           <Icon v-if="hasSublevels" class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
           <Icon
-            v-else-if="isSelected && !props.noCheck"
+            v-else-if="isSelected && !props.noCheck && !props.multiSelect && !props.radioList"
             class="spr-text-color-brand-base spr-w-[1.39em]"
             icon="ph:check"
           />
@@ -80,7 +90,7 @@
             :postfix-icon="listItem.lozenge?.postfixIcon as string"
           />
           <Icon
-            v-if="isSelected && !props.noCheck && !props.multiSelect"
+            v-if="isSelected && !props.noCheck && !props.multiSelect && !props.radioList"
             class="spr-text-color-brand-base spr-w-[1.39em]"
             icon="ph:check"
           />
@@ -94,6 +104,7 @@
 import { Icon } from '@iconify/vue';
 
 import SprCheckbox from '@/components/checkbox/checkbox.vue';
+import SprRadio from '@/components/radio/radio.vue';
 import SprLozenge from '@/components/lozenge/lozenge.vue';
 
 import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
@@ -104,5 +115,5 @@ import { useListItem } from './use-list-item';
 const props = defineProps(listItemPropTypes);
 const emit = defineEmits(listItemEmitTypes);
 
-const { listItem, hasIcon, iconName, hasSublevels, showLozengeMode } = useListItem(props, emit);
+const { listItem, hasIcon, iconName, iconClasses, hasSublevels, showLozengeMode } = useListItem(props, emit);
 </script>

package/src/components/list/list-item/use-list-item.ts

@@ -11,10 +11,11 @@ export function useListItem(
   listItem: ComputedRef<ListItemPropTypes['item']>;
   hasIcon: ComputedRef<boolean>;
   iconName: ComputedRef<string>;
+  iconClasses: ComputedRef<string>;
   hasSublevels: ComputedRef<boolean>;
   showLozengeMode: ComputedRef<boolean>;
 } {
-  const { item, itemIcon, lozenge } = toRefs(props);
+  const { item, itemIcon, itemIconTone, itemIconFill, lozenge } = toRefs(props);
 
   const listItem = computed(() => item?.value);
 
@@ -22,6 +23,40 @@ export function useListItem(
 
   const iconName = computed(() => itemIcon.value || item?.value!.icon || '');
 
+  const iconClasses = computed(() => {
+    // If item has a specific iconColor, use that
+    if (item?.value?.iconColor) {
+      return item.value.iconColor;
+    }
+
+    const tone = itemIconTone?.value || 'plain';
+    const fill = itemIconFill?.value || false;
+
+    const toneClasses: Record<string, string> = {
+      plain: 'spr-text-color-base',
+      pending: fill
+        ? 'spr-bg-yellow-100 spr-text-yellow-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-yellow-600 spr-rounded-md spr-p-1.5',
+      information: fill
+        ? 'spr-bg-blue-100 spr-text-blue-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-blue-600 spr-rounded-md spr-p-1.5',
+      success: fill
+        ? 'spr-bg-green-100 spr-text-green-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-green-600 spr-rounded-md spr-p-1.5',
+      danger: fill
+        ? 'spr-bg-red-100 spr-text-red-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-red-600 spr-rounded-md spr-p-1.5',
+      neutral: fill
+        ? 'spr-bg-gray-100 spr-text-gray-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-gray-600 spr-rounded-md spr-p-1.5',
+      caution: fill
+        ? 'spr-bg-orange-100 spr-text-orange-700 spr-rounded-md spr-p-1.5'
+        : 'spr-text-orange-600 spr-rounded-md spr-p-1.5',
+    };
+
+    return toneClasses[tone] || toneClasses['plain'];
+  });
+
   const hasSublevels = computed(() => !!(item?.value!.sublevel && item?.value!.sublevel.length > 0));
 
   const showLozengeMode = computed(() => lozenge.value && !!item?.value!.lozengeProps);
@@ -30,6 +65,7 @@ export function useListItem(
     listItem,
     hasIcon,
     iconName,
+    iconClasses,
     hasSublevels,
     showLozengeMode,
   };

package/src/components/list/list.ts

@@ -107,10 +107,22 @@ export const listPropTypes = {
     type: String,
     default: '',
   },
+  itemIconTone: {
+    type: String,
+    default: 'plain',
+  },
+  itemIconFill: {
+    type: Boolean,
+    default: false,
+  },
   disabledUnselectedItems: {
     type: Boolean,
     default: false,
   },
+  radioList: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const listEmitTypes = {

package/src/components/list/list.vue

@@ -41,7 +41,10 @@
                 :ladderized="props.ladderized"
                 :no-check="props.noCheck"
                 :item-icon="props.itemIcon"
+                :item-icon-tone="props.itemIconTone"
+                :item-icon-fill="props.itemIconFill"
                 :disabled-unselected-items="props.disabledUnselectedItems"
+                :radio-list="props.radioList"
                 @select="handleSelectedItem(item)"
               />
               <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
@@ -66,7 +69,10 @@
             :ladderized="props.ladderized"
             :no-check="props.noCheck"
             :item-icon="props.itemIcon"
+            :item-icon-tone="props.itemIconTone"
+            :item-icon-fill="props.itemIconFill"
             :disabled-unselected-items="props.disabledUnselectedItems"
+            :radio-list="props.radioList"
             @select="handleSelectedItem(item)"
           />
           <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">

package/src/components/progress-bar/progress-bar.ts

@@ -1,6 +1,18 @@
 import { PropType, ExtractPropTypes } from 'vue';
 
 const PROGRESS_BAR_SIZES = ['xs', 'sm', 'lg'] as const;
+const PERCENTAGE_PLACEMENTS = [
+  'top',
+  'top-start',
+  'top-center',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-center',
+  'bottom-end',
+  'left',
+  'right',
+] as const;
 
 export const progressBarPropTypes = {
   size: {
@@ -45,6 +57,15 @@ export const progressBarPropTypes = {
       return true;
     },
   },
+  labelPlacement: {
+    type: String as PropType<(typeof PERCENTAGE_PLACEMENTS)[number]>,
+    validator: (value: (typeof PERCENTAGE_PLACEMENTS)[number]) => PERCENTAGE_PLACEMENTS.includes(value),
+    default: 'bottom',
+  },
+  supportingLabel: {
+    type: String as PropType<string>,
+    default: '',
+  },
 };
 
 export type ProgressBarPropTypes = ExtractPropTypes<typeof progressBarPropTypes>;

package/src/components/progress-bar/progress-bar.vue

@@ -1,22 +1,39 @@
 <template>
   <div
-    class="spr-flex spr-w-full spr-flex-col spr-gap-size-spacing-5xs"
+    :class="containerClasses"
     :aria-valuemin="0"
     :aria-valuemax="props.max || 100"
     :aria-valuenow="props.value"
     role="progressbar"
   >
-    <div :class="[handleProgressBarSize, 'spr-overflow-hidden spr-rounded-lg spr-bg-white-100']">
+    <div
+      :class="[
+        handleProgressBarSize,
+        'spr-overflow-hidden spr-rounded-lg spr-bg-white-100',
+        {
+          'spr-w-full': [
+            'top',
+            'top-start',
+            'top-center',
+            'top-end',
+            'bottom',
+            'bottom-start',
+            'bottom-center',
+            'bottom-end',
+          ].includes(props.labelPlacement),
+          'spr-flex-1': ['left', 'right'].includes(props.labelPlacement),
+        },
+      ]"
+    >
       <div
         :class="[`spr-background-color-${validColor}-base`, 'spr-transition-all spr-duration-300']"
         :style="handleProgressBarStyle"
       ></div>
     </div>
-    <span
-      v-if="props.label"
-      class="spr-text-color-base spr-font-weight-regular spr-font-size-100 spr-line-height-100 spr-font-main"
-      >{{ percentage }}%</span
-    >
+    <div v-if="props.label || props.supportingLabel" class="spr-flex spr-gap-1.5">
+      <span v-if="props.label" class="spr-text-color-strong spr-subheading-sm">{{ percentage }}%</span>
+      <span v-if="props.supportingLabel" class="spr-body-md-regular">{{ props.supportingLabel }}</span>
+    </div>
   </div>
 </template>
 
@@ -26,5 +43,6 @@ import { useProgressBar } from './use-progress-bar';
 
 const props = defineProps(progressBarPropTypes);
 
-const { handleProgressBarSize, validColor, percentage, handleProgressBarStyle } = useProgressBar(props);
+const { handleProgressBarSize, validColor, percentage, handleProgressBarStyle, containerClasses } =
+  useProgressBar(props);
 </script>

package/src/components/progress-bar/use-progress-bar.ts

@@ -1,4 +1,5 @@
 import { computed } from 'vue';
+
 import type { ProgressBarPropTypes } from './progress-bar';
 
 export const useProgressBar = (props: ProgressBarPropTypes) => {
@@ -14,12 +15,12 @@ export const useProgressBar = (props: ProgressBarPropTypes) => {
         return 'spr-h-3';
     }
   });
-  
+
   const validColor = computed<string>(() => {
     const validColors = ['success', 'danger', 'warning', 'info', 'neutral'];
     return validColors.includes(props.color) ? props.color : 'success';
   });
-  
+
   const percentage = computed<number>(() => Math.min((props.value / (props.max || 100)) * 100, 100));
 
   const handleProgressBarStyle = computed<{ width: string; height: string }>(() => {
@@ -29,10 +30,38 @@ export const useProgressBar = (props: ProgressBarPropTypes) => {
     };
   });
 
+  const containerClasses = computed<string>(() => {
+    switch (props.labelPlacement) {
+      case 'top':
+        return 'spr-flex spr-flex-col-reverse spr-gap-size-spacing-5xs';
+      case 'top-start':
+        return 'spr-flex spr-flex-col-reverse spr-gap-size-spacing-5xs';
+      case 'top-center':
+        return 'spr-flex spr-flex-col-reverse spr-gap-size-spacing-5xs spr-items-center';
+      case 'top-end':
+        return 'spr-flex spr-flex-col-reverse spr-gap-size-spacing-5xs spr-items-end';
+      case 'bottom':
+        return 'spr-flex spr-flex-col spr-gap-size-spacing-5xs';
+      case 'bottom-start':
+        return 'spr-flex spr-flex-col spr-gap-size-spacing-5xs';
+      case 'bottom-center':
+        return 'spr-flex spr-flex-col spr-gap-size-spacing-5xs spr-items-center';
+      case 'bottom-end':
+        return 'spr-flex spr-flex-col spr-gap-size-spacing-5xs spr-items-end';
+      case 'left':
+        return 'spr-flex spr-flex-row spr-gap-size-spacing-5xs spr-items-center';
+      case 'right':
+        return 'spr-flex spr-flex-row-reverse spr-gap-size-spacing-5xs spr-items-center';
+      default:
+        return 'spr-flex spr-flex-col spr-gap-size-spacing-5xs';
+    }
+  });
+
   return {
     handleProgressBarSize,
     validColor,
     percentage,
     handleProgressBarStyle,
+    containerClasses,
   };
 };

package/src/components/sidepanel/sidepanel.ts

@@ -100,6 +100,10 @@ export const sidepanelPropTypes = {
   isExpanded: {
     type: Boolean,
     default: false
+  },
+  isActivePanel: {
+    type: Boolean,
+    default: false
   }
 };
 

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.vue

@@ -29,13 +29,22 @@ const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
 const props = defineProps(stackingSidePanelProps);
 const emits = defineEmits(stackingSidePanelEmits);
 
-const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels, handleExpandPanel, expandedPanel } =
-  useStackingSidepanel(props, emits, stackingSidepanelBase);
+const {
+  showPanel,
+  hidePanel,
+  stackingSidepanelClasses,
+  stackingSidepanelBaseTransform,
+  activePanels,
+  handleExpandPanel,
+  expandedPanel,
+  activePanel
+} = useStackingSidepanel(props, emits, stackingSidepanelBase);
 
 defineExpose({
   showPanel,
   hidePanel,
   handleExpandPanel,
-  expandedPanel
+  expandedPanel,
+  activePanel
 });
 </script>

package/src/components/sidepanel/stacking-sidepanel/use-stacking-sidepanel.ts

@@ -11,6 +11,7 @@ export const useStackingSidepanel = (
   const activePanels = useVModel(props, 'stack', emits, { deep: true });
   const expandedPanel = ref('');
   const isTransitioning = ref(false);  
+  const activePanel = computed(() => activePanels.value[activePanels.value.length -1] || null);
 
   // Ensure activePanels is an array
   watchDeep(activePanels, (newValue) => {
@@ -143,5 +144,6 @@ export const useStackingSidepanel = (
     activePanels,
     expandedPanel,
     handleExpandPanel,
+    activePanel
   };
 };

package/src/components/sidepanel/use-sidepanel.ts

@@ -19,7 +19,7 @@ interface SidepanelClasses {
 }
 
 export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
-  const { size, position, isStacking, footerNoPadding, isExpanded } = toRefs(props);
+  const { size, position, isStacking, footerNoPadding, isExpanded, isActivePanel } = toRefs(props);
 
   const sidepanelClasses: ComputedRef<SidepanelClasses> = computed(() => {
     const sidepanelBaseClasses = classNames(
@@ -33,6 +33,7 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
         '[@media(max-width:420px)]:spr-w-[calc(100vw-35px)]': size.value === 'md' && !isExpanded.value && !isStacking.value,
         '[@media(max-width:480px)]:spr-w-[calc(100vw-35px)]': size.value === 'lg' && !isExpanded.value && !isStacking.value,
         'spr-w-[calc(100vw-50px)]': isExpanded.value,
+        'spr-pointer-events-none': !isActivePanel.value && isStacking.value
       },
     );