playbook_ui 16.4.0.pre.alpha.PLAY2863railsselectlabelsfor15352 → 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 679636ec60f350169c8c53634ec4bf921a35a4137bba71083397024dca9bdf10
-  data.tar.gz: 2c31222c1a22ec285852c79ca7456157f49916fc31fc6a8d2cd2399089efa1d0
+  metadata.gz: 21855ec8daced0bc073482bcbf66b959ad76a196a6ea7a974d9a7de932f1b1a9
+  data.tar.gz: 32376b89618eee8730e81f9c15905713a1a8e9e133c678351002a254532cc687
 SHA512:
-  metadata.gz: 9926c658b53ce0644d86b3f418ebb3d210876332326e0a8c19657c9ca89c83e9ad50604d26476c9a894e3e121ee7476519bdd91aaba85a881c899c97d7f7f2e2
-  data.tar.gz: 46a6ed5fdd63e3c7107c28f56233982575efbb8a696f21abef23e2f8d9c35ca4435f899b4634a68e68332c91735cee794dab057ce84cf5cbaa714541cbb34ea2
+  metadata.gz: 64a631056bcb1f146451812f20a591fca787188feded58d5b78aebbd4616fe9b52c4e11750fbcdb446b5debd2d5aa391a264d0073deb499583db556f87dabeb5
+  data.tar.gz: 1163aebdf5a6439e03ab5fd670e8a4fdd97c05c663c96967687df221eba7ca822cc81915e2ba0351c509118f0ad105f494560fcd4f54b74baf04554f914065aa

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -674,18 +674,12 @@
     @each $color_name, $color_value in $border_color_options {
       &.column-group-border-#{$color_name} {
         @if $theme == "light" {
-          &:not(.advanced-table-no-table-container) {
-            @include advanced-table-sticky-wrapper-frame($color_value);
-          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $white,
             lighten($silver, $opacity_7)
           );
         } @else if $theme == "dark" {
-          &:not(.advanced-table-no-table-container) {
-            @include advanced-table-sticky-wrapper-frame($color_value);
-          }
           @include advanced-table-sticky-mixin(
             $color_value,
             $bg_dark_card,
@@ -721,10 +715,6 @@
       width: 100%;
       @include scrollbar-styling;
 
-      &:not(.advanced-table-no-table-container) {
-        @include advanced-table-sticky-wrapper-frame($border_light);
-      }
-
       // These are the responsive borders that should NOT inherit the custom color
       @include advanced-table-sticky-mixin(
         $border_light,
@@ -1018,11 +1008,6 @@
       .sticky-left {
         background-color: $bg_dark;
       }
-
-      &:not(.advanced-table-no-table-container) {
-        @include advanced-table-sticky-wrapper-frame($border_dark);
-      }
-
       @include advanced-table-sticky-mixin(
         $border_dark,
         $bg_dark_card,
@@ -1041,10 +1026,6 @@
           }
         }
 
-        &:not(.advanced-table-no-table-container) {
-          @include advanced-table-sticky-wrapper-frame($border_dark);
-        }
-
         // These are the responsive borders that should NOT inherit the custom color
         @include advanced-table-sticky-mixin(
           $border_dark,

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -127,8 +127,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     fullScreenControl,
   } = props;
 
-  const noTableCardContainer = tableProps?.container === false;
-
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -283,7 +281,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
-    { 'advanced-table-no-table-container': noTableCardContainer },
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
     scrollBarNone ? 'advanced-table-hide-scrollbar' : '',
     globalProps(props),

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -48,16 +48,9 @@ module Playbook
           hidden_action_bar_class,
         ]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
-        additional_classes << "advanced-table-no-table-container" if no_table_card_container?
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
 
-      def no_table_card_container?
-        return false unless table_props.is_a?(Hash)
-
-        table_props[:container] == false || table_props["container"] == false
-      end
-
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -1,9 +1,3 @@
-// Acts as outer “card frame” on the advanced-table wrapper (table-card from Table) is included from `_advanced_table.scss` only when `:not(.advanced-table-no-table-container)`/container: false is not present.
-@mixin advanced-table-sticky-wrapper-frame($border-color) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
-}
-
 @mixin advanced-table-sticky-mixin(
   $border-color,
   $bg-main,
@@ -11,6 +5,8 @@
   $highlight: #E5EEFA,
   $highlight-dark: #202850,
 ) {
+  border-radius: 4px;
+  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
   display: block;
   [class^="pb_table"].table-sm.table-card thead tr th:first-child,
   [class^="pb_table"].table-sm:not(.no-hover).table-card

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.md

@@ -0,0 +1 @@
+This button is used many times for mobile or other things like cards and sidebars.

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb

@@ -27,3 +27,28 @@
   icon: "user",
   loading: true
 }) %>
+
+
+<%= pb_rails("button", props: { margin_top: "md", text: "Open Dialog to confirm PLAY-2837 fix still works", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: {
+        id:"dialog-1",
+        size: "md",
+        title: "Header Title is the Title Prop"
+}) do %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
+        <%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+        <div style="height: 800px; background-color: lightgray;"></div>
+        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
+        <%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+    <% end %>
+
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
+            <%= pb_rails("circle_icon_button", props: { loading: true, icon: "plus" }) %>
+            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx

@@ -1,43 +1,102 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import CircleIconButton from '../_circle_icon_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Button from '../../pb_button/_button'
 
-const CircleIconButtonLoading = (props) => (
-  <div>
-    <CircleIconButton
-        icon="plus"
-        loading
-        variant="primary"
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        icon="pen"
-        loading
-        variant="secondary"
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        disabled
-        icon="times"
-        loading
-        {...props}
-    />
-
-    <br />
-
-    <CircleIconButton
-        icon="user"
-        loading
-        variant="link"
-        {...props}
-    />
-  </div>
-)
+const CircleIconButtonLoading = (props) => {
+
+
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return (
+    <div>
+      <CircleIconButton
+          icon="plus"
+          loading
+          variant="primary"
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          icon="pen"
+          loading
+          variant="secondary"
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          disabled
+          icon="times"
+          loading
+          {...props}
+      />
+
+      <br />
+
+      <CircleIconButton
+          icon="user"
+          loading
+          variant="link"
+          {...props}
+      />
+          <>
+        <Button marginTop="md"
+            onClick={open}
+        >
+          {'Open Dialog to confirm PLAY-2837 fix still works for circle icon buttons'}
+        </Button>
+        <Dialog
+            onCancel={close}
+            onClose={close}
+            onConfirm={close}
+            opened={isOpen}
+            size="md"
+            title="Header Title is the Title Prop"
+        >
+          <Dialog.Body>
+              <Button
+                  aria={{ label: 'Loading' }}
+                  loading
+                  text="Button Primary"
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+              <div style={{height: '800px', backgroundColor: 'lightgray'}} />
+              <Button
+                  loading
+                  text="Loading..."
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button
+                  loading
+                  text="Send My Issue"
+              />
+              <CircleIconButton
+                  icon="plus"
+                  loading
+              />
+              <Button  variant="link">
+                {"Back"}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+      </>
+    </div> 
+  )
+}
 
 export default CircleIconButtonLoading

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -51,7 +51,6 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[] | any;
   onChange?: (event: { target: { name?: string; value: any } }) => void;
   onSelect?: (prop: { [key: string]: any }) => void;
-  placeholder?: string;
   selectedIds?: string[] | any;
   variant?: "multi" | "single";
   wrapped?: boolean;
@@ -101,7 +100,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       treeData,
       onChange = () => null,
       onSelect = () => null,
-      placeholder: placeholderText = "Start typing...",
       selectedIds,
       variant = "multi",
       wrapped,
@@ -677,7 +675,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                       ? `${itemsSelectedLength()} ${
                           itemsSelectedLength() === 1 ? "item" : "items"
                         } selected`
-                      : placeholderText
+                      : "Start typing..."
                   }
                     required={required}
                     value={singleSelectedItem.value || filterItem}

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -18,7 +18,6 @@ examples:
     - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
-    - multi_level_select_placeholder: Placeholder
 
   react:
     - multi_level_select_default: Default
@@ -41,4 +40,3 @@ examples:
     - multi_level_select_single_disabled: Disabled Options (Single Select)
     - multi_level_select_required_indicator: Required Indicator
     - multi_level_select_react_reset_key: Reset with Key (React)
-    - multi_level_select_placeholder: Placeholder

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -18,4 +18,3 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
 export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
 export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
 export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
-export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,8 +32,6 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
-      prop :placeholder, type: Playbook::Props::String,
-                         default: "Start typing..."
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
       prop :show_checked_children, type: Playbook::Props::Boolean,
@@ -52,7 +50,6 @@ module Playbook
           inputDisplay: input_display,
           name: name,
           label: label,
-          placeholder: placeholder,
           treeData: tree_data,
           required: required,
           requiredIndicator: required_indicator,

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -173,33 +173,6 @@ describe('MultiLevelSelect', () => {
     expect(label).toHaveTextContent("Select Location")
     expect(label).not.toHaveTextContent("*")
   })
-
-  test('should use default placeholder when none is passed', () => {
-    render(
-      <MultiLevelSelect
-          data={{ testid: testId }}
-          id="mls-placeholder-default"
-          treeData={treeData}
-      />
-    )
-    expect(
-      screen.getByPlaceholderText('Start typing...')
-    ).toBeInTheDocument()
-  })
-
-  test('should use custom placeholder when passed', () => {
-    render(
-      <MultiLevelSelect
-          data={{ testid: testId }}
-          id="mls-placeholder-custom"
-          placeholder="Choose items…"
-          treeData={treeData}
-      />
-    )
-    expect(
-      screen.getByPlaceholderText('Choose items…')
-    ).toBeInTheDocument()
-  })
 })
 
 describe('MultiLevelSelect multi variant', () => {

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-food-attributes",
   attributes: {
     data: { options: "data_attribute" },
   },

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-location",
   label: "Where do you live",
   name: "location",
   blank_selection: "Select One...",

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

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { id: "holiday", label: "Favorite Holiday" }) do %>
+<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
   <select name="holiday" id="holiday">
     <option value="1">Christmas</option>
     <option value="2">Thanksgiving</option>

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

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { id: "animal", label: "Favorite Animal" }) do %>
+<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
   <select name="animal" id="animal">
     <optgroup label="Mammal">
       <option value="1">Cat</option>

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-favorite-food",
   label: "Favorite Food",
   name: "food",
   options: [

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-dessert-disabled",
   label: "Favorite Dessert",
   disabled: true,
   name: "dessert",

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-coffee",
   label: "Favorite Coffee",
   name: "coffee",
   options: [

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

@@ -1,6 +1,5 @@
 <%= pb_rails("select", props: {
   error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
-  id: "select-food-error",
   label: "Favorite Food",
   name: "food",
   options: [

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-food-inline",
   label: "Favorite Food",
   name: "food",
   inline: true,

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-food-inline-compact",
   label: "Favorite Food",
   name: "food",
   inline: true,

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-food-inline-arrow",
   label: "Favorite Food",
   name: "food",
   inline: true,

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-food-multiple",
   label: "Favorite Food",
   name: "food",
   multiple: true,

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-shoe-required",
   label: "Which shoe do you tie first?",
   required: true,
   name: "shoe",

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-snacks-required-indicator",
   label: "Favorite Snacks",
   name: "food",
   required_indicator: true,

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

@@ -1,5 +1,4 @@
 <%= pb_rails("select", props: {
-  id: "select-sport",
   label: "Favorite Sport",
   name: "sports",
   options: [

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,17 +2,17 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <%= tag.label(class: "pb_select_kit_label", for: object.select_input_id) do %>
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <% if object.required_indicator %>
         <%= pb_rails("caption", props: { color: "lighter", dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
-        <% end %>
+        <% end %>       
       <% else %>
         <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
-    <% end %>
+    </label>
   <% end %>
-  <%= tag.label(class: object.select_wrapper_class, for: object.select_input_id) do %>
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
@@ -32,5 +32,5 @@
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
-  <% end %>
+  </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -46,11 +46,6 @@ module Playbook
         }.merge(attributes).merge(input_options)
       end
 
-      # Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
-      def select_input_id
-        all_attributes[:id].presence
-      end
-
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -55,7 +55,6 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
-      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

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

@@ -26,9 +26,8 @@ The Table kit automatically sets these Filter defaults (which you can override v
 - `min_width: "xs"`
 - `popover_props: { width: "350px" }`
 
-Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
 
 **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 as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
+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).

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -41,7 +41,6 @@ examples:
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
-    - table_with_filter_variant_external_filter_rails: Variant with Filter (External Filter)
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
     - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -16,10 +16,7 @@
       flex_direction: "column",
       gap: "none"
     }) do %>
-      <% has_filter = object.filter.present? || object.filter_content.present? %>
-      <% if object.filter.present? %>
-        <%= object.filter %>
-      <% elsif object.filter_content.present? %>
+      <% if object.filter_content.present? %>
         <%
           default_filter_props = {
             background: false,
@@ -34,7 +31,7 @@
           <%= object.filter_content %>
         <% end %>
       <% end %>
-      <%= pb_rails("section_separator") if has_filter %>
+      <%= pb_rails("section_separator") if object.filter_content.present? %>
       <% if object.pagination.present? %>
         <%= object.pagination %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -46,10 +46,6 @@ module Playbook
       prop :filter_props, type: Playbook::Props::HashProp,
                           default: {}
       prop :filter_content
-      # Pre-rendered filter slot (e.g. output of capture { your_filter_helper }).
-      # When present, this is rendered as-is; filter_content and filter_props are ignored.
-      # Use this for manual filter submission or app-specific filter helpers.
-      prop :filter
       prop :pagination
       prop :title, type: Playbook::Props::String,
                    default: nil