@vcita/design-system 1.11.12 → 1.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.11.12",
+  "version": "1.11.13",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcChip/VcChip.spec.js

@@ -156,4 +156,20 @@ describe("VcChip.vue", () => {
         expect(chip).toHaveClass('VcChip--small')
     })
 
+    it('Chip width', async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcChip, {
+            props: {
+                label: 'James Howlett',
+            }
+        })
+
+        const chip = getByTestId('vc-chip')
+        expect(chip).toHaveStyle('min-width: 20px');
+        expect(chip).toHaveStyle('max-width: 116px');
+
+        await updateProps({minWidth: 50, maxWidth: 100});
+        expect(chip).toHaveStyle('min-width: 50px');
+        expect(chip).toHaveStyle('max-width: 100px');
+    })
+
 });

package/src/components/VcChip/VcChip.stories.js

@@ -15,6 +15,8 @@ const baseProps = {
     selected: false,
     small: false,
     subLabel: '',
+    maxWidth: 116,
+    minWidth: 20,
 }
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -37,6 +39,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
               :is-ripple="isRipple"
               :small="small"
               :subLabel="subLabel"
+              :max-width="maxWidth"
+              :min-width="minWidth"
               @onChipClick="onChipClick"
               @input="onClose">
       </VcChip>`,

package/src/components/VcChip/VcChip.vue

@@ -5,6 +5,7 @@
     :ripple="isRipple"
     close-icon="$close"
     :disabled="disabled"
+    :style="{maxWidth: `${maxWidth}px`, minWidth: `${minWidth}px`}"
     :class="{
       'vc-invalid': invalid,
       'vc-avatar': !!avatar,
@@ -82,6 +83,14 @@ export default {
       type: Boolean,
       default: false
     },
+    maxWidth: {
+      type: Number,
+      default: 116,
+    },
+    minWidth: {
+      type: Number,
+      default: 20,
+    },
   }
 };
 </script>
@@ -90,11 +99,13 @@ export default {
 @import '@/../styles/variables.scss';
 
 .VcChip {
-  max-width: fit-content;
   border: 1px solid var(--neutral-lighten-1);
 
-  &__label-wrap {
+  .label-wrap {
     padding-inline: var(--size-value2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .v-chip__content__avatar {

package/src/components/VcChipList/VcChipList.vue

@@ -28,6 +28,8 @@
                 :is-ripple="false"
                 :close-button="showCloseButton"
                 :small="isSmall"
+                :max-width="maxChipWidth"
+                :min-width="minChipWidth"
                 data-qa="vc-chip-item-more"/>
         <span v-else
               v-show="hiddenChips.length"
@@ -81,7 +83,13 @@ export default {
       type: String,
       default: 'text',
       validator: value => ['text', 'chip'].includes(value)
-    }
+    },
+    maxChipWidth: {
+      type: Number,
+    },
+    minChipWidth: {
+      type: Number,
+    },
   },
   data() {
     return {

package/src/components/table/elements/VcColumnHeader/VcColumnHeader.vue

@@ -110,9 +110,9 @@ export default {
 .VcColumnHeader {
   height: var(--size-value9);
   padding: 0 var(--size-value4);
-  color: var(--gray-darken-4);
+  color: var(--gray-darken-5);
   font-size: 10px;
-  font-weight: var(--font-weight-medium2);
+  font-weight: var(--font-weight-large);
   background-color: var(--gray-lighten-4);
   border-bottom: var(--gray-lighten-2) solid 1px;
 

package/src/components/table/elements/VcDataTable/VcDataTable.vue

@@ -244,6 +244,7 @@ export default {
     position: sticky;
     padding: var(--size-value3) 0;
     margin-bottom: var(--size-value3);
+    margin-left: var(--size-value1);
   }
 
   &--header {

package/src/components/table/elements/VcTableItem/VcTableItem.vue

@@ -23,6 +23,8 @@
                   :lines="1"
                   hidden-item-display="chip"
                   :data-qa="`${dataQa}-tags`"
+                  :max-chip-width="116"
+                  :min-chip-width="20"
                   @onHiddenChipsChange="newValue => hiddenChips = newValue"/>
       <VcButton ghost v-else-if="type === 'tag' && showAddTagButton" :data-qa="`${dataQa}-addTagsButton`"
                 @click="$emit('onClickToAddTag', $props)">