fix: add customized css to badge label and contact info (#1076)

* fix: add customized css to badge label and contact info * Add scope to contact info css and add labelClass prop to stories page
dialpad · Jul 20, 2023 · 6e8b374 · 6e8b374
1 parent 7e27e9c
commit 6e8b374
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/components/badge/badge.stories.js b/components/badge/badge.stories.js
@@ -72,6 +72,10 @@ export const argTypesData = {
     options: [undefined, ...Object.keys(BADGE_DECORATION_MODIFIERS)],
     // TODO: Find a way to add conditions on more than one argument
   },
+
+  labelClass: {
+    description: 'Pass through classes. Used to customize the label container',
+  },
 };
 
 // Story Collection

diff --git a/components/badge/badge.vue b/components/badge/badge.vue
@@ -21,7 +21,7 @@
         size="200"
       />
     </span>
-    <span class="d-badge__label">
+    <span :class="['d-badge__label', labelClass]">
       <!-- @slot Slot for badge content, defaults to text prop -->
       <slot>
         {{ text }}
@@ -115,6 +115,14 @@ export default {
       default: undefined,
       validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),
     },
+
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
   },
 
   data () {

diff --git a/components/badge/badge_default.story.vue b/components/badge/badge_default.story.vue
@@ -6,6 +6,7 @@
     :decoration="decoration"
     :icon-left="iconLeft"
     :icon-right="iconRight"
+    :label-class="labelClass"
   >
     <template v-if="defaultSlot">
       {{ defaultSlot }}

diff --git a/recipes/list_items/contact_info/contact_info.vue b/recipes/list_items/contact_info/contact_info.vue
@@ -4,6 +4,7 @@
     :role="role"
     element-type="div"
     data-qa="contact-info"
+    class="dt-contact-info"
   >
     <template #left>
       <div
@@ -219,3 +220,25 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.dt-contact-info .dt-item-layout--content {
+  /*
+  DP-74536: Add `min-width` to make the width of "contact info" adjustable.
+  */
+  min-width: var(--space-825);
+}
+.dt-contact-info .dt-item-layout--left {
+  /*
+  DP-74536: To make 'Avatar' in fixed position when resizing the window.
+  */
+  min-width: var(--space-650);
+  justify-content: flex-start;
+}
+.dt-contact-info .dt-item-layout--right {
+  /*
+  DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
+  */
+  min-width: 0;
+}
+</style>