design-system-next 2.12.6 → 2.12.9

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

@@ -14,7 +14,12 @@ export const useTextArea = (props: TextAreaPropTypes, emit: SetupContext<TextAre
   const textareaClasses = computed(() => {
     const wrapperClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
 
-    const labelClasses = classNames('spr-body-sm-regular spr-text-color-strong spr-block', {
+    const labelClasses = classNames('spr-body-sm-regular spr-text-color-strong spr-flex spr-gap-2', {
+      'spr-text-color-on-fill-disabled': disabled.value,
+      'spr-text-color-base': readonly.value,
+    });
+
+    const supportingLabelClasses = classNames('spr-body-sm-regular spr-text-color-supporting', {
       'spr-text-color-on-fill-disabled': disabled.value,
       'spr-text-color-base': readonly.value,
     });
@@ -44,7 +49,7 @@ export const useTextArea = (props: TextAreaPropTypes, emit: SetupContext<TextAre
       'spr-justify-end': !props.displayHelper && props.hasCounter,
     });
 
-    return { wrapperClasses, labelClasses, textAreaClasses, helperClasses, slotWrapperClasses };
+    return { wrapperClasses, labelClasses, supportingLabelClasses, textAreaClasses, helperClasses, slotWrapperClasses };
   });
 
   const onInput = (event: Event) => {

package/src/components/date-picker/__tests__/date-picker.test.ts

@@ -1,112 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, it, expect } from 'vitest';
-import DatePicker from '../date-picker.vue';
-
-describe('DatePicker', () => {
-  it('should render the component', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-      },
-    });
-    
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it('should use default date format (MM-DD-YYYY) when no format prop is provided', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-      },
-    });
-
-    // Simulate user selecting a date
-    const dateToSelect = '2023-05-15'; // ISO format
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the default format MM-DD-YYYY
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{2}-\d{2}-\d{4}/); // MM-DD-YYYY format
-  });
-
-  it('should format the date according to the specified format prop (YYYY-MM-DD)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-        format: 'YYYY-MM-DD',
-      },
-    });
-
-    // Simulate user selecting a date 
-    const dateToSelect = '05/15/2023'; // Different format input
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the specified format YYYY-MM-DD
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{4}-\d{2}-\d{2}/); // YYYY-MM-DD format
-  });
-
-  it('should format the date according to the specified format prop (MM/DD/YYYY)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-        format: 'MM/DD/YYYY',
-      },
-    });
-
-    // Simulate user selecting a date
-    const dateToSelect = '2023-05-15'; // ISO format
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the specified format MM/DD/YYYY
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{2}\/\d{2}\/\d{4}/); // MM/DD/YYYY format
-  });
-
-  it('should parse dates correctly with different format (MM/DD/YYYY)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '05/15/2023', // Using MM/DD/YYYY format
-        format: 'MM/DD/YYYY',
-      },
-    });
-    
-    // Check that the component correctly displays the date in the input
-    const input = wrapper.find('input');
-    expect(input.element.value).toBe('05/15/2023');
-  });
-
-  it('should parse dates correctly with different format (YYYY-MM-DD)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '2023-05-15', // Using YYYY-MM-DD format
-        format: 'YYYY-MM-DD',
-      },
-    });
-    
-    // Check that the component correctly displays the date in the input
-    const input = wrapper.find('input');
-    expect(input.element.value).toBe('2023-05-15');
-  });
-});

package/src/components/dropdown/__tests__/dropdown-fixes.spec.ts

@@ -1,106 +0,0 @@
-// Test script for dropdown component
-
-import { describe, it, expect } from 'vitest';
-import { ref } from 'vue';
-import { useDropdown } from '../use-dropdown';
-
-describe('Dropdown Component Fixes', () => {
-  describe('Value handling', () => {
-    it('should handle string value selection correctly', () => {
-      // Setup single-select dropdown with string value
-      const modelValue = ref('');
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      // Simulate selecting an item
-      handleSelectedItem([{ text: 'Apple', value: 'apple' }]);
-      
-      // Verify correct value is set
-      expect(modelValue.value).toBe('apple');
-    });
-    
-    it('should handle multiple selection correctly', () => {
-      // Setup multi-select dropdown
-      const modelValue = ref([]);
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      // Simulate selecting multiple items
-      handleSelectedItem([
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ]);
-      
-      // Verify correct values are set
-      expect(modelValue.value).toEqual(['apple', 'banana']);
-    });
-  });
-  
-  describe('Ladderized dropdown', () => {
-    it('should handle ladderized dropdown selection', () => {
-      // Setup ladderized dropdown
-      const modelValue = ref([]);
-      const menuList = [
-        {
-          text: 'Lion',
-          value: 'lion',
-          sublevel: [
-            { text: 'Cub', value: 'cub' }
-          ]
-        }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        ladderized: true
-      });
-      
-      // Simulate selecting an item
-      handleSelectedItem([{ text: 'Cub', value: 'cub', subvalue: 'lion' }]);
-      
-      // Verify correct values are set for ladderized dropdown
-      expect(modelValue.value).toEqual(['lion', 'cub']);
-    });
-  });
-  
-  describe('Edge cases', () => {
-    it('should handle empty selection', () => {
-      const modelValue = ref('apple');
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      // Simulate clearing selection
-      handleSelectedItem([]);
-      
-      // Verify value is cleared
-      expect(modelValue.value).toBeUndefined();
-    });
-  });
-});

package/src/components/dropdown/__tests__/dropdown-value-types.spec.ts

@@ -1,213 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { ref } from 'vue';
-import { useDropdown } from '../use-dropdown';
-
-describe('Dropdown Value Types', () => {
-  describe('Single primitive values', () => {
-    it('should handle string values', () => {
-      const modelValue = 'apple';
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      expect(normalizedValue.value).toEqual(['apple']);
-      expect(dropdownMenuList.value).toEqual([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' },
-        { text: 'cherry', value: 'cherry' }
-      ]);
-    });
-    
-    it('should handle number values', () => {
-      const modelValue = 42;
-      const menuList = [42, 55, 67];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      expect(normalizedValue.value).toEqual([42]);
-      expect(dropdownMenuList.value).toEqual([
-        { text: '42', value: '42' },
-        { text: '55', value: '55' },
-        { text: '67', value: '67' }
-      ]);
-    });
-  });
-  
-  describe('Single object values', () => {
-    it('should handle object values', () => {
-      const employee = { systemId: 1, firstName: 'John', lastName: 'Doe' };
-      const modelValue = employee;
-      const menuList = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId'
-      });
-      
-      expect(normalizedValue.value).toEqual([employee]);
-      expect(dropdownMenuList.value[0].text).toBe('John');
-      expect(dropdownMenuList.value[1].text).toBe('Jane');
-      expect(dropdownMenuList.value[0].value).toBe('1');
-      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
-    });
-  });
-  
-  describe('Multiple primitive values', () => {
-    it('should handle string arrays', () => {
-      const modelValue = ['apple', 'banana'];
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual(['apple', 'banana']);
-      expect(dropdownMenuList.value).toEqual([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' },
-        { text: 'cherry', value: 'cherry' }
-      ]);
-    });
-    
-    it('should handle number arrays', () => {
-      const modelValue = [42, 55];
-      const menuList = [42, 55, 67];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual([42, 55]);
-      expect(dropdownMenuList.value).toEqual([
-        { text: '42', value: '42' },
-        { text: '55', value: '55' },
-        { text: '67', value: '67' }
-      ]);
-    });
-  });
-  
-  describe('Multiple object values', () => {
-    it('should handle object arrays', () => {
-      const employees = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      const modelValue = employees;
-      const menuList = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' },
-        { systemId: 3, firstName: 'Mike', lastName: 'Johnson' }
-      ];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId',
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual(employees);
-      expect(dropdownMenuList.value[0].text).toBe('John');
-      expect(dropdownMenuList.value[1].text).toBe('Jane');
-      expect(dropdownMenuList.value[0].value).toBe('1');
-      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
-    });
-  });
-  
-  describe('Handle selected items', () => {
-    it('should output string for string selection', () => {
-      const modelValue = ref(undefined);
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-      });
-      
-      handleSelectedItem([{ text: 'apple', value: 'apple' }]);
-      expect(modelValue.value).toBe('apple');
-    });
-    
-    it('should output number for number selection', () => {
-      const modelValue = ref(undefined);
-      const menuList = [42, 55, 67];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-      });
-      
-      handleSelectedItem([{ text: '42', value: '42' }]);
-      expect(modelValue.value).toBe(42);
-    });
-    
-    it('should output original object for object selection', () => {
-      const modelValue = ref(undefined);
-      const employeeObj = { systemId: 1, firstName: 'John', lastName: 'Doe' };
-      const menuList = [
-        employeeObj,
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      
-      const { handleSelectedItem, dropdownMenuList } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId'
-      });
-      
-      // Process menu list first to get _originalObject
-      dropdownMenuList.value.forEach(item => {
-        if (item.value === '1') {
-          handleSelectedItem([item]);
-        }
-      });
-      
-      expect(modelValue.value).toEqual(employeeObj);
-    });
-    
-    it('should output array for multi-select', () => {
-      const modelValue = ref([]);
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      handleSelectedItem([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' }
-      ]);
-      
-      expect(modelValue.value).toEqual(['apple', 'banana']);
-    });
-  });
-});