Skip to content

Commit edd98b2

Browse files
braddialpadbraddialpad
authored
feat(components): DLT-3157 align critical/positive prop values and CSS class names (#1177)
1 parent e1ea074 commit edd98b2

116 files changed

Lines changed: 800 additions & 659 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.mcp.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"mcpServers": {
33
"dialtone": {
4-
"command": "dialtone-mcp-server"
4+
"command": "node",
5+
"args": ["./packages/dialtone-mcp-server/build/index.js"]
56
}
67
}
78
}

‎apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/constants.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,6 @@ export const SUBCATEGORY_MAP = {
4040
size: ['radius', 'border'],
4141
};
4242

43-
export const DEPRECATED_PATTERNS = [
44-
'typography-headline-',
45-
'typography-body-',
46-
'typography-label-',
47-
'typography-helper-',
48-
'typography-code-',
49-
];
50-
5143
export const getTokensStructure = () => ({
5244
color: {
5345
foreground: {

‎apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/utilities.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import tokensJson from '@dialpad/dialtone-tokens/dist/doc.json';
2-
import { CATEGORY_MAP, SUBCATEGORY_MAP, FORMAT_MAP, MODES, THEMES, DEPRECATED_PATTERNS, getTokensStructure } from './constants';
2+
import { CATEGORY_MAP, SUBCATEGORY_MAP, FORMAT_MAP, MODES, THEMES, getTokensStructure } from './constants';
33

44
/**
55
Process the file tokensJson and fill processedTokens with the data we want to show.
@@ -76,9 +76,8 @@ const addTokensToCategories = (token, format, structure) => {
7676
const [key, value] = token;
7777
if (!value[FORMAT_MAP[format]] || !value[FORMAT_MAP.CSS] || isBaseToken(key)) return;
7878

79-
const { name, value: tokenValue, description, keywords, isCompositionToken } = value[FORMAT_MAP[format]];
79+
const { name, value: tokenValue, description, keywords, isCompositionToken, deprecated } = value[FORMAT_MAP[format]];
8080
const { value: exampleValue, name: exampleName } = value[FORMAT_MAP.CSS];
81-
const deprecated = isDeprecatedToken(exampleName);
8281
const displayToken = { exampleValue, exampleName, name, tokenValue, description, keywords, deprecated };
8382

8483
if (isCompositionToken) {
@@ -215,7 +214,3 @@ const addTokenToSubcategory = (token, category, subcategory, structure) => {
215214
};
216215

217216
const isBaseToken = (name) => name.endsWith('base') || name.endsWith('root');
218-
219-
const isDeprecatedToken = (name) => {
220-
return DEPRECATED_PATTERNS.some(pattern => name.includes(pattern));
221-
};

‎apps/dialtone-documentation/docs/components/badge.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ keywords: ["label","tag","indicator","count","d-badge","DtBadge","dt-badge"]
8383
<td>Used to convey general information that isn't critical or requires action on the user's part.</td>
8484
</tr>
8585
<tr>
86-
<th class="d-ta-left">Success</th>
86+
<th class="d-ta-left">Positive</th>
8787
<td>
88-
<dt-badge type="success" text="Label"></dt-badge>
88+
<dt-badge type="positive" text="Label"></dt-badge>
8989
</td>
9090
<td>
91-
<dt-badge kind="count" type="success" text="3"></dt-badge>
91+
<dt-badge kind="count" type="positive" text="3"></dt-badge>
9292
</td>
9393
<td>Accompanying a successful or otherwise positive action or message</td>
9494
</tr>
@@ -136,14 +136,14 @@ keywords: ["label","tag","indicator","count","d-badge","DtBadge","dt-badge"]
136136
```vue code-only
137137
<dt-badge kind="label" text="Label" />
138138
<dt-badge type="info" kind="label" text="Label" />
139-
<dt-badge type="success" kind="label" text="Label" />
139+
<dt-badge type="positive" kind="label" text="Label" />
140140
<dt-badge type="warning" kind="label" text="Label" />
141141
<dt-badge type="critical" kind="label" text="Label" />
142142
<dt-badge type="bulletin" kind="label" text="Label" />
143143
<dt-badge type="ai" text="Label" kind="label" />
144144
<dt-badge type="default" text="1" kind="count" />
145145
<dt-badge type="info" text="2" kind="count" />
146-
<dt-badge type="success" text="3" kind="count" />
146+
<dt-badge type="positive" text="3" kind="count" />
147147
<dt-badge type="warning" text="4" kind="count" />
148148
<dt-badge type="critical" text="5" kind="count" />
149149
<dt-badge type="bulletin" text="6" kind="count" />
@@ -156,12 +156,12 @@ keywords: ["label","tag","indicator","count","d-badge","DtBadge","dt-badge"]
156156
<dt-stack direction="row" gap="100">
157157
<dt-badge text="Label" outlined />
158158
<dt-badge text="Label" type="info" outlined />
159-
<dt-badge text="Label" type="success" outlined />
159+
<dt-badge text="Label" type="positive" outlined />
160160
<dt-badge text="Label" type="warning" outlined />
161161
<dt-badge text="Label" type="critical" outlined />
162162
<dt-badge text="1" kind="count" outlined />
163163
<dt-badge text="1" type="info" kind="count" outlined />
164-
<dt-badge text="1" type="success" kind="count" outlined />
164+
<dt-badge text="1" type="positive" kind="count" outlined />
165165
<dt-badge text="1" type="warning" kind="count" outlined />
166166
<dt-badge text="1" type="critical" kind="count" outlined />
167167
</dt-stack>
@@ -318,7 +318,7 @@ Decorative badges label and classify items for quick recognition.
318318
<dt-badge text="Overdue" type="warning" />
319319
</dt-stack>
320320
<dt-stack direction="row" gap="100">
321-
<dt-badge text="Resolved" type="success" />
321+
<dt-badge text="Resolved" type="positive" />
322322
</dt-stack>
323323
<dt-stack direction="row" gap="100">
324324
<dt-badge text="Recording" type="critical">
@@ -345,7 +345,7 @@ Decorative badges label and classify items for quick recognition.
345345
```vue demo-only
346346
<dt-stack gap="200">
347347
<dt-stack direction="row" gap="100">
348-
<dt-badge kind="count" type="success" text="5%">
348+
<dt-badge kind="count" type="positive" text="5%">
349349
<template #startIcon="{ iconSize }">
350350
<dt-icon-arrow-up :size="iconSize" />
351351
</template>

‎apps/dialtone-documentation/docs/components/banner.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ Banners are a type of notice and so you can use the following [Notice](notice.md
5959

6060
```vue code-only
6161
<dt-banner kind="base" title="Optional banner title"> Message body </dt-banner>
62-
<dt-banner kind="error" title="Optional banner title"> Message body </dt-banner>
62+
<dt-banner kind="critical" title="Optional banner title"> Message body </dt-banner>
6363
<dt-banner kind="info" title="Optional banner title"> Message body </dt-banner>
64-
<dt-banner kind="success" title="Optional banner title"> Message body </dt-banner>
64+
<dt-banner kind="positive" title="Optional banner title"> Message body </dt-banner>
6565
<dt-banner kind="warning" title="Optional banner title"> Message body </dt-banner>
6666
<dt-banner background-image="{$background-image}" background-size="contain"> Message body </dt-banner>
6767
<dt-banner pinned="true" kind="warning" title="Optional banner title"> Message body </dt-banner>
@@ -120,9 +120,9 @@ import { accessible } from '@data/banner.json';
120120

121121
const bannerOptions = [
122122
{ value: 'base', label: 'Base' },
123-
{ value: 'error', label: 'Error' },
123+
{ value: 'critical', label: 'Critical' },
124124
{ value: 'info', label: 'Info' },
125-
{ value: 'success', label: 'Success' },
125+
{ value: 'positive', label: 'Positive' },
126126
{ value: 'warning', label: 'Warning' },
127127
];
128128

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,16 @@ The base button should be the go-to button for most of your needs. When in doubt
7474
</dt-stack>
7575
```
7676

77-
### Danger
77+
### Critical
7878

79-
The danger button style is used to communicate critical or destructive actions such as deleting content, accounts, or canceling services.
79+
The critical button style is used to communicate critical or destructive actions such as deleting content, accounts, or canceling services.
8080

8181
```vue demo
8282
<!-- @wrapper -->
8383
<dt-stack direction="row" gap="100">
84-
<dt-button kind="danger"> Place Call </dt-button>
85-
<dt-button kind="danger" importance="outlined"> Place Call </dt-button>
86-
<dt-button kind="danger" importance="clear"> Place Call </dt-button>
84+
<dt-button kind="critical"> Place Call </dt-button>
85+
<dt-button kind="critical" importance="outlined"> Place Call </dt-button>
86+
<dt-button kind="critical" importance="clear"> Place Call </dt-button>
8787
</dt-stack>
8888
```
8989

@@ -126,9 +126,9 @@ This style's use should be rare. When in doubt, use the [default button style](#
126126
<dt-button :disabled="isDisabled" importance="clear"> Place Call </dt-button>
127127
</dt-stack>
128128
<dt-stack gap="100" :direction="{ 'default': 'column', 'md': 'row' }">
129-
<dt-button :disabled="isDisabled" kind="danger"> Place Call </dt-button>
130-
<dt-button :disabled="isDisabled" kind="danger" importance="outlined"> Place Call </dt-button>
131-
<dt-button :disabled="isDisabled" kind="danger" importance="clear"> Place Call </dt-button>
129+
<dt-button :disabled="isDisabled" kind="critical"> Place Call </dt-button>
130+
<dt-button :disabled="isDisabled" kind="critical" importance="outlined"> Place Call </dt-button>
131+
<dt-button :disabled="isDisabled" kind="critical" importance="clear"> Place Call </dt-button>
132132
</dt-stack>
133133
<dt-stack gap="100" :direction="{ 'default': 'column', 'md': 'row' }">
134134
<dt-button :disabled="isDisabled" kind="positive">Place Call</dt-button>
@@ -175,7 +175,7 @@ Buttons can be set to active state using the `active` prop or `.d-btn--active` D
175175
>
176176
<dt-button importance="clear" active>Place Call</dt-button>
177177
<dt-button active>Place Call</dt-button>
178-
<dt-button kind="danger" importance="clear" active>Place Call</dt-button>
178+
<dt-button kind="critical" importance="clear" active>Place Call</dt-button>
179179
<dt-button kind="positive" importance="clear" active>Place Call</dt-button>
180180
<dt-button kind="muted" active>Place Call</dt-button>
181181
</dt-stack>
@@ -193,8 +193,8 @@ Buttons can be styled to match the appearance of a [DtLink](link.md) in situatio
193193
>
194194
<dt-button link>Place Call</dt-button>
195195
<dt-button link linkKind="warning">Place Call</dt-button>
196-
<dt-button link linkKind="danger">Place Call</dt-button>
197-
<dt-button link linkKind="success">Place Call</dt-button>
196+
<dt-button link linkKind="critical">Place Call</dt-button>
197+
<dt-button link linkKind="positive">Place Call</dt-button>
198198
<dt-button link linkKind="muted">Place Call</dt-button>
199199
<dt-button link disabled>Place Call</dt-button>
200200
</dt-stack>
@@ -211,7 +211,7 @@ This inverts the underline behavior. With `underline="false"`, the link will not
211211
:direction="{ 'default': 'column', 'md': 'row' }"
212212
>
213213
<dt-button link :underline="false">Place Call</dt-button>
214-
<dt-button link linkKind="danger" :underline="false">Place Call</dt-button>
214+
<dt-button link linkKind="critical" :underline="false">Place Call</dt-button>
215215
</dt-stack>
216216
```
217217

@@ -240,9 +240,9 @@ Use the [v-dt-mode directive](mode-island.html#inverting) in place of `kind="inv
240240
<dt-button v-dt-mode:invert="isInverted" importance="clear"> Place Call </dt-button>
241241
</dt-stack>
242242
<dt-stack gap="100" :direction="{ 'default': 'column', 'md': 'row' }">
243-
<dt-button v-dt-mode:invert="isInverted" kind="danger"> Place Call </dt-button>
244-
<dt-button v-dt-mode:invert="isInverted" kind="danger" importance="outlined"> Place Call </dt-button>
245-
<dt-button v-dt-mode:invert="isInverted" kind="danger" importance="clear"> Place Call </dt-button>
243+
<dt-button v-dt-mode:invert="isInverted" kind="critical"> Place Call </dt-button>
244+
<dt-button v-dt-mode:invert="isInverted" kind="critical" importance="outlined"> Place Call </dt-button>
245+
<dt-button v-dt-mode:invert="isInverted" kind="critical" importance="clear"> Place Call </dt-button>
246246
</dt-stack>
247247
<dt-stack gap="100" :direction="{ 'default': 'column', 'md': 'row' }">
248248
<dt-button v-dt-mode:invert="isInverted" kind="positive">Place Call</dt-button>
@@ -510,23 +510,23 @@ Icon-only buttons are commonly used for toggling actions, navigation, or closing
510510
</dt-button>
511511
</dt-stack>
512512
<dt-stack direction="row" gap="100">
513-
<dt-button v-dt-tooltip="`Tooltip`" kind="danger" importance="clear">
513+
<dt-button v-dt-tooltip="`Tooltip`" kind="critical" importance="clear">
514514
<template #startIcon="{ iconSize }">
515515
<dt-icon
516516
name="phone"
517517
:size="iconSize"
518518
/>
519519
</template>
520520
</dt-button>
521-
<dt-button v-dt-tooltip="`Tooltip`" kind="danger" importance="outlined">
521+
<dt-button v-dt-tooltip="`Tooltip`" kind="critical" importance="outlined">
522522
<template #startIcon="{ iconSize }">
523523
<dt-icon
524524
name="phone"
525525
:size="iconSize"
526526
/>
527527
</template>
528528
</dt-button>
529-
<dt-button v-dt-tooltip="`Tooltip`" kind="danger">
529+
<dt-button v-dt-tooltip="`Tooltip`" kind="critical">
530530
<template #startIcon="{ iconSize }">
531531
<dt-icon
532532
name="phone"
@@ -593,23 +593,23 @@ The following styles are available as a circle shape.
593593
</dt-button>
594594
</dt-stack>
595595
<dt-stack direction="row" gap="100">
596-
<dt-button v-dt-tooltip="`Tooltip`" circle kind="danger" importance="clear">
596+
<dt-button v-dt-tooltip="`Tooltip`" circle kind="critical" importance="clear">
597597
<template #startIcon="{ iconSize }">
598598
<dt-icon
599599
name="phone"
600600
:size="iconSize"
601601
/>
602602
</template>
603603
</dt-button>
604-
<dt-button v-dt-tooltip="`Tooltip`" circle kind="danger" importance="outlined">
604+
<dt-button v-dt-tooltip="`Tooltip`" circle kind="critical" importance="outlined">
605605
<template #startIcon="{ iconSize }">
606606
<dt-icon
607607
name="phone"
608608
:size="iconSize"
609609
/>
610610
</template>
611611
</dt-button>
612-
<dt-button v-dt-tooltip="`Tooltip`" circle kind="danger">
612+
<dt-button v-dt-tooltip="`Tooltip`" circle kind="critical">
613613
<template #startIcon="{ iconSize }">
614614
<dt-icon
615615
name="phone"

‎apps/dialtone-documentation/docs/components/checkbox-group.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ Checkbox Groups are typically paired with a legend which identifies the group. I
7272
<dt-stack gap="200">
7373
<div>
7474
<dt-checkbox-group
75-
name="checkbox-group-with-success-message"
75+
name="checkbox-group-with-positive-message"
7676
legend="Fruits"
77-
:messages='[{"message":"Success validation message","type":"success"}]'
77+
:messages='[{"message":"Positive validation message","type":"positive"}]'
7878
>
7979
<dt-checkbox value="apple"><span>Apple</span></dt-checkbox>
8080
<dt-checkbox value="banana"><span>Banana</span></dt-checkbox>
@@ -94,9 +94,9 @@ Checkbox Groups are typically paired with a legend which identifies the group. I
9494
</div>
9595
<div>
9696
<dt-checkbox-group
97-
name="checkbox-group-with-error-message"
97+
name="checkbox-group-with-critical-message"
9898
legend="Fruits"
99-
:messages='[{"message":"Error validation message","type":"error"}]'
99+
:messages='[{"message":"Critical validation message","type":"critical"}]'
100100
>
101101
<dt-checkbox value="apple"><span>Apple</span></dt-checkbox>
102102
<dt-checkbox value="banana"><span>Banana</span></dt-checkbox>
@@ -108,8 +108,8 @@ Checkbox Groups are typically paired with a legend which identifies the group. I
108108
<dt-checkbox-group
109109
name="fruits-checkbox-group"
110110
legend="Fruits"
111-
validation-state="success"
112-
:messages="[{ message: `Success validation message.`, type: `success` }]"
111+
validation-state="positive"
112+
:messages="[{ message: `Positive validation message.`, type: `positive` }]"
113113
>
114114
<dt-checkbox value="apple"><span>Apple</span></dt-checkbox>
115115
<dt-checkbox value="banana"><span>Banana</span></dt-checkbox>
@@ -128,8 +128,8 @@ Checkbox Groups are typically paired with a legend which identifies the group. I
128128
<dt-checkbox-group
129129
name="fruits-checkbox-group"
130130
legend="Fruits"
131-
validation-state="error"
132-
:messages="[{ message: `Error validation message.`, type: `error` }]"
131+
validation-state="critical"
132+
:messages="[{ message: `Critical validation message.`, type: `critical` }]"
133133
>
134134
<dt-checkbox value="apple"><span>Apple</span></dt-checkbox>
135135
<dt-checkbox value="banana"><span>Banana</span></dt-checkbox>
@@ -143,7 +143,7 @@ Checkbox Groups are typically paired with a legend which identifies the group. I
143143
<dt-checkbox-group
144144
name="my-group-name"
145145
legend="My Legend"
146-
:messages="[{ message: 'My Success Message', type: `success` }]"
146+
:messages="[{ message: 'My Positive Message', type: `positive` }]"
147147
:show-messages="false"
148148
>
149149
<dt-checkbox

‎apps/dialtone-documentation/docs/components/checkbox.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -168,15 +168,15 @@ Checkboxes are an easily understandable way to indicate that users can select on
168168
name="option2"
169169
value="Value"
170170
label="Block callers not already in contacts list"
171-
validation-state="error"
172-
:messages="[{ message: `You get enough calls. Free up some of your time.`, type: `error` }]"
171+
validation-state="critical"
172+
:messages="[{ message: `You get enough calls. Free up some of your time.`, type: `critical` }]"
173173
/>
174174
<dt-checkbox
175175
name="option3"
176176
value="Value"
177177
label="Block callers with a high spam score"
178-
validation-state="success"
179-
:messages="[{ message: `We will only let the legitimate callers through to bother you.`, type: `success` }]"
178+
validation-state="positive"
179+
:messages="[{ message: `We will only let the legitimate callers through to bother you.`, type: `positive` }]"
180180
/>
181181
</dt-checkbox-group>
182182
```

‎apps/dialtone-documentation/docs/components/combobox-multi-select.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Adds validation for max selection. Make sure to provide the following props:
9393
description="Select up to 2 options."
9494
:selected-items="maxSelectedItems"
9595
:max-selected="2"
96-
:max-selected-message="[{ message: 'More than 2 selected', type: 'error' }]"
96+
:max-selected-message="[{ message: 'More than 2 selected', type: 'critical' }]"
9797
@input="onMaxSelectInput"
9898
@select="onMaxSelectSelect"
9999
@remove="onMaxSelectRemove"
@@ -123,7 +123,7 @@ Adds validation for max selection. Make sure to provide the following props:
123123
description="Select up to 2 options."
124124
:selected-items="selectedItems"
125125
:max-selected="2"
126-
:max-selected-message="[{ message: 'More than 2 selected', type: 'error' }]"
126+
:max-selected-message="[{ message: 'More than 2 selected', type: 'critical' }]"
127127
@input="onInput"
128128
@select="onSelect"
129129
@remove="onRemove"

0 commit comments

Comments
 (0)