design-system-next 2.11.22 → 2.12.3

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

@@ -12,7 +12,7 @@ export const useChips = (
   emit: SetupContext<ChipsEmitTypes>['emit'], 
   slots: Record<string, unknown>,
 ) => {
-  const { disabled, active, variant, iconWeight, icon } = toRefs(props);
+  const { disabled, active, variant, iconWeight, icon, size, tone } = toRefs(props);
 
   const chipsBaseClasses: ComputedRef<string> = computed(() => {
     if (variant.value === 'day') {
@@ -38,11 +38,15 @@ export const useChips = (
     }
 
     return classNames(
-      'spr-body-xs-regular spr-py-1.5 spr-px-2 spr-text-color-strong spr-inline-flex spr-items-center spr-justify-center spr-gap-1 spr-rounded-full spr-transition-all spr-group',
+      'spr-body-xs-regular spr-text-color-strong spr-inline-flex spr-items-center spr-justify-center spr-gap-1 spr-rounded-full spr-transition-all spr-group',
       {
         // Base cursor state
         'hover:spr-cursor-pointer': !disabled.value,
 
+        // Padding for sizes
+        'spr-py-1.5 spr-px-2': size.value === 'md',
+        'spr-py-0.5 spr-px-1.5': size.value === 'sm',
+
         // Disabled state (highest priority)
         'spr-cursor-not-allowed spr-text-color-on-fill-disabled spr-background-color-disabled spr-border-solid spr-border-[1px] spr-border-color-disabled':
           disabled.value,
@@ -52,8 +56,12 @@ export const useChips = (
           active.value && !disabled.value,
 
         // Default state (with hover/pressed)
-        'spr-background-color-surface spr-border spr-border-solid spr-border-color-weak group-hover:spr-background-color-hover group-active:spr-background-color-pressed':
+        'spr-border spr-border-solid spr-border-color-weak group-hover:spr-background-color-hover group-active:spr-background-color-pressed':
           !active.value && !disabled.value,
+          
+        // Default state bg color
+        'spr-background-color-surface': !active.value && !disabled.value && tone.value === 'default',
+        'spr-background-color': !active.value && !disabled.value && tone.value === 'subtle',
 
         // Reset close button styles
         '[&_.chips-close]:hover:spr-cursor-pointer [&_.chips-close]:spr-p-0 [&_.chips-close]:spr-m-0 [&_.chips-close]:spr-border-0 [&_.chips-close]:spr-bg-transparent [&_.chips-close]:spr-inline-flex [&_.chips-close]:spr-items-center [&_.chips-close]:spr-leading-[0]':

package/src/components/date-picker/date-picker.vue

@@ -22,60 +22,66 @@
         <label v-if="props.label" :for="props.id" :class="datePickerClasses.labelClasses">
           {{ props.label }}
         </label>
-        <div ref="datePickerRef" :class="datePickerClasses.datePickerBaseInputClasses" @click="datePopperState = true">
-          <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
-            <input
-              :id="`${props.id}-month`"
-              ref="monthInputRef"
-              v-model="monthInput"
-              :class="['spr-w-[38px] spr-min-w-[38px]', datePickerClasses.datePickerInputClasses]"
-              type="text"
-              placeholder="MMM"
-              maxlength="3"
-              :disabled="props.disabled"
-              :readonly="props.readonly"
-              autocomplete="off"
-              @input="handleMonthInput"
-              @keyup="handleMonthInput"
-              @keydown="handleBackspace('month', $event)"
-            />
-            <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
-            <input
-              :id="`${props.id}-date`"
-              ref="dateInputRef"
-              v-model="dateInput"
-              :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', datePickerClasses.datePickerInputClasses]"
-              type="text"
-              placeholder="DD"
-              maxlength="2"
-              :disabled="props.disabled"
-              :readonly="props.readonly"
-              autocomplete="off"
-              @input="handleDateInput"
-              @keyup="handleDateInput"
-              @keydown="handleBackspace('date', $event)"
-            />
-            <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
-            <input
-              :id="`${props.id}-year`"
-              ref="yearInputRef"
-              v-model="yearInput"
-              :class="['spr-w-[42px] spr-min-w-[42px]', datePickerClasses.datePickerInputClasses]"
-              type="text"
-              placeholder="YYYY"
-              maxlength="4"
-              :disabled="props.disabled"
-              :readonly="props.readonly"
-              autocomplete="off"
-              @input="handleYearInput"
-              @keyup="handleYearInput"
-              @keydown="handleBackspace('year', $event)"
-            />
-          </div>
-          <div class="spr-flex spr-items-center spr-justify-center">
-            <Icon class="spr-text-color-supporting spr-h-4 spr-w-4" icon="ph:calendar-blank" />
+        <slot :handle-click="handleSlotClick">
+          <div
+            ref="datePickerRef"
+            :class="datePickerClasses.datePickerBaseInputClasses"
+            @click="datePopperState = true"
+          >
+            <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">
+              <input
+                :id="`${props.id}-month`"
+                ref="monthInputRef"
+                v-model="monthInput"
+                :class="['spr-w-[38px] spr-min-w-[38px]', datePickerClasses.datePickerInputClasses]"
+                type="text"
+                placeholder="MMM"
+                maxlength="3"
+                :disabled="props.disabled"
+                :readonly="props.readonly"
+                autocomplete="off"
+                @input="handleMonthInput"
+                @keyup="handleMonthInput"
+                @keydown="handleBackspace('month', $event)"
+              />
+              <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
+              <input
+                :id="`${props.id}-date`"
+                ref="dateInputRef"
+                v-model="dateInput"
+                :class="['spr-w-[24px] spr-min-w-[24px] spr-text-center', datePickerClasses.datePickerInputClasses]"
+                type="text"
+                placeholder="DD"
+                maxlength="2"
+                :disabled="props.disabled"
+                :readonly="props.readonly"
+                autocomplete="off"
+                @input="handleDateInput"
+                @keyup="handleDateInput"
+                @keydown="handleBackspace('date', $event)"
+              />
+              <span class="spr-text-color-strong spr-font-size-200 spr-text-color-weak">/</span>
+              <input
+                :id="`${props.id}-year`"
+                ref="yearInputRef"
+                v-model="yearInput"
+                :class="['spr-w-[42px] spr-min-w-[42px]', datePickerClasses.datePickerInputClasses]"
+                type="text"
+                placeholder="YYYY"
+                maxlength="4"
+                :disabled="props.disabled"
+                :readonly="props.readonly"
+                autocomplete="off"
+                @input="handleYearInput"
+                @keyup="handleYearInput"
+                @keydown="handleBackspace('year', $event)"
+              />
+            </div>
+            <div class="spr-flex spr-items-center spr-justify-center">
+              <Icon class="spr-text-color-supporting spr-h-4 spr-w-4" icon="ph:calendar-blank" />
+            </div>
           </div>
-        </div>
+        </slot>
       </div>
 
       <template #popper>
@@ -324,6 +330,7 @@ const {
   handleTabClick,
   handleBackspace,
   clearDate,
+  handleSlotClick
 } = useDatePicker(props, emit);
 
 defineExpose({

package/src/components/date-picker/use-date-picker.ts

@@ -933,6 +933,11 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     yearInput.value = '';
   };
 
+  const handleSlotClick = () => {
+    if(disabled.value || readonly.value) return;
+    datePopperState.value = true;    
+  };
+
   watch(datePopperState, (newValue) => {
     if (newValue === false) {
       setTimeout(() => {
@@ -1032,5 +1037,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleTabClick,
     handleBackspace,
     clearDate,
+    handleSlotClick
   };
 };

package/src/components/table/table.ts

@@ -3,7 +3,7 @@ import type { ChipTitle } from '@/components/table/table-chips-title/table-chips
 import type { LozengeTitle } from '@/components/table/table-lozenge-title/table-lozenge-title';
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-interface Header {
+export interface Header {
   field: string;
   name: string;
   sort: boolean;
@@ -15,6 +15,7 @@ interface Header {
   badgeText: string;
   badgeVariant: string;
   avatarVariant: string;
+  customTailwindClasses?: string;
 }
 
 export interface TableData {

package/src/components/table/table.vue

@@ -31,7 +31,7 @@
                 />
               </div>
             </th>
-            <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses]">
+            <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses(header)]">
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
                   {{ header.name }}

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

@@ -1,6 +1,6 @@
 import { ref, computed, toRefs, Slots, watch } from 'vue';
 
-import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData, TableDataProps } from './table';
+import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData, TableDataProps, Header } from './table';
 import type { SetupContext } from 'vue';
 
 import classNames from 'classnames';
@@ -96,15 +96,20 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-background-color': props.variant === 'white',
       'spr-background-color-surface': props.variant === 'surface',
     });
-    const headerClasses = classNames(
-      'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs',
-      'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
-      'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
-      {
-        'spr-border-t-0': !slots.default,
+    const headerClasses = (header: Header) => {
+      if (header.customTailwindClasses){
+        return classNames(header.customTailwindClasses);
+      }
+
+      return classNames(
+        'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs',
+        'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
+        'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
+        {
+          'spr-border-t-0': !slots.default,
       },
       headerBackground,
-    );
+    )};
 
     const headerNameClass = 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs';