playbook_ui 15.6.0.pre.alpha.play263913015 → 15.6.0.pre.alpha.play265012865

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {})
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = super(name, collection, value_method, text_method, options, html_options)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/forms/builder/select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = super(name, choices, options, html_options, &block)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/forms/builder/time_zone_select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def time_zone_select_field(name, choices = {}, options = {}, html_options = {}, props: {})
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = @template.time_zone_select(@object_name, name, choices, options, html_options)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.6.0"
-  VERSION = "15.6.0.pre.alpha.play263913015"
+  VERSION = "15.6.0.pre.alpha.play265012865"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.6.0.pre.alpha.play263913015
+  version: 15.6.0.pre.alpha.play265012865
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-11 00:00:00.000000000 Z
+date: 2025-12-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2935,9 +2935,6 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.md
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.md
@@ -3245,14 +3242,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
@@ -3810,6 +3799,7 @@ files:
 - app/pb_kits/playbook/tokens/exports/_typography.module.scss
 - app/pb_kits/playbook/tokens/exports/exports.d.ts
 - app/pb_kits/playbook/tokens/index.scss
+- app/pb_kits/playbook/utilities/DEPRECATION_WARNINGS.md
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_border_radius.scss
 - app/pb_kits/playbook/utilities/_colors.scss
@@ -3833,6 +3823,7 @@ files:
 - app/pb_kits/playbook/utilities/_truncate.scss
 - app/pb_kits/playbook/utilities/_vertical_align.scss
 - app/pb_kits/playbook/utilities/_width.scss
+- app/pb_kits/playbook/utilities/deprecated.ts
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
@@ -3872,9 +3863,9 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-CHwm9MTE.js
+- dist/chunks/_typeahead-Mjy3POtc.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-Cugvy62C.js
+- dist/chunks/lib-CgpqUb6l.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-rails-react-bindings.js

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb

@@ -1,16 +0,0 @@
-<%= pb_rails("select", props: {
-  label: "Favorite Food",
-  name: "favorite_food",
-  options: [
-    { value: "pizza", value_text: "Pizza" },
-    { value: "tacos", value_text: "Tacos" },
-    { value: "sushi", value_text: "Sushi" }
-  ],
-  input_options: {
-    'aria-label': "Select your favorite food",
-    class: "custom-select-class",
-    data: { controller: "search", action: "change->search#filter" },
-    id: "favorite-food-select"
-  }
-}) %>
-

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import Select from '../_select'
-
-const SelectInputOptions = (props) => {
-  const options = [
-    { value: 'pizza', text: 'Pizza' },
-    { value: 'tacos', text: 'Tacos' },
-    { value: 'sushi', text: 'Sushi' },
-  ]
-
-  return (
-    <>
-      <Select
-          inputOptions={{
-            'aria-label': 'Select your favorite food',
-            className: 'custom-select-class',
-            id: 'favorite-food-select',
-          }}
-          label="Favorite Food"
-          name="favorite_food"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default SelectInputOptions
-

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -1 +0,0 @@
-Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.jsx

@@ -1,134 +0,0 @@
-import React, { useState } from "react"
-import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
-
- // Mock Data for Table  
-  const users = [
-    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
-    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
-    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
-    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
-    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
-    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
-    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
-    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
-    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
-  ]
-
-const TableWithFilterVariant = () => {
-  const [territory, setTerritory] = useState("")
-
-  // --------Filter content example ------
-  const filterContent = ({ closePopover }) => (
-          <>
-            <TextInput
-                label="Territory ID"
-                onChange={event => setTerritory(event.target.value)}
-                value={territory}
-            />
-
-            <Typeahead
-                label="Title"
-                options={[
-                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
-                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
-                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
-                ]}
-            />
-
-            <Select
-                blankSelection="All Departments"
-                label="Department"
-                options={[
-                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
-                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
-                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
-                ]}
-            />
-
-            <Dropdown
-                label="Branch"
-                options={[
-                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
-                  { key: "New York", label: "New York", value: "new-york" },
-                  { key: "Austin", label: "Austin", value: "austin" }
-                ]}
-            />
-
-            <DatePicker
-                label="Start Date"
-                paddingY="sm"
-                pickerId="startedOn"
-            />
-            <Flex spacing="between">
-            <Button
-                onClick={() => {
-                  alert("No filtering functionality - just a pattern demo!")
-                  closePopover()
-                }}
-                text="Filter"
-            />
-            <Button
-                text="Defaults"
-                variant="secondary"
-            />
-            </Flex>
-          </>
-        )
-  // -------End Filter content example ------
-  
-  return (
-    <Table 
-        filterContent={filterContent}
-        filterProps={{
-          results: 50,
-          sortOptions: {
-            territory_id: "Territory ID",
-            first_name: "Name",
-            started_on: "Start Date",
-            department_name: "Department",
-            title_name: "Title",
-            branch_branch_name: "Branch",
-          },
-          sortValue: [{ name: 'started_on', dir: 'asc' }],
-        }}
-        title="Table Title Here"
-        variant="withFilter"
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Territory ID'}</Table.Header>
-          <Table.Header>{'Name'}</Table.Header>
-          <Table.Header>{'Title'}</Table.Header>
-          <Table.Header>{'Department'}</Table.Header>
-          <Table.Header>{'Branch'}</Table.Header>
-          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        {users.map((user) => (
-          <Table.Row key={user.id}>
-            <Table.Cell 
-                marginX={{ xs: "sm" }}
-                numberSpacing="tabular"
-            >
-                {user.id}
-            </Table.Cell>
-            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
-            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
-            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
-            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
-            <Table.Cell marginX={{ xs: "sm" }}>
-              <DateKit 
-                  alignment="right"
-                  showCurrentYear
-                  value={user.startDate}
-              />
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithFilterVariant

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant.md

@@ -1,34 +0,0 @@
-Set the `variant` prop to `withFilter` to render a Table with a filter. The variant automatically handles:
-
-- Card wrapper with standard responsive margins
-- Optional `title` prop to render title above the card
-- Filter component rendering with Design defaults
-- SectionSeparator between filter and table
-- Flex layout for proper alignment
-
-#### Required Props
-
-- `variant="withFilter"`: Enables the filter variant
-- `filterContent`: A function that receives `{ closePopover }` and returns the filter's body content (inputs, buttons, etc.). Use this to pass in all input kits, etc needed inside the Filter itself.
-- `filterProps`: An object containing Filter-specific props like `results`, `sortOptions`, `sortValue`, etc.
-
-#### Optional Props
-
-- `title`: Displays a title above the card
-- All standard Table props (`size`, `collapse`, etc.) can be used, but defaults are already set to match Design guidelines
-- All standard Filter props can be used, but defaults are already set to match Design guidelines.
-
-#### Default Filter Props
-
-The Table kit automatically sets these Filter defaults (which you can override via `filterProps`):
-
-- `background={false}`
-- `maxHeight="50vh"`
-- `minWidth="xs"`
-- `popoverProps={{ width: "350px" }}`
-
-
-**IMPORTANT NOTE**: 
-The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
-
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/react).

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.html.erb

@@ -1,101 +0,0 @@
-    <% users = [
-        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
-        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
-        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
-        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
-        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
-        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
-        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
-        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
-        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
-    ] %>
-
-<% filter_content = 
-    pb_rails("text_input", props: {
-      label: "Territory ID",
-      placeholder: "Enter Territory ID"
-    }) +
-    pb_rails("typeahead", props: {
-      label: "Title",
-      options: [
-        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
-        { label: "UX Engineer", value: "ux-engineer" },
-        { label: "UX Designer", value: "ux-designer" }
-      ]
-    }) +
-    pb_rails("select", props: {
-      blank_selection: "All Departments",
-      label: "Department",
-      options: [
-        { value: "Business Technology", text: "Business Technology" },
-        { value: "Customer Development", text: "Customer Development" },
-        { value: "Talent Acquisition", text: "Talent Acquisition" }
-      ]
-    }) +
-    pb_rails("dropdown", props: {
-      label: "Branch",
-      options: [
-        { label: "Philadelphia", value: "philadelphia" },
-        { label: "New York", value: "new-york" },
-        { label: "Austin", value: "austin" }
-      ]
-    }) +
-    pb_rails("date_picker", props: {
-      label: "Start Date",
-      padding_y: "sm",
-      picker_id: "startedOn"
-    }) +
-    pb_rails("flex", props: { spacing: "between" }) do
-      pb_rails("button", props: {
-        text: "Filter",
-      }) +
-      pb_rails("button", props: {
-        text: "Defaults",
-        variant: "secondary"
-      })
-    end
-%>
-
-<%= pb_rails("table", props: {
-  variant: "with_filter",
-  title: "Table Title Here",
-  filter_content: filter_content,
-  filter_props: {
-    id: "user-table-filters-1",
-    results: 9,
-    sort_menu: [
-        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
-        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
-        { item: "Title", link: "?q[sorts]=title+asc", active: false },
-        { item: "Department", link: "?q[sorts]=department+asc", active: false },
-        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
-        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
-    ],
-  }
-}) do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("table/table_body") do %>
-    <% users.each do |user| %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
-        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
-           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md

@@ -1,33 +0,0 @@
-Set the `variant` prop to `with_filter` to render a Table with a filter. The variant automatically handles:
-
-- Card wrapper with standard responsive margins
-- Optional `title` prop to render title above the card
-- Filter component rendering with Design defaults
-- SectionSeparator between filter and table
-- Flex layout for proper alignment
-
-#### Required Props
-
-- `variant: "with_filter"`: Enables the filter variant
-- `filter_content`: The filter's body content (inputs, buttons, etc.) built with `pb_rails` string concatenation
-- `filter_props`: A hash containing Filter-specific props like `results`, `sort_menu`, etc.
-
-#### Optional Props
-
-- `title`: Displays a title above the card
-- All standard Table props (`size`, `collapse`, etc.) can be used, but defaults are already set to match Design guidelines
-
-#### Default Filter Props
-
-The Table kit automatically sets these Filter defaults (which you can override via `filter_props`):
-
-- `background: false`
-- `max_height: "50vh"`
-- `min_width: "xs"`
-- `popover_props: { width: "350px" }`
-
-
-**IMPORTANT NOTE**: 
-The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
-
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).