feat(filter-pill): DLT-2941 DtFilterPill improvements (#1110)

Author: francisrupert

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less

@@ -481,11 +481,12 @@ a.header-anchor {
 }
 
 :where(:is(.d-docsite--paragraph, .d-docsite--unordered-list, .d-docsite--ordered-list, .d-docsite--list-element, .d-docsite--preview-header) > code) {
-	padding: var(--dt-size-200) var(--dt-size-300);
-	color: var(--dt-color-blue-800);
-	border-radius: var(--dt-size-200);
-	border: 1px solid var(--dt-color-border-subtle);
-	user-select: all;
+  font: var(--dt-text-code-sm);
+  padding: var(--dt-size-200) var(--dt-size-300);
+  color: var(--dt-color-blue-800);
+  border-radius: var(--dt-size-200);
+  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+  user-select: all;
 }
 
 .d-docsite--preview-header {

apps/dialtone-documentation/docs/components/button.md

@@ -377,10 +377,9 @@ Pass `href` to render as an `<a>` element. Use `target="_blank"` and `rel="noope
     kind="muted"
     importance="outlined"
     size="sm"
-    icon-position="right"
     ref="hrefExample1"
   >
-    <template #icon="{ iconSize }">
+    <template #endIcon="{ iconSize }">
       <dt-icon name="external-link" :size="iconSize" />
     </template>
     Dialtone
@@ -397,9 +396,8 @@ vueCode='
   kind="muted"
   importance="outlined"
   size="sm"
-  icon-position="right"
 >
-  <template #icon="{ iconSize }">
+  <template #endIcon="{ iconSize }">
     <dt-icon name="external-link" :size="iconSize" />
   </template>
   Dialtone
@@ -483,31 +481,81 @@ The default button size is `md`, but does not need to be explicitly specified.
     ref="sizesExample"
   >
     <span>
-      <dt-button size="xs"> Place Call </dt-button>
+      <dt-button size="xs" kind="muted" importance="outlined">
+        Call
+        <template #startIcon="{ iconSize }">
+          <dt-icon name="phone" :size="iconSize" />
+        </template>
+      </dt-button>
     </span>
     <span>
-      <dt-button size="sm"> Place Call </dt-button>
+      <dt-button size="sm" kind="muted" importance="outlined">
+        Call
+        <template #startIcon="{ iconSize }">
+          <dt-icon name="phone" :size="iconSize" />
+        </template>
+      </dt-button>
     </span>
     <span>
-      <dt-button> Place Call </dt-button>
+      <dt-button kind="muted" importance="outlined">
+        Call
+        <template #startIcon="{ iconSize }">
+          <dt-icon name="phone" :size="iconSize" />
+        </template>
+      </dt-button>
     </span>
     <span>
-      <dt-button size="lg"> Place Call </dt-button>
+      <dt-button size="lg" kind="muted" importance="outlined">
+        Call
+        <template #startIcon="{ iconSize }">
+          <dt-icon name="phone" :size="iconSize" />
+        </template>
+      </dt-button>
     </span>
     <span>
-      <dt-button size="xl"> Place Call </dt-button>
+      <dt-button size="xl" kind="muted" importance="outlined">
+        Call
+        <template #startIcon="{ iconSize }">
+          <dt-icon name="phone" :size="iconSize" />
+        </template>
+      </dt-button>
     </span>
   </dt-stack>
 </code-well-header>
 
 <code-example-tabs
 :htmlCode='() => $refs.sizesExample'
 vueCode='
-<dt-button size="xs"> Place Call </dt-button>
-<dt-button size="sm"> Place Call </dt-button>
-<dt-button> Place Call </dt-button>
-<dt-button size="lg"> Place Call </dt-button>
-<dt-button size="xl"> Place Call </dt-button>
+<dt-button size="xs">
+  Place Call
+  <template #startIcon="{ iconSize }">
+    <dt-icon name="phone" :size="iconSize" />
+  </template>
+</dt-button>
+<dt-button size="sm">
+  Place Call
+  <template #startIcon="{ iconSize }">
+    <dt-icon name="phone" :size="iconSize" />
+  </template>
+</dt-button>
+<dt-button>
+  Place Call
+  <template #startIcon="{ iconSize }">
+    <dt-icon name="phone" :size="iconSize" />
+  </template>
+</dt-button>
+<dt-button size="lg">
+  Place Call
+  <template #startIcon="{ iconSize }">
+    <dt-icon name="phone" :size="iconSize" />
+  </template>
+</dt-button>
+<dt-button size="xl">
+  Place Call
+  <template #startIcon="{ iconSize }">
+    <dt-icon name="phone" :size="iconSize" />
+  </template>
+</dt-button>
 '
 showHtmlWarning />
 
@@ -1201,7 +1249,7 @@ showHtmlWarning />
 <code-well-header>
   <dt-button size="sm" kind="muted" importance="outlined" trailing-class="d-pr2" ref="trailingExample">
     Copy
-    <template #icon="{ iconSize }">
+    <template #startIcon="{ iconSize }">
       <dt-icon name="copy" :size="iconSize" />
     </template>
     <template #trailing>
@@ -1215,7 +1263,7 @@ showHtmlWarning />
 vueCode='
 <dt-button size="sm" kind="muted" importance="outlined" trailing-class="d-pr2">
   Copy
-  <template #icon="{ iconSize }">
+  <template #startIcon="{ iconSize }">
     <dt-icon name="copy" :size="iconSize" />
   </template>
   <template #trailing>