pulse_view_components 0.3.0 → 0.4.1

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.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +114 -1
  3. data/README.md +26 -0
  4. data/app/assets/builds/js/pulse_view_components.js +3 -3
  5. data/app/assets/builds/js/pulse_view_components.js.map +1 -1
  6. data/app/assets/builds/pulse_view_components.css +2 -1
  7. data/app/assets/stylesheets/pulse_view_components/application.tailwind.css +44 -4
  8. data/app/assets/stylesheets/pulse_view_components/tokens.primitives.css +68 -0
  9. data/app/assets/stylesheets/pulse_view_components/tokens.system.css +95 -0
  10. data/app/components/pulse/action_list/divider.rb +13 -4
  11. data/app/components/pulse/action_list/form_wrapper.rb +2 -0
  12. data/app/components/pulse/action_list/heading.html.slim +7 -0
  13. data/app/components/pulse/action_list/heading.rb +2 -0
  14. data/app/components/pulse/action_list/item.html.slim +6 -6
  15. data/app/components/pulse/action_list/item.rb +11 -9
  16. data/app/components/pulse/action_list.css +109 -82
  17. data/app/components/pulse/action_list.html.slim +11 -0
  18. data/app/components/pulse/action_list.rb +5 -0
  19. data/app/components/pulse/badge.rb +20 -16
  20. data/app/components/pulse/base_component.rb +25 -1
  21. data/app/components/pulse/blank_slate.rb +4 -2
  22. data/app/components/pulse/border_box/header.rb +5 -3
  23. data/app/components/pulse/border_box.rb +21 -17
  24. data/app/components/pulse/box.rb +2 -0
  25. data/app/components/pulse/breadcrumb_item.rb +3 -1
  26. data/app/components/pulse/breadcrumbs.html.slim +2 -2
  27. data/app/components/pulse/breadcrumbs.rb +2 -0
  28. data/app/components/pulse/button.rb +28 -25
  29. data/app/components/pulse/component.rb +2 -1
  30. data/app/components/pulse/conditional_wrapper.rb +2 -0
  31. data/app/components/pulse/content.rb +2 -0
  32. data/app/components/pulse/counter.css +3 -3
  33. data/app/components/pulse/counter.rb +4 -0
  34. data/app/components/pulse/flash.rb +10 -6
  35. data/app/components/pulse/forms/error_explanation.html.slim +3 -3
  36. data/app/components/pulse/forms/error_explanation.rb +30 -13
  37. data/app/components/pulse/forms/error_explanation.yml +4 -0
  38. data/app/components/pulse/icon.rb +2 -0
  39. data/app/components/pulse/label.rb +5 -3
  40. data/app/components/pulse/layout.css +53 -52
  41. data/app/components/pulse/layout.rb +14 -6
  42. data/app/components/pulse/link.rb +10 -8
  43. data/app/components/pulse/modal.html.slim +20 -20
  44. data/app/components/pulse/modal.rb +10 -8
  45. data/app/components/pulse/modal_controller.js +3 -3
  46. data/app/components/pulse/nav_link.html.slim +7 -7
  47. data/app/components/pulse/nav_link.rb +4 -2
  48. data/app/components/pulse/nav_list/heading.rb +3 -1
  49. data/app/components/pulse/nav_list/item.html.slim +8 -0
  50. data/app/components/pulse/nav_list/item.rb +2 -2
  51. data/app/components/pulse/nav_list.rb +5 -0
  52. data/app/components/pulse/popover.html.slim +1 -1
  53. data/app/components/pulse/popover.rb +65 -26
  54. data/app/components/pulse/progress_bar.html.slim +2 -2
  55. data/app/components/pulse/progress_bar.rb +5 -3
  56. data/app/components/pulse/table/cell.html.slim +2 -2
  57. data/app/components/pulse/table/cell.rb +14 -10
  58. data/app/components/pulse/table/column.rb +2 -0
  59. data/app/components/pulse/table.html.slim +3 -3
  60. data/app/components/pulse/table.rb +19 -16
  61. data/app/components/pulse/text.rb +26 -24
  62. data/app/components/pulse/toast.html.slim +8 -8
  63. data/app/components/pulse/toast.rb +25 -23
  64. data/app/lib/pulse/status.rb +48 -0
  65. data/lib/pulse/view_components/engine.rb +4 -0
  66. data/lib/pulse/view_components/version.rb +2 -2
  67. data/previews/foundations/colors_preview/palettes.html.slim +12 -0
  68. data/previews/foundations/colors_preview/semantic.html.slim +16 -0
  69. data/previews/foundations/colors_preview.rb +55 -0
  70. data/previews/pulse/action_list_preview.rb +77 -0
  71. data/previews/pulse/border_box_preview.rb +1 -1
  72. data/previews/pulse/counter_preview.rb +1 -1
  73. data/previews/pulse/flash_preview.rb +1 -1
  74. data/previews/pulse/forms/error_explanation_preview.rb +49 -0
  75. data/previews/pulse/layout_preview.rb +5 -5
  76. data/previews/pulse/nav_list_preview.rb +1 -1
  77. data/previews/pulse/popover_preview.rb +48 -22
  78. data/previews/pulse/progress_bar_preview.rb +1 -1
  79. data/previews/pulse/table_preview.rb +6 -6
  80. metadata +53 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0f457ccc7139eadce5f0c7902605b37cf2d8a1fb9400db8159d46fce2ee9fda9
4
- data.tar.gz: a419c33680af5ffb6a2c26c6f1198e3824afc3424f27d40f5e7b095b8198163a
3
+ metadata.gz: ee83609e86903aa5b7772032bc8a1620c7f21c804aabd5da7812baa8b533add3
4
+ data.tar.gz: 83c778fc2e8b4d90b7f4f9079ea6eb8818aef9befdc39f1766ad12c3edfc1ede
5
5
  SHA512:
6
- metadata.gz: c57be4358008253cd9ca9d1a8ea18c5895104346466f707a7adbdb86683714f61174c6282547a30c6351c4b05c3e522710cdc129b8a6c1e456c42ca5a4752c63
7
- data.tar.gz: 39f968613cece83349c1883622012f40abd8dc9e72aacce646558c7462cb535dcda74945f40254200cd568627e97eeb83442e7630ac2fbb33059ef9721dee249
6
+ metadata.gz: 5ffe1a1b23f94f71142348ede4ce6cc447d585d5ba104a87866b38f614c46fed26455a8cf79a5a7d58d69639fea8654b851ed0d7383ee768aeef3fcdd7618993
7
+ data.tar.gz: 87a6ce613ba799b5d74b9308da262cdf574ac1772eccdbe46d4fee62f241037fb1ba5fcba80f8f64bd7b027a87653c2a51dd05aa1eb9287164e7223e4e045fa7
data/CHANGELOG.md CHANGED
@@ -8,6 +8,117 @@ While the major version is `0`, a minor bump may carry a breaking change.
8
8
 
9
9
  ## [Unreleased]
10
10
 
11
+ ## [0.4.1] - 2026-11-13
12
+
13
+ ### Fixed
14
+
15
+ - The gem now declares `slim` and `turbo-rails` as dependencies and requires
16
+ them, along with `inline_svg` and `active_link_to`, when it loads. Before,
17
+ components only rendered if the host app listed all four gems in its own
18
+ Gemfile. Without `inline_svg`, any component that renders an icon raised
19
+ `NoMethodError` on `inline_svg_tag`.
20
+
21
+ ### Changed
22
+
23
+ - `rails` is capped below 9 until we test against it.
24
+ - Development Ruby moved to 3.4.12. The gem still supports Ruby >= 3.4.0.
25
+
26
+ ## [0.4.0] - 2026-10-19
27
+
28
+ Upgrades to Tailwind CSS 4. This is a breaking change for apps that pass
29
+ classes through `classes:`, because the prefix is now written as a leading
30
+ variant (`pulse:bg-primary` rather than `pulse-bg-primary`). See Changed.
31
+
32
+ ### Added
33
+
34
+ - Components declare a status of `:alpha`, `:beta`, `:stable` or
35
+ `:deprecated`, read with `Pulse::Thing.status`. `ActionList`, `NavList` and
36
+ `Counter` are alpha. `BorderBox`, `Flash` and `Layout` are beta. See the
37
+ README for what each level means.
38
+ - An `ActionList` Lookbook preview.
39
+ - A `neutral` semantic color, backed by a new `gray` palette token that copies
40
+ Tailwind 4's gray.
41
+ - A Foundations > Colors Lookbook page that shows the semantic colors and the
42
+ palettes behind them.
43
+
44
+ ### Fixed
45
+
46
+ - `ActionList::Divider` with `scheme: :filled` draws its top and bottom
47
+ borders again. It used class names that Tailwind 4 does not generate.
48
+ - `ActionList`, `ActionList::Heading` and every `NavList` group raised on
49
+ render because they had no template.
50
+ - `NavList` items with sub-items raised, and their sub-items never rendered.
51
+ - `BorderBox` rendered a `system_arguments_denylist` HTML attribute.
52
+ `BaseComponent` now consumes the denylist and raises outside production when
53
+ a denied argument is passed, so `BorderBox.new(pt: 2)` now raises. In
54
+ production, or with `PULSE_WARNINGS_DISABLED`, it drops the denied argument
55
+ from the output instead.
56
+ - `Forms::ErrorExplanation` rendered "Header" as its heading unless the app
57
+ defined `errors.template.header`. It now ships a default heading and still
58
+ prefers the app's translation. In a locale with no app translation it
59
+ shows the English heading instead of raising.
60
+ - `Forms::ErrorExplanation` counted every error in its heading but listed only
61
+ one per attribute, so two errors on `title` read "2 errors" above one item.
62
+ The heading now counts the listed errors.
63
+ - Several components used `text-gray`, which Tailwind never defined, so their
64
+ text inherited its colour. They now use neutral-700: `Badge` (`invited`,
65
+ `active` and `disabled` schemes), the secondary `Button`, the `Modal` title
66
+ and close button, inactive `NavLink`s, `Table` headers, cells and
67
+ pagination, and the link in an error `Toast`.
68
+ - The `Table` body and `Text` `caption1` and `caption2` used the undefined
69
+ `leading-extra-snug` and `leading-extra-tight`, so no line height applied.
70
+ They now use `leading-snug` and `leading-tight`.
71
+
72
+ ### Changed
73
+
74
+ - Components use `neutral-*` color classes instead of `gray-*`. The colors
75
+ are unchanged. The build no longer includes Tailwind's `gray` utilities, so
76
+ a `pulse:*-gray-*` class passed in through `classes:` now has no styles.
77
+ Use `pulse:*-neutral-*` instead.
78
+ - **Breaking:** upgraded to Tailwind CSS 4. The class prefix is now written as
79
+ a leading variant, so `pulse-bg-primary` becomes `pulse:bg-primary` and
80
+ `hover:pulse-text-white` becomes `pulse:hover:text-white`. Classes passed to
81
+ components through `classes:` must use the new form.
82
+ - `Forms::ErrorExplanation` now inherits from `Pulse::Component`. It merges
83
+ `classes:` with `tailwind_merge` and rejects a `tag:` argument.
84
+ - The primary `Button` green shifted. Tailwind 4 redefined its palette in
85
+ oklch, so `green-700` moved from `#15803d` to about `#008236`. The blue-700
86
+ focus outline shifted the same way.
87
+ - The `error` and `danger` reds shifted slightly. Every shade of the
88
+ `amaranth` palette they map to changed, for example 700 moved from `#ee2d5b`
89
+ to `#ee2d4b`.
90
+ - Some utilities were renamed by Tailwind 4 (`outline-none` is now
91
+ `outline-hidden`, `start-0` is now `inset-s-0`).
92
+ - CSS custom properties from the theme are now emitted with the prefix, for
93
+ example `--pulse-color-primary`.
94
+ - `tailwind_merge` dependency raised to `~> 1.5`, which understands Tailwind 4
95
+ class syntax.
96
+ - The Tailwind config moved from `tailwind.config.js` into the stylesheet as
97
+ CSS-first configuration.
98
+
99
+ ### Removed
100
+
101
+ - `@tailwindcss/aspect-ratio` and `@tailwindcss/typography`, which no component
102
+ used. `aspect-*` utilities are built into Tailwind 4.
103
+ - The unused `peer-unchecked` variant. Tailwind 4's `peer-not-checked` covers
104
+ it.
105
+ - `postcss.config.js`, `postcss` and `autoprefixer`. The Tailwind 4 CLI does
106
+ not read the PostCSS config.
107
+ - Utilities named after the raw palettes, such as `pulse-bg-coral-red-500`.
108
+ The palettes are now `--palette-*` theme variables outside the colour
109
+ namespace. Use the semantic names (`primary`, `secondary`, `tertiary`,
110
+ `success`, `danger`, `error`, `neutral`) instead.
111
+
112
+ ### Internal
113
+
114
+ - Development Node moved to 22, since Tailwind 4 needs Node 20 or later.
115
+ - `chokidar` is now a direct dev dependency. `esbuild.config.mjs` imports it,
116
+ and it previously arrived only through Tailwind 3.
117
+ - Design tokens split into `tokens.primitives.css` (palettes) and
118
+ `tokens.system.css` (semantic colours).
119
+ - Development `view_component` moved to 4.16, along with other development gem
120
+ updates.
121
+
11
122
  ## [0.3.0] - 2026-08-28
12
123
 
13
124
  No breaking changes. The component API, the gemspec constraints and the
@@ -80,7 +191,9 @@ No breaking changes. The component API, the gemspec constraints and the
80
191
 
81
192
  - Initial release.
82
193
 
83
- [Unreleased]: https://github.com/100yrs/pulse_view_components/compare/v0.3.0...HEAD
194
+ [Unreleased]: https://github.com/100yrs/pulse_view_components/compare/v0.4.1...HEAD
195
+ [0.4.1]: https://github.com/100yrs/pulse_view_components/compare/v0.4.0...v0.4.1
196
+ [0.4.0]: https://github.com/100yrs/pulse_view_components/compare/v0.3.0...v0.4.0
84
197
  [0.3.0]: https://github.com/100yrs/pulse_view_components/compare/v0.2.1...v0.3.0
85
198
  [0.2.1]: https://github.com/100yrs/pulse_view_components/compare/v0.2.0...v0.2.1
86
199
  [0.2.0]: https://github.com/100yrs/pulse_view_components/compare/v0.1.1...v0.2.0
data/README.md CHANGED
@@ -14,6 +14,32 @@ Render Pulse ViewComponents:
14
14
  <%= render(Pulse::Badge.new(scheme: :primary)) { 'Primary' } %>
15
15
  ```
16
16
 
17
+ ## Component status
18
+
19
+ Each component declares how complete it is. Check it with
20
+ `Pulse::ActionList.status`. Lookbook shows the status after the name of any
21
+ component that is not stable.
22
+
23
+ | Status | Meaning |
24
+ | --- | --- |
25
+ | `stable` | Complete and safe to use. |
26
+ | `beta` | Core usage works. Some documented options are not implemented. |
27
+ | `alpha` | Incomplete. Features may be broken, unstyled or missing, and the API may change without notice. |
28
+ | `deprecated` | Scheduled for removal. |
29
+
30
+ Components that are not stable:
31
+
32
+ | Component | Status | Gaps |
33
+ | --- | --- | --- |
34
+ | `ActionList` | alpha | Select variants, trailing actions, tooltips, avatar items and the `:inset` scheme do not work. |
35
+ | `NavList` | alpha | Avatar items raise. Sub-items cannot be collapsed. The show-more item has no JavaScript. |
36
+ | `Counter` | alpha | Renders unstyled. |
37
+ | `BorderBox` | beta | `padding:` and row `scheme:` have no effect. |
38
+ | `Flash` | beta | `dismissible: true` raises. `full: true` has no effect. |
39
+ | `Layout` | beta | Main `width:` options other than `:full` have no effect. |
40
+
41
+ The comment above each `status` call in the source lists what is missing.
42
+
17
43
  ## Dependencies
18
44
 
19
45
  - [Stimulus](https://stimulus.hotwired.dev/)
@@ -9441,20 +9441,20 @@
9441
9441
  this.lastFocusedElement = document.activeElement;
9442
9442
  enter(this.wrapperTarget);
9443
9443
  enter(this.bodyTarget);
9444
- document.body.classList.add("pulse-overflow-hidden");
9444
+ document.body.classList.add("pulse:overflow-hidden");
9445
9445
  }
9446
9446
  close(e) {
9447
9447
  leave(this.wrapperTarget);
9448
9448
  leave(this.bodyTarget).then(() => {
9449
9449
  this.element.remove();
9450
9450
  });
9451
- document.body.classList.remove("pulse-overflow-hidden");
9451
+ document.body.classList.remove("pulse:overflow-hidden");
9452
9452
  if (this.lastFocusedElement) this.lastFocusedElement.focus();
9453
9453
  this.element.closest("turbo-frame").src = void 0;
9454
9454
  }
9455
9455
  autoClose(e) {
9456
9456
  this.element.remove();
9457
- document.body.classList.remove("pulse-overflow-hidden");
9457
+ document.body.classList.remove("pulse:overflow-hidden");
9458
9458
  }
9459
9459
  handleSubmit = (e) => {
9460
9460
  if (e.detail.success) {