Skip to content

Commit 49c759b

Browse files
tailor-docs-bot[bot]tailor-docs-bot[bot]
committed
Update App Shell pages
1 parent b1aca83 commit 49c759b

8 files changed

Lines changed: 798 additions & 24 deletions

File tree

‎docs/app-shell/changelog.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
11
# @tailor-platform/app-shell
22

3+
## 1.7.0
4+
5+
### Minor Changes
6+
7+
- 7f33506: Allow the standalone `Select`, `Combobox`, and `Autocomplete` (including their `.Async` variants) to receive an accessible name via `aria-label`, `aria-labelledby`, and `id`. Previously these props were silently dropped, leaving the combobox with only its current value as an accessible name — a WCAG 4.1.2 issue for filters and toolbars used outside a `Form`. The props are now forwarded to the underlying trigger/input.
8+
9+
```tsx
10+
// Announced as "Direction filter, combobox" instead of just its value
11+
<Select
12+
items={items}
13+
value={value}
14+
onValueChange={setValue}
15+
aria-label="Direction filter"
16+
/>
17+
18+
// Or point at a visible label
19+
<span id="dir-label">From</span>
20+
<Combobox items={items} aria-labelledby="dir-label" />
21+
```
22+
23+
### Patch Changes
24+
25+
- ff30974: Fix `@tailor-platform/app-shell/styles` so consumer Tailwind utilities like `bg-card`, `border-border`, and `text-muted-foreground` resolve again without requiring `theme.css`.
26+
27+
`theme.css` remains a no-op compatibility shim, while `styles` now restores the Tailwind theme bridge and keeps the precompiled AppShell component CSS importable from a single entrypoint.
28+
29+
## 1.6.1
30+
31+
### Patch Changes
32+
33+
- 147aacf: Fix Vitest and other Node-evaluated test setups that import `@tailor-platform/app-shell` by keeping the package's JS entry free of CSS imports.
34+
35+
`@tailor-platform/app-shell/styles` continues to ship the default AppShell styles and bundled Inter font assets. Applications should import that stylesheet explicitly, as shown in the docs and examples.
36+
337
## 1.6.0
438

539
### Minor Changes

‎docs/app-shell/components/autocomplete.md‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,20 @@ import { Autocomplete } from "@tailor-platform/app-shell";
2727

2828
### Autocomplete Props
2929

30-
| Prop | Type | Default | Description |
31-
| --------------- | ------------------------- | --------------- | ------------------------------------------------------------------- |
32-
| `items` | `I[]` | - | Suggestion items. May be a flat array or an array of `ItemGroup<T>` |
33-
| `placeholder` | `string` | - | Placeholder text for the input |
34-
| `emptyText` | `string` | `"No results."` | Text shown when no items match |
35-
| `value` | `string` | - | Controlled value (raw input string) |
36-
| `defaultValue` | `string` | - | Initial value (uncontrolled) |
37-
| `onValueChange` | `(value: string) => void` | - | Called when the value changes |
38-
| `mapItem` | `(item: T) => MappedItem` | - | Map each item to its label, key, and optional custom render |
39-
| `className` | `string` | - | Additional CSS classes for the root container |
40-
| `disabled` | `boolean` | `false` | Disables the autocomplete |
30+
| Prop | Type | Default | Description |
31+
| ----------------- | ------------------------- | --------------- | ------------------------------------------------------------------- |
32+
| `items` | `I[]` | - | Suggestion items. May be a flat array or an array of `ItemGroup<T>` |
33+
| `placeholder` | `string` | - | Placeholder text for the input |
34+
| `emptyText` | `string` | `"No results."` | Text shown when no items match |
35+
| `value` | `string` | - | Controlled value (raw input string) |
36+
| `defaultValue` | `string` | - | Initial value (uncontrolled) |
37+
| `onValueChange` | `(value: string) => void` | - | Called when the value changes |
38+
| `mapItem` | `(item: T) => MappedItem` | - | Map each item to its label, key, and optional custom render |
39+
| `className` | `string` | - | Additional CSS classes for the root container |
40+
| `disabled` | `boolean` | `false` | Disables the autocomplete |
41+
| `aria-label` | `string` | - | Accessible name for the input. Use when there is no visible label |
42+
| `aria-labelledby` | `string` | - | ID of the element(s) that label the input |
43+
| `id` | `string` | - | ID applied to the combobox input element |
4144

4245
### MappedItem
4346

@@ -216,6 +219,11 @@ const suggestions = Autocomplete.useAsync({
216219
- Input is keyboard accessible with arrow key navigation
217220
- Pressing `Escape` closes the suggestion list
218221
- Selecting a suggestion fills the input with the item's label
222+
- When used standalone (no visible `<label>`), give the input an accessible name with `aria-label` or `aria-labelledby` — otherwise screen readers announce only the current value:
223+
224+
```tsx
225+
<Autocomplete items={items} aria-label="City search" />
226+
```
219227

220228
## Related Components
221229

‎docs/app-shell/components/combobox.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ import { Combobox } from "@tailor-platform/app-shell";
3939
| `mapItem` | `(item: T) => MappedItem` | - | Map each item to its label, key, and optional custom render |
4040
| `className` | `string` | - | Additional CSS classes for the root container |
4141
| `disabled` | `boolean` | `false` | Disables the combobox |
42+
| `aria-label` | `string` | - | Accessible name for the input. Use when there is no visible label |
43+
| `aria-labelledby` | `string` | - | ID of the element(s) that label the input |
44+
| `id` | `string` | - | ID applied to the combobox input element |
4245
| `onCreateItem` | `(value: string) => T \| false \| Promise<T \| false>` | - | Enable user-created items (requires `mapItem`; `T` must be an object type) |
4346
| `formatCreateLabel` | `(value: string) => string` | `` (v) => `Create "${v}"` `` | Format the label for the "create" option |
4447

@@ -242,6 +245,11 @@ const countries = Combobox.useAsync({
242245
- Input is keyboard accessible with arrow key navigation
243246
- Pressing `Escape` closes the dropdown
244247
- Multi-select chips have `aria-label` set from the item label
248+
- When used standalone (no visible `<label>`), give the input an accessible name with `aria-label` or `aria-labelledby` — otherwise screen readers announce only the current value:
249+
250+
```tsx
251+
<Combobox items={items} aria-label="Fruit filter" />
252+
```
245253

246254
## Related Components
247255

‎docs/app-shell/components/data-table.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -492,14 +492,27 @@ The `filter` property on a column accepts a `FilterConfig` object. When set, the
492492
| `string` | Text | `eq`, `ne`, `contains`, `notContains`, `hasPrefix`, `hasSuffix`, `notHasPrefix`, `notHasSuffix`, `in`, `nin` |
493493
| `number` | Number | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin` |
494494
| `datetime` | Datetime-local | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin` |
495-
| `date` | Date | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin` |
495+
| `date` | **DatePicker** | `eq` (_exact date_), `gte` (_after_), `lte` (_before_), **`between`** |
496496
| `time` | Time | `eq`, `ne`, `gt`, `gte`, `lt`, `lte`, **`between`**, `in`, `nin` |
497497
| `enum` | Dropdown | `eq`, `ne`, `in`, `nin` |
498498
| `boolean` | Toggle | `eq`, `ne` |
499499
| `uuid` | Text | `eq`, `ne`, `in`, `nin` |
500500

501501
When the user selects the `between` operator on a `number`, `datetime`, `date`, or `time` column, the filter chip renders a range input with **min** and **max** bounds.
502502

503+
### Date Filters
504+
505+
`date` columns use the app-shell [`DatePicker`](date-picker) as the filter input (single value and `between` ranges) and present a friendlier, slimmer operator set:
506+
507+
| Operator | Label | Meaning |
508+
| --------- | ------------ | -------------------------- |
509+
| `eq` | _exact date_ | matches that calendar date |
510+
| `gte` | _after_ | on or after (inclusive) |
511+
| `lte` | _before_ | on or before (inclusive) |
512+
| `between` | _between_ | inclusive min–max range |
513+
514+
`gt` / `lt` / `ne` are intentionally dropped — the inclusive _after_ / _before_ cover the intent. The filter chip shows the value as a locale-formatted date (e.g. `15 Jun 2026`), and the picker resolves its locale/timezone from the AppShell context. (Only `date` is remapped this way; `datetime` and `time` keep the full numeric operator set and native inputs.)
515+
503516
### String Filter Case Sensitivity
504517

505518
String filters are **case-insensitive by default** — they use the Tailor Platform `regex` operator with an `(?i)` prefix. The filter chip renders a **"Case sensitive"** checkbox that lets users opt into exact-case matching.

0 commit comments

Comments
 (0)