@ceed/cds 1.34.0 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordions/Accordions.d.ts +1 -0
- package/dist/components/Alert/Alert.d.ts +5 -5
- package/dist/components/Autocomplete/Autocomplete.d.ts +2 -2
- package/dist/components/Avatar/Avatar.d.ts +7 -17
- package/dist/components/Box/Box.d.ts +1 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +6 -5
- package/dist/components/Button/Button.d.ts +3 -2
- package/dist/components/Calendar/Calendar.d.ts +1 -0
- package/dist/components/Card/Card.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/components/Chip/Chip.d.ts +1 -0
- package/dist/components/Container/Container.d.ts +6 -1
- package/dist/components/CurrencyInput/CurrencyInput.d.ts +1 -1
- package/dist/components/DialogActions/DialogActions.d.ts +1 -0
- package/dist/components/DialogContent/DialogContent.d.ts +1 -0
- package/dist/components/DialogFrame/DialogFrame.d.ts +1 -1
- package/dist/components/DialogTitle/DialogTitle.d.ts +1 -0
- package/dist/components/Divider/Divider.d.ts +1 -0
- package/dist/components/Drawer/Drawer.d.ts +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +28 -1
- package/dist/components/FormControl/FormControl.d.ts +1 -0
- package/dist/components/FormHelperText/FormHelperText.d.ts +1 -0
- package/dist/components/FormLabel/FormLabel.d.ts +1 -0
- package/dist/components/Grid/Grid.d.ts +1 -0
- package/dist/components/IconButton/IconButton.d.ts +3 -2
- package/dist/components/IconMenuButton/IconMenuButton.d.ts +7 -6
- package/dist/components/InfoSign/InfoSign.d.ts +3 -2
- package/dist/components/Input/Input.d.ts +8 -22
- package/dist/components/InsetDrawer/InsetDrawer.d.ts +1 -0
- package/dist/components/Markdown/Markdown.d.ts +9 -24
- package/dist/components/Menu/Menu.d.ts +2 -1
- package/dist/components/MenuButton/MenuButton.d.ts +10 -8
- package/dist/components/Modal/Modal.d.ts +4 -2
- package/dist/components/NavigationGroup/NavigationGroup.d.ts +3 -2
- package/dist/components/NavigationItem/NavigationItem.d.ts +3 -2
- package/dist/components/Navigator/Navigator.d.ts +5 -4
- package/dist/components/Pagination/Pagination.d.ts +1 -1
- package/dist/components/Radio/Radio.d.ts +1 -0
- package/dist/components/RadioList/RadioList.d.ts +3 -2
- package/dist/components/SearchBar/SearchBar.d.ts +6 -5
- package/dist/components/SearchBar/index.d.ts +3 -2
- package/dist/components/Select/Select.d.ts +12 -10
- package/dist/components/Sheet/Sheet.d.ts +1 -0
- package/dist/components/Stack/Stack.d.ts +1 -0
- package/dist/components/Stepper/Stepper.d.ts +2 -1
- package/dist/components/Switch/Switch.d.ts +1 -0
- package/dist/components/Table/Table.d.ts +7 -5
- package/dist/components/Tabs/Tabs.d.ts +1 -0
- package/dist/components/Textarea/Textarea.d.ts +8 -20
- package/dist/components/Tooltip/Tooltip.d.ts +1 -0
- package/dist/components/Typography/Typography.d.ts +1 -0
- package/dist/components/Uploader/Uploader.d.ts +18 -17
- package/dist/components/data-display/Avatar.md +60 -72
- package/dist/components/data-display/Badge.md +197 -181
- package/dist/components/data-display/Chip.md +164 -142
- package/dist/components/data-display/DataTable.md +843 -338
- package/dist/components/data-display/InfoSign.md +1 -3
- package/dist/components/data-display/Markdown.md +93 -125
- package/dist/components/data-display/Table.md +1453 -1007
- package/dist/components/data-display/Typography.md +113 -116
- package/dist/components/feedback/Alert.md +80 -86
- package/dist/components/feedback/CircularProgress.md +32 -36
- package/dist/components/feedback/Dialog.md +25 -17
- package/dist/components/feedback/Modal.md +296 -264
- package/dist/components/feedback/Skeleton.md +125 -89
- package/dist/components/index.d.ts +63 -4
- package/dist/components/inputs/Autocomplete.md +191 -95
- package/dist/components/inputs/Button.md +83 -83
- package/dist/components/inputs/ButtonGroup.md +195 -185
- package/dist/components/inputs/Calendar.md +25 -28
- package/dist/components/inputs/Checkbox.md +11 -29
- package/dist/components/inputs/CurrencyInput.md +4 -4
- package/dist/components/inputs/DatePicker.md +229 -110
- package/dist/components/inputs/DateRangePicker.md +248 -137
- package/dist/components/inputs/FilterableCheckboxGroup.md +115 -55
- package/dist/components/inputs/FormControl.md +75 -69
- package/dist/components/inputs/IconButton.md +229 -205
- package/dist/components/inputs/Input.md +131 -98
- package/dist/components/inputs/MonthPicker.md +186 -84
- package/dist/components/inputs/MonthRangePicker.md +73 -49
- package/dist/components/inputs/PercentageInput.md +15 -31
- package/dist/components/inputs/RadioButton.md +320 -256
- package/dist/components/inputs/RadioList.md +66 -50
- package/dist/components/inputs/RadioTileGroup.md +287 -170
- package/dist/components/inputs/SearchBar.md +154 -55
- package/dist/components/inputs/Select.md +106 -95
- package/dist/components/inputs/Slider.md +153 -102
- package/dist/components/inputs/Switch.md +193 -138
- package/dist/components/inputs/Textarea.md +15 -20
- package/dist/components/inputs/Uploader/Uploader.md +68 -39
- package/dist/components/layout/Box.md +841 -662
- package/dist/components/layout/Container.md +3 -11
- package/dist/components/layout/Grid.md +480 -394
- package/dist/components/layout/Stack.md +739 -566
- package/dist/components/navigation/Breadcrumbs.md +4 -4
- package/dist/components/navigation/Drawer.md +34 -25
- package/dist/components/navigation/Dropdown.md +745 -408
- package/dist/components/navigation/IconMenuButton.md +14 -6
- package/dist/components/navigation/InsetDrawer.md +8 -13
- package/dist/components/navigation/Link.md +1 -2
- package/dist/components/navigation/Menu.md +623 -502
- package/dist/components/navigation/MenuButton.md +18 -10
- package/dist/components/navigation/NavigationGroup.md +19 -50
- package/dist/components/navigation/NavigationItem.md +6 -6
- package/dist/components/navigation/Navigator.md +26 -28
- package/dist/components/navigation/Pagination.md +86 -75
- package/dist/components/navigation/Stepper.md +2 -12
- package/dist/components/navigation/Tabs.md +48 -36
- package/dist/components/surfaces/Accordions.md +89 -172
- package/dist/components/surfaces/Card.md +1094 -709
- package/dist/components/surfaces/Divider.md +562 -412
- package/dist/components/surfaces/Sheet.md +700 -518
- package/dist/guides/ThemeProvider.md +8 -8
- package/dist/index.browser.js +4 -4
- package/dist/index.browser.js.map +4 -4
- package/dist/index.cjs +1079 -1052
- package/dist/index.d.ts +2 -1
- package/dist/index.js +725 -690
- package/framer/index.js +1 -1
- package/package.json +32 -35
|
@@ -206,8 +206,12 @@ function ProductCard({ product, onAction }) {
|
|
|
206
206
|
function EditorToolbar({ onAction }) {
|
|
207
207
|
return (
|
|
208
208
|
<Stack direction="row" gap={1} alignItems="center">
|
|
209
|
-
<IconButton onClick={() => onAction('bold')}
|
|
210
|
-
|
|
209
|
+
<IconButton onClick={() => onAction('bold')}>
|
|
210
|
+
<FormatBoldIcon />
|
|
211
|
+
</IconButton>
|
|
212
|
+
<IconButton onClick={() => onAction('italic')}>
|
|
213
|
+
<FormatItalicIcon />
|
|
214
|
+
</IconButton>
|
|
211
215
|
<Divider orientation="vertical" />
|
|
212
216
|
<IconMenuButton
|
|
213
217
|
icon={<MoreHorizIcon />}
|
|
@@ -247,15 +251,19 @@ function EditorToolbar({ onAction }) {
|
|
|
247
251
|
- **Always provide `aria-label`.** Since IconMenuButton has no visible text, screen readers rely entirely on the `aria-label` to announce the button's purpose. Include context when possible.
|
|
248
252
|
|
|
249
253
|
```tsx
|
|
250
|
-
{
|
|
254
|
+
{
|
|
255
|
+
/* ✅ Good: Descriptive, contextual label */
|
|
256
|
+
}
|
|
251
257
|
<IconMenuButton
|
|
252
258
|
icon={<MoreVertIcon />}
|
|
253
259
|
buttonComponentProps={{ 'aria-label': `Actions for ${item.name}` }}
|
|
254
260
|
items={items}
|
|
255
|
-
|
|
261
|
+
/>;
|
|
256
262
|
|
|
257
|
-
{
|
|
258
|
-
|
|
263
|
+
{
|
|
264
|
+
/* ❌ Bad: No accessible name */
|
|
265
|
+
}
|
|
266
|
+
<IconMenuButton icon={<MoreVertIcon />} items={items} />;
|
|
259
267
|
```
|
|
260
268
|
|
|
261
269
|
- **Use familiar icons.** Stick to universally recognized menu icons like MoreVert or MoreHoriz. Unfamiliar icons confuse users about what will happen when they click.
|
|
@@ -29,9 +29,7 @@ function FilterDrawer() {
|
|
|
29
29
|
<Sheet sx={{ p: 2, height: '100%' }}>
|
|
30
30
|
<DialogTitle>Filters</DialogTitle>
|
|
31
31
|
<ModalClose />
|
|
32
|
-
<DialogContent>
|
|
33
|
-
{/* Filter content */}
|
|
34
|
-
</DialogContent>
|
|
32
|
+
<DialogContent>{/* Filter content */}</DialogContent>
|
|
35
33
|
</Sheet>
|
|
36
34
|
</InsetDrawer>
|
|
37
35
|
</>
|
|
@@ -98,9 +96,7 @@ function SettingsDrawer({ open, onClose }) {
|
|
|
98
96
|
</Box>
|
|
99
97
|
<Switch
|
|
100
98
|
checked={settings.notifications}
|
|
101
|
-
onChange={(e) =>
|
|
102
|
-
setSettings({ ...settings, notifications: e.target.checked })
|
|
103
|
-
}
|
|
99
|
+
onChange={(e) => setSettings({ ...settings, notifications: e.target.checked })}
|
|
104
100
|
/>
|
|
105
101
|
</FormControl>
|
|
106
102
|
<FormControl orientation="horizontal">
|
|
@@ -110,9 +106,7 @@ function SettingsDrawer({ open, onClose }) {
|
|
|
110
106
|
</Box>
|
|
111
107
|
<Switch
|
|
112
108
|
checked={settings.darkMode}
|
|
113
|
-
onChange={(e) =>
|
|
114
|
-
setSettings({ ...settings, darkMode: e.target.checked })
|
|
115
|
-
}
|
|
109
|
+
onChange={(e) => setSettings({ ...settings, darkMode: e.target.checked })}
|
|
116
110
|
/>
|
|
117
111
|
</FormControl>
|
|
118
112
|
</Stack>
|
|
@@ -169,7 +163,10 @@ function ActionSheet({ open, onClose, onAction }) {
|
|
|
169
163
|
<ListItem key={action.id}>
|
|
170
164
|
<ListItemButton
|
|
171
165
|
color={action.color}
|
|
172
|
-
onClick={() => {
|
|
166
|
+
onClick={() => {
|
|
167
|
+
onAction(action.id);
|
|
168
|
+
onClose();
|
|
169
|
+
}}
|
|
173
170
|
>
|
|
174
171
|
<ListItemDecorator>{action.icon}</ListItemDecorator>
|
|
175
172
|
{action.label}
|
|
@@ -231,9 +228,7 @@ function ActionSheet({ open, onClose, onAction }) {
|
|
|
231
228
|
<DialogTitle>Title</DialogTitle>
|
|
232
229
|
<ModalClose />
|
|
233
230
|
</Box>
|
|
234
|
-
<DialogContent sx={{ flex: 1, overflow: 'auto', p: 2 }}>
|
|
235
|
-
{/* Scrollable content */}
|
|
236
|
-
</DialogContent>
|
|
231
|
+
<DialogContent sx={{ flex: 1, overflow: 'auto', p: 2 }}>{/* Scrollable content */}</DialogContent>
|
|
237
232
|
<Box sx={{ p: 2, borderTop: '1px solid', borderColor: 'divider' }}>
|
|
238
233
|
<Button>Save</Button>
|
|
239
234
|
</Box>
|
|
@@ -109,8 +109,7 @@ Links integrate seamlessly within paragraph text, inheriting the surrounding fon
|
|
|
109
109
|
function ArticleContent() {
|
|
110
110
|
return (
|
|
111
111
|
<Typography level="body-md">
|
|
112
|
-
For more information, visit our{' '}
|
|
113
|
-
<Link href="/services">services page</Link> or read the{' '}
|
|
112
|
+
For more information, visit our <Link href="/services">services page</Link> or read the{' '}
|
|
114
113
|
<Link href="/faq">frequently asked questions</Link>.
|
|
115
114
|
</Typography>
|
|
116
115
|
);
|