84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 84776391 🎨 Improved focus when adding a filter (#30394)
ref
https://linear.app/ghost/issue/DES-1280/auto-focus-newly-added-filter-fields-in-shade-filter
> **Scope: Shade only.** This fixes the component. Admin needs a
separate change (DES-1496) before the behaviour is visible on Members or
Comments — see Testing.
### Why
Adding a filter you type into — Name, Email, a number — left the caret
behind, so you had to click into the empty box you'd just asked for.
Filters that open a picker never had this problem, which made it read as
an inconsistency rather than a missing feature. Reported by Peter.
### What it does
The value input takes focus when its filter was just added. One file
plus tests, no consumer changes.
Excluded on purpose: dates and ranges arrive already carrying a value
rather than waiting on input, so taking the caret would interrupt;
pickers already focus their own menu; booleans have nothing to type
into.
### Testing
**This won't visibly fix Members or Comments yet.** Those pages render
two `<Filters>` and swap between them when the first filter is added,
which destroys the component mid-action. Separate Admin bug — DES-1496.
To see it working: Storybook → `Patterns / Filters`, or add a *second*
filter in Admin, which already works.
### Tests
Three added — text and number take focus, date is left alone. The
existing 20 pass.
---
- [x] I've read and followed the [Contributor
Guide](https://github.com/TryGhost/Ghost/blob/main/.github/CONTRIBUTING.md)
- [x] I've explained my change
- [x] I've written an automated test to prove my change works 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats. 5bb268e1 Added stats to the automations list on mobile (#30355)
ref https://linear.app/ghost/issue/NY-1540/mobile-view-for-automations-list-table
The three stat columns were hidden below `lg`, so on mobile the list showed
only a name, description and status. The stats are the reason to open the
list at all, and their absence made the screen read as unfinished rather
than deliberately condensed.
Each row now lays out on a four-track grid below `lg`: the name spans the
first row, the stats sit on the second, and the status badge stays pinned
right. Placement is explicit rather than wrapping the stats in a container,
because a wrapper between `tr` and `td` is invalid markup and would break
the real table layout that returns at `lg`.
Each stat carries its own label beneath its value, matching the newsletter
list in settings, since the column headers are hidden at that width. Column
widths are scoped to `lg` so they no longer fight the mobile grid, and the
skeleton uses the same layout so nothing shifts as the list loads.
The stats render inside the `showRunAnalytics` guard added in #30313, so
they stay hidden when the browse response omits stats.