🚀 Rails Typeahead Kit Update

March 7, 2025

The Rails Typeahead kit now supports dynamic option rendering, matching the React version! Previously, only React could update options in real-time using state—now, Rails can too, making search experiences more flexible and interactive. No breaking changes—just update to the latest version and enjoy a more dynamic Typeahead! 🎉

14.15.0 full list of changes:

Kit Enhancements:

• Advanced Table Kit: Fixes for React "Endless/Infinite Scroll" + Refactor (#4323) (@skduncan)
• Form Pill Kit: Create New Wrapped Prop (#4354) (@gabbymassaro)
• Title Kit: Display Title (#4344) (@yuriyivanenko)
• Datepicker Kit: Inline Rails Validation on Forms (#4357) (@nickamantia)
• Select, Selectable Card, Selectable Card Icon, Selectable Icon: Update to pb_content_tag (#4324) (@yuriyivanenko)
• Multi Level Select Kit: Create Disabled Prop (#4348) (@carloslimasd)
• Tooltip Kit: Pass Height/Width Global Props To Tooltip - React (#4335) (@gabbymassaro)
• Radio Kit: Better Support React Hook Form (#4282) @cmhorsey)
• Typeahead Kit: Dynamic Options in Rails (#4321) (@nidaqg)
• Overlay Kit: Horizontal Scroll Bar Toggle (#4346) (@ElisaShapiro)
• Overlay Kit: Adding Dynamic Prop - Rails (#4336) (@carloslimasd)
• Tooltip Kit: Interaction and Delay Props Using @floating-ui - Rails (#4322) (@yuriyivanenko, @markdoeswork)
• Select Kit: Adding Inline Validity Message (#4327) (@carloslimasd)
• Currency Kit: Handling of null Values (#4303) (@nickamantia)
• Icon Button Kit - React (#4298) (@kangaree)
• Rails Form Helpers: Time Zone Select Field (#4299) (@carloslimasd)

Fixed Bugs:

• Timeline Kit: Min-Width instead of Fixed Width (#4345) (@markdoeswork)
• Progress Step Kit: Fixes for Tooltip Flickering - Rails (#4285) (@gabbymassaro)

Improvements:

• PB Website: Tokens Index Page (#4358) (@gabbymassaro)
• Drawer Kit: Added Doc Example for Breakpoints (#4286) (@jasperfurniss)
• Select Kit: Add react-hook-form Doc Example (#4347) (@kangaree)
• Dependency Removal - Lodash [ 1 of 3] (#4300) (@cmhorsey)
• PB Website: Update CHANGELOG.md for Web (#4333) (@Amax1296)
• PB Website: Rails Playground ERB Syntax Highlighting (#4312) (@gabbymassaro)
• Dependency Update: Bump axe-core to 4.10.2 (#4308) (@kangaree)
• PB Website: Global Props & Tokens Index Page (#4283) (@yuriyivanenko)
• PB Website: Rails Playground Editor Enhancements (#4297) (@yuriyivanenko)

New Kit:

• Drawer Kit - Rails (#4278) (@markdoeswork)

Full Changelog

🚀 Smarter Scroll Gradients in Playbook! 🎨

February 21, 2025

We’ve fine-tuned the Overlay Kit to improve the horizontal scrolling experience! Previously, the scroll-end gradient indicators were always visible on both ends, even when users couldn’t scroll left—causing confusion. With the new 'dynamic' prop, gradients now appear only when there’s more content to scroll toward.
Enjoy the improved clarity! 🚀✨

14.14.0 full list of changes:

Kit Enhancements:

• Checkbox Kit: React Hook Form Support (#4296) (@markdoeswork)
• Convert Kits to Use pb_content_tag (Progress Pills, Simple, Step, and Radio Kit) (#4275) (@cmhorsey)
• Overlay Kit: Multi-Directional Overlays Support - React (#4284) (@nickamantia)
• Advanced Table Kit: Sticky Header & Responsive Prop Working Together - Rails (#4293) (@ElisaShapiro)
• Progress Pill Full Width (#4269) (@yuriyivanenko)
• Responsive Progress Pill (#4260) (@yuriyivanenko)
• Table Kit: Collapsible Rows with "custom click" for Rails (#4263) (@nickamantia)
• Bar Graph: CSS Led (#4202) (@markdoeswork)
• Draggable Kit with Table Kit (#4253) (@nidaqg)
• Update pb_content_tags (#4217) (@cmhorsey)
• Rails Text Input Masking: credit_card and cvv (#4267) (@kangaree)
• Icon Button Sizes (#4218) (@yuriyivanenko)

Fixed Bugs:

• Advanced Table: Multi Column Headers to work with Custom Cells (#4292) (@nidaqg)
• React Date Picker - initializeOnce - Reinitialization with Other Inputs Bug (#4240) (@kangaree)

Improvements:

• Update SWIFT_CHANGELOG.md (#4294) (@isismsilva)
• Playground: Header Component Redesign (#4270) (@cmhorsey)
• Adding Table Selectable Rows Doc Example (#4259) (@carloslimasd)
• Bump Sass Version (#4254) (@yuriyivanenko)
• Table Kit: Clickable Table Rows Doc Example (#4252) (@ElisaShapiro)

Deprecated:

• Deprecate Action Avatar Button (#4277) (@gabbymassaro)

Full Changelog

🛠️ 🐉 Rails Draggable Component Just got an Upgrade!

February 7, 2025

We’ve just rolled out a fresh update to the Rails draggable component, making it simpler to use and quicker to integrate. With new, clearer doc examples, you’ll be up and running in no time.

14.13.0 full list of changes:

Kit Enhancements:

• Implement pb_content_tag (#4203) (@yuriyivanenko)
• Advanced Table kit: Address Scss Changes and Add maxHeight Prop (#4191) (@ElisaShapiro)
• Draggable Kit with Table Kit (#4234) (@nidaqg)
• Draggable kit: Add the "cross-container" Functionality to RAILS Kit (#4210) (@skduncan)
• Advanced Table: Hide Actions Bar Till Rows are Selected (#4211) (@nidaqg)
• Copy Kit - Rails (#4175) (@markdoeswork)
• Link Kit Target Prop (#4195) (@gabbymassaro)
• Progress Step Kit Tooltips Location Fix (#4204) (@cmhorsey)
• Dark Mode Audit Table (#4134) (@yuriyivanenko)
• Enable Lightweight User Names in User Kit (#4194) (@cmhorsey)
• Avatar - Dark Mode Audit (#4185) (@gabbymassaro)
• Convert Kits to Use pb_content_tag (File Upload, Filter, Form Group, and Form Pill) (#4153) (@kangaree)
• Draggable Kit: Simplified API for Card kit for Rails (#4161) (@skduncan)
• Advanced Table - Add Responsiveness to Rails kit (#4151) (@skduncan)
• Date Dark Mode Audit (#4174) (@cmhorsey)
• Advanced Table Highlight In Rails (#4180) (@cmhorsey)
• Enable Global Props for pb_form_with (#4098) (@ElisaShapiro)
• Add Loading State to Rails Advanced Table (#4162) (@nickamantia)

Fixed Bugs:

• Selectable Rows Action Bar Responsive (#4241) (@nidaqg)
• Mask Use PBEnhancedElement (#4201) (@markdoeswork)
• Home Address with fix (#4229) (@yuriyivanenko)
• Lightbox Kit - Nitro Bug (#4178) (@kangaree)
• Alignment Issue for AdvancedTable with Specific Usecases (#4184) (@nidaqg)
• Fix Disabled State for Link Variant for Button (#4190) (@markdoeswork)

Improvements:

• Bump classnames Version (#4219) (@cmhorsey)
• PB Website - Search Global Props (#4221) (@gabbymassaro)
• Update Vite version (#4182) (@markdoeswork)
• Example Repo on Alpha for Free Icons to Work (#4209) (@nidaqg)
• Fixed Confirmation Toast - Enable "auto close" for RAILS (#4179) (@ElisaShapiro)
• Update Example App for Tech Challenges (#4192) (@nidaqg)
• Search Results on Playbook Website (#4171) (@yuriyivanenko)
• Table kit: Add All Collapsible/Expandable Row Doc Examples (#4163) (@skduncan)
• Update Swift Changelog (#4172) (@isismsilva)

New Kit:

• Copy Button Kit - React Beta (#4143) (@kangaree)

Full Changelog

Table It Like It’s Hot: Row Selection Has Arrived!

January 24, 2025

Selecting rows just got way easier! Our Advanced Table now lets you pick one or many with simple checkboxes. Batch actions? Handled. Less hassle? Guaranteed. Get clicking!

14.12.0 full list of changes:

Kit Enhancements:

• Drawer Kit Refactor (#4028) (@jasperfurniss)
• Dark Audit Multiple Users (#4139) (@yuriyivanenko)
• Rails Input Masking (#4127) (@markdoeswork)
• Dark Mode Select (#4128) (@yuriyivanenko)
• Dark Mode - Map Audit (#4154) (@gabbymassaro)
• SelectableRows for AdvancedTable- React (#4131) (@nidaqg)
• Selectable Icon - Dark Mode Audit (#4140) (@gabbymassaro)
• Make Date Picker Work within Turbo Frames (#4142) (@ElisaShapiro)
• Add Expandable/Collapsible Rows to Basic Table Component - RAILS only (#4122) (@nickamantia)
• DARK MODE AUDIT - Radio (~#4133) (@cmhorsey)
• Enable Dark Mode in Loading Inline Text and Labels (#4130) (@cmhorsey)
• Convert Kits to Use Pb_content_tag (#4106) (@ASPhillips8)
• Phone Number Input formatAsYouType Prop (#4125) (@kangaree)
• Adding Sticky Right Column and Refactoring PBTable Enhanced Element (#4135) (@carloslimasd)
• Draggable Kit: Simplified API for List kit for Rails (#4132) (@skduncan)
• Draggable Kit: Simplified API for SelectableList for Rails (#4124) (@skduncan)
• Advanced Table - Add Table Props to Rails kit (#4107) (@ElisaShapiro)

Fixed Bugs:

• Fix Website Markdown Code Indentation (#4137) (@cmhorsey)
• Fix Doc Typos (#4136) (@yuriyivanenko)
• Fix Timeline Label and Step Spacing (#4097) (@kangaree)
• Scss fixes for Responsive Scroll for Table (#4123) (@nidaqg)

Improvements:

• Typeahead Truncated Text Docs (#4152) (@yuriyivanenko)
• Update SWIFT_CHANGELOG.md (#4138) (@jasoncypret)
• Date Picker Default Date Prop Description Update (#4129) (@ElisaShapiro)
• Add Brakeman as a Development Dependency in Playbook (#4121) (@that-jill)
• Fix Linting Errors - Typeahead Kit (#4091) (@Tomm1128)
• 'Inactive RC' Label: Skip Later Steps (#4087) (@kangaree)

New Kit:

• Icon Button Rails - BETA (#4141) (@markdoeswork)

Full Changelog

💀Skeleton Loading Kit - Smooth, Seamless Loading!✨

January 8, 2025

Say goodbye to jarring page loads and hello to a smoother user experience! The new Skeleton Loading Kit provides a lightweight and customizable placeholder while your content loads. Perfect for lists, cards, or any UI component, it’s designed to keep users engaged and your app feeling snappy. Ready to level up your loading state game? Dive in today! 🚀

14.11.1 full list of changes:

Kit Enhancements:

• Create Global Gap Prop (#4067) (@Lsimmons98)
• AdvancedTable Rails: Subrow Headers (#4088) (@nidaqg)
• Add Credit Card and CVV Masks (#4090) (@markdoeswork)
• Advanced Table Rails Refactor and Multi Column Headers (#4052) (@nidaqg)
• Create a "stickyRightcolumn" Prop for the Table kit - REACT ONLY (#4051) (@skduncan)
• Section Separator: Add Color Option (#4036) (@ASPhillips8)
• Formatting Input Text Mask Default Value (#4062) (@carloslimasd)
• Multi Column Headers for Advanced Table (#4038) (@nidaqg)
• Circle Icon Button Kit: Add Target Prop (#4054) (@Lsimmons98)

Fixed Bugs:

• Fixing Gaps between StickyRightColumns (#4101) (@carloslimasd)
• Subtle Colors to work with Card Header (#4080) (@nidaqg)
• Double Scroll Bars on "sticky" Doc Examples (#4071) (@ElisaShapiro)
• Icon Circle Size Bug Fix (#4045) (@ASPhillips8)
• Remove Default Padding in Section Separator When Children are Passed (#4029) (@Lsimmons98)
• Fixes for Timestamp Spec Failing on Year Change (#4072) (@nidaqg)

Improvements:

• Remove react-animate-height from Playbook (#4086) (@kangaree)
• Upgrade react-dropzone to 14.3.5 and File Upload Kit (#4037) (@kangaree)

New Kits:

• Skeleton Loading Component Build - Rails (#4068) (@ElisaShapiro)

Full Changelog

📊 Data that Sticks With You! 📌

December 26, 2024

The Table Kit now supports sticky columns to ensure your essential table details are always in sight. Pair that with an easy-to-implement Pagination navigation bar, and you'll never get lost in the numbers again! Need to display more complex data? Our AdvancedTable kit now also supports seamless Pagination for an even smoother experience. 🚀

14.10.0 full list of changes:

Kit Enhancements:

• Add Status Color to Card Header (#4044) (@Tomm1128)
• Table Kit: "Sticky Left Column" Variant Styling - React and Rails (#4027) (@skduncan)
• Home Address Street: "none" Emphasis Prop (#4006) (@Tomm1128)
• Adding Collapsible Trail to Rails Advanced Table (#4030) (@carloslimasd)
• Global Height Fixes (#3972) (@markdoeswork)
• Text Input Masking for React: Currency, Zip Code, Postal Code, SSN (#3986) (@kangaree)
• Collapsible Rows for Basic Table (#3967) (@nidaqg)
• Create a "stickyLeftColumn" Prop for the Table Kit - RAILS only (#3970) (@skduncan)
• Add Underline Hover Prop (#3975) (@markdoeswork)
• Adding AdvancedTable Pagination (React) (#3962) (@carloslimasd)

Fixed Bugs:

• Form Group Error State Alignment (#4004) (@Tomm1128)
• Change Playground Key (#3984) (@Lsimmons98)
• Fix Sort Function on Rails Advanced Table (#3974) (@Tomm1128)
• Avatar Badge Overlay Border Bug Fix (#3976) (@ASPhillips8)

Improvements:

• Dark Mode Audit - Gauge (#4015) (@Lsimmons98)
• Skip RC Process with 'Inactive RC' Label (#4021) (@kangaree)
• Playbook Website Redirects - Go to Parent Not Home (#4013) (@Tomm1128)
• Icon Integration Docs: Nav Bar and About Page (#4007) (@kangaree)
• Dark Mode Audit - Typeahead (#3983) (@Lsimmons98)
• SkeletonLoading User Component and Filter Component Doc Examples (#4014) (@ElisaShapiro)
• Change BarGraph Override Example (#3982) (@markdoeswork)
• Make Link Kit Live and Update ‘visited’ Color (#3997) (@markdoeswork)
• Bread Crumbs Dark Mode Fix (#3973) (@ASPhillips8)
• Dark Mode Audit Stat Change (#3968) (@ASPhillips8)
• Dark Mode Audit - Caption and Title (#3961) (@Lsimmons98)
• Dark Mode Audit - File Upload Kit (#3954) (@Lsimmons98)
• Dark Mode Audit - Nav (#3950) (@Tomm1128)
• Dark Mode Audit - Selectable Card (#3953) (@Lsimmons98)
• Update SWIFT_CHANGELOG.md to Reflect 6.5.1 Release (#3971) (@RachelRadford21)

Full Changelog

🪄 New Width Global Prop — Apply Widths With Ease!

November 29, 2024

Introducing a new way to set widths on components without using custom CSS! Available on every component, the width prop accepts Playbook spacing values as well as 0% and 100%.

14.9.0 full list of changes:

Kit Enhancements:

• Roll Out Height Global Props (#3944) (@kangaree)
• Add Red "Danger" Button Variant For Delete Actions (#3949) (@skduncan)
• Implementing Rails Advanced Table Custom Cell With Kits (#3952) (@carloslimasd)
• Create A "StickyLeftColumn" Prop For The Table Kit (#3913) (@nickamantia)
• Rails Typeahead Form Integration (#3917) (@ElisaShapiro)
• Height Global Props (#3910) (@markdoeswork)
• Drawer Menu Behavior (#3932) (@markdoeswork)

Fixed Bugs:

• Move Negative Sign To Left Of Currency Sign (#3921) (@kangaree)
• Fixes For Custom Trigger Not Working (#3958) (@nidaqg)
• Fix For PhoneNumberInput CSS Conflict (#3922) (@jasperfurniss)
• Dropdown Rails To Have Position Absolute On Container (#3933) (@nidaqg)

Improvements:

• Width Global Prop (#3943) (@skduncan)
• Bump @Floating-Ui/React From 0.22.2 To 0.26.23 (#3926) (@skduncan)
• Dependency Update/Upgrade-@Tanstack/React-Table (8.9.2 -> 8.20.5) (#3951) (@skduncan)
• Timeline Kit: Add A Vertical "With Children" Doc Example (#3890) (@kangaree)
• Adding Rails Indeterminate Checkbox Variant Doc (#3918) (@carloslimasd)
• Dependency Display: Add Flex Section For Summary Display [2 Of 2] (#3875) (@skduncan)
• Update Playbook-Swift Changelog (#3901) (@isismsilva)

Full Changelog

🐉 Draggable Kit Now Available For Rails! ✨

November 18, 2024

Now introducing the Draggable Kit for Rails! It’s easy to implement with a simple, flexible subcomponent structure right out of the box and works with almost any kit. Like its React counterpart, it’s fully customizable to fit your Rails project’s unique needs.

14.8.0 full list of changes:

Kit Enhancements:

• Remove react-modal from Drawer Kit (#3891) (@markdoeswork)
• Add Color Hover Docs and Fix Background Hover (#3874) (@markdoeswork)
• Adding defaultDate Prop to Date Picker Quick Pick Variant (#3907) (@carloslimasd)
• Timeline Small Variant: Add "Gap" Prop to Timeline Kit (#3903) (@skduncan)

Fixed Bugs:

• Fix Dark Mode Date Colors- Dots, Icons, and Captions (#3894) (@kangaree)

Improvements:

• Global Hover Visibility Prop (#3905) (@kangaree)
• Bump intl-tel-input from 24.6.0 to 24.7.0 (#3895) (@dependabot)
• Fixing Github Action Errors (#3904) (@jasperfurniss)
• Semver Targets Trigger Correct RCs - Update Version (#3831) (@skduncan)
• Semver Targets Trigger Correct RCs - Check Label (#3822) (@skduncan)

New Kits:

• Draggable Kit in Rails (#3863) (@nidaqg)

Full Changelog

Go Further With Our Custom Timelines!

November 8, 2024

The Timeline kit now lets you swap in custom components, allowing clear, adaptable tracking for projects, processes, and user journeys. This enables your Timelines to be more informative and lets you adjust it to fit your needs!

14.7.0 full list of changes:

Kit Enhancements:

• Custom Cells for Advanced Table First Column (#3889) (@nidaqg)
• Group hover Global Prop (#3833) (@markdoeswork)
• Timeline Sub Components (#3801) (@markdoeswork)
• Tooltip for Truncated Form Pills (#3856) (@ElisaShapiro)
• Currency Kit Comma Separator (#3867) (@jasperfurniss)

Fixed Bugs:

• Fix Height Prop for HtmlOptions Support (#3873) (@jasperfurniss)
• Fix Overflow Container Bug by Using Padding Instead of Outline (#3807) (@kangaree)

Improvements:

• Bump @tiptap/extension-document from 2.1.12 to 2.6.6 (#3879) (@skduncan)
• Fixing parsing kits props (#3857) (@carloslimasd)
• Bump lazysizes from 5.2.2 to 5.3.2 (#3855) (@skduncan)
• Font Awesome Setup Docs: JS Bundle and Asset Pipeline - Phase 2 (#3878) (@kangaree)
• Add Details to Dependencies Docs (#3885) (@markdoeswork)
• Font Awesome Setup Documentation - Phase 1 (#3865) (@kangaree)
• Add Dependencies to Getting Started Page (#3864) (@markdoeswork)
• Swift Changelog Update (#3854) (@RachelRadford21)
• Add README.md to Root in Dist for NPM (#3853) (@kangaree) Update Sentry DSNs (#3843) (@benlangfeld)

New Kits:

• Beta Skeleton Loading Kit - React (#3876) (@ElisaShapiro)
• Beta Link Kit (#3852) (@kangaree)

Full Changelog

Supercharge Your Tables: Custom Components in Advanced Table Cells!

October 22, 2024

We’re excited to announce a new level of flexibility for your tables! The Advanced Table now supports custom components within individual cells. Using the optional customRenderer in columnDefinition, you can access not only the current cell's value but also the entire row's data. This opens up powerful possibilities to render dynamic, tailored content in each cell with ease.

14.6.2 full list of changes:

Kit Enhancements:

• Custom Width for Popover Kit and PopoverProps for Filter Kit #3827 (ElisaShapiro)
• Dropdown Kit - States & Variant Prop #3828 (nickamantia)
• Custom Cells for Advanced Table #3821 (nidaqg)
• Multiple User Bubble Size Prop #3719 (markdoeswork)
• Adding React Dropdown Clearing Feature #3793 (carloslimasd)
• Filter Kit - Filter Kit Displaying Zero Results #3799 (ElisaShapiro)
• Add Reset Functionality to Rails side of MultiLevelSelect #3792 (nidaqg)
• Allow Children for MultiLevelSelect #3661 (nidaqg)
• Loading State for Rails Form, Resolution of Dialog Loading #3753 (skduncan)

Fixed Bugs:

• Advanced Table Kit "toggle all" is Inverted in Rails #3790 (ElisaShapiro)
• Truncating the Typeahead FormPill Text #3738 (carloslimasd)
• Fixing icon display for markdown helper #3754 (skduncan)
• Set Total Tickets Hero Gauge Height to 150px instead of 25% #3752 (kangaree)
• Dropdown ClassName Fix #3845 (@nickamantia)

Improvements:

• Upgrade intl-tel-input to Latest and Make Fixes #3791 (kangaree)
• Bump react-zoom-pan-pinch from 2.6.1 to 3.6.0 #3817 (kangaree)
• Update react modal version #3819 (markdoeswork)
• Add rdbms to playbook-website #3778 (indiebrain)
• Show htmlOptions as a Global Prop #3755 (skduncan)
• Support Multiple Versions of ruby/psych #3751 (xjunior)
• More storage for CI image builds #3767 (benlangfeld)

Full Changelog