Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Francis Rupert (francisrupert) wants to merge 38 commits into
base: next
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
3139bfc
feat(tokens,css,link,text,breadcrumbs,input-group): NO-JIRA tokens, C…
francisrupert Mar 3, 2026
37dd9e7
Merge remote-tracking branch 'origin/next' into visual-refresh/founda…
francisrupert Mar 5, 2026
12e3e22
expose deprecated props and slots in deprecated table category
francisrupert Mar 6, 2026
1a44dcb
remove storybook mdx file use auto docs instead
francisrupert Mar 6, 2026
796e9e0
update label slot structure and active filter display logic
francisrupert Mar 6, 2026
bb23407
update label slot structure and active filter display logic
francisrupert Mar 6, 2026
624214a
remove deprecated props from filter pill stories and tests, expand va…
francisrupert Mar 6, 2026
635f481
.
francisrupert Mar 6, 2026
ccd9b77
add filter pill custom label documentation and examples
francisrupert Mar 6, 2026
7010f72
add dropdown mode to filter pill with keyboard navigation and single-…
francisrupert Mar 6, 2026
bd44166
add keyboard navigation to open filter pill popover and update dropdo…
francisrupert Mar 7, 2026
962427a
add content slot implementation to dropdown filter pill variant story
francisrupert Mar 7, 2026
d482bb8
refactor filter pill label layout with separate overflow display and …
francisrupert Mar 7, 2026
2b4bdc4
add deferred selection mode prop
francisrupert Mar 7, 2026
2578e04
add read-only mode styling
francisrupert Mar 7, 2026
ae2ed02
add read-only prop to filter pill with tooltip and interaction blocking
francisrupert Mar 7, 2026
0849622
remove redundant read-only mode tests and consolidate assertions
francisrupert Mar 7, 2026
fbcf686
consolidate filter pill selected state hover styles and add base butt…
francisrupert Mar 7, 2026
7aac08c
disable overlay and interactions when filter pill is in read-only mode
francisrupert Mar 7, 2026
171fb45
filter pill docs with examples and reorganized sections
francisrupert Mar 7, 2026
b12b636
examples with reset button
francisrupert Mar 7, 2026
b0fb958
update filter pill documentation examples with moment and channel data
francisrupert Mar 7, 2026
f526656
.
francisrupert Mar 7, 2026
8658be7
.
francisrupert Mar 7, 2026
52a18ef
start icon example
francisrupert Mar 7, 2026
81ef3fe
hide chevron icon in read-only mode
francisrupert Mar 8, 2026
11bbc3a
allow custom tooltip text in read-only mode
francisrupert Mar 8, 2026
7829c0f
dropdown example
francisrupert Mar 8, 2026
351dc1f
Merge branch 'next' into filter-pill-refresh
francisrupert Mar 10, 2026
62f73a4
stupid duplicate
francisrupert Mar 10, 2026
0b7971c
whoops
francisrupert Mar 10, 2026
44247da
add overlay customization slots and class prop
francisrupert Mar 11, 2026
3c2cc4d
overlay customization
francisrupert Mar 11, 2026
8368814
overlay customization
francisrupert Mar 11, 2026
59c8f97
update filter pill documentation and prop descriptions
francisrupert Mar 11, 2026
5ad8474
add accessibility tests
francisrupert Mar 11, 2026
b27e5f3
nit
francisrupert Mar 11, 2026
6af8e07
moving outside css `@layer` since it's overriding third party style
francisrupert Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 64 additions & 16 deletions apps/dialtone-documentation/docs/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,10 +335,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
Expand All @@ -355,9 +354,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
Expand Down Expand Up @@ -475,31 +473,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 />

Expand Down Expand Up @@ -1289,7 +1337,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>
Expand All @@ -1303,7 +1351,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>
Expand Down
Loading
Loading