playbook_ui 16.4.0.pre.alpha.PLAY2718containerfalseborderradiusresponsiveonly15164 → 16.4.0.pre.alpha.PLAY2864circleiconbuttonloadingalignrails15138

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: deb30921ab6e5e0a134bf71decaef200f0a7e9393ab5ae6a926f6267604f80b9
-  data.tar.gz: b5ea71e20d11bffda695d920587c509123a5f31f59c7833a784a6d380a5112f7
+  metadata.gz: 21855ec8daced0bc073482bcbf66b959ad76a196a6ea7a974d9a7de932f1b1a9
+  data.tar.gz: 32376b89618eee8730e81f9c15905713a1a8e9e133c678351002a254532cc687
 SHA512:
-  metadata.gz: 9eebe12c7de1c4073455e4bb2aea103157aa92c7a27f75bb11d75bd85914b414076700d3468c062e80dea2966cc62c68779398c44eb64ff791ff399904ab05c1
-  data.tar.gz: c3051d4e9ef1e226b78c3d486fec6cb2c972c2a0e076d4d68a8e1a74246b36e6496e90e64d0e554e6ad1ce681c705abcb41b644ca0bf0dc6312a3511c3f8d9a8
+  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/docs/_advanced_table_table_props.html.erb

@@ -30,34 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("caption", props: { text: "Default Advanced Table Table Props Doc Example" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
-
-<%= pb_rails("caption", props: { text: "Advanced Table with just container: false" }) %>
-<%= pb_rails("advanced_table", props: { id: "table_props_table_2", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false }}) %>
-
-<%= pb_rails("caption", props: { text: "Typical set up: Card and Flex around Filter, SectionSeparator, and AdvancedTable with container: false" }) %>
-<%= pb_rails("card", props: { padding: "none", margin_bottom: "xl" }) do %>
-  <%= pb_rails("flex", props: { align: "stretch", orientation: "column", gap: "none" }) do %>
-    <%= pb_rails("filter", props: {
-      background: false,
-      max_height: (@table_data.to_a.size < 10) ? "50vh" : "none",
-      min_width: "xs",
-      popover_props: { width: "350px" },
-      id: "rails-table-props-filter-with-data",
-      template: "single",
-      results: @table_data.to_a.size,
-    }) do %>
-      <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-        <%= form.number_field :new_leads_eq, props: { label: "New Leads" } %>
-        <%= form.text_field :conversion_rate_eq, props: { label: "Conversion Rate" } %>
-        <%= form.actions do |action| %>
-          <%= action.submit props: { text: "Filter" } %>
-          <%= action.button props: { type: "reset", text: "Defaults", variant: "secondary" } %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("section_separator") %>
-    <%= pb_rails("advanced_table", props: { id: "rails_template_advanced_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false } }) %>
-  <% end %>
-<% end %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,13 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
-import Button from "../../pb_button/_button"
-import Caption from "../../pb_caption/_caption"
-import Card from "../../pb_card/_card"
-import Filter from "../../pb_filter/_filter"
-import Flex from "../../pb_flex/_flex"
-import SectionSeparator from "../../pb_section_separator/_section_separator"
-import TextInput from "../../pb_text_input/_text_input"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -47,100 +40,14 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
-  const filterPopoverProps = { width: "350px" }
-
-  const filterForm = (closePopover) => (
-    <form>
-      <TextInput
-          label="New Leads"
-          name="new_leads_eq"
-          placeholder="0"
-          type="number"
-          {...props}
-      />
-      <TextInput
-          label="Conversion Rate"
-          name="conversion_rate_eq"
-          placeholder="e.g. 12%"
-          {...props}
-      />
-      <Flex
-          spacing="between"
-          {...props}
-      >
-        <Button
-            onClick={closePopover}
-            text="Filter"
-            {...props}
-        />
-        <Button
-            text="Defaults"
-            type="reset"
-            variant="secondary"
-            {...props}
-        />
-      </Flex>
-    </form>
-  )
-
   return (
     <div>
-      <Caption
-          text="Default Advanced Table Table Props Doc Example"
-      />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
-      <Caption
-          text="Advanced Table with just container: false"
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          marginBottom="md"
-          tableData={MOCK_DATA}
-          tableProps={{container: false}}
-          {...props}
-      />
-
-      <Caption
-          text="Typical set up: Card and Flex around Filter, SectionSeparator, and AdvancedTable with container: false"
-      />
-      <Card
-          marginBottom="xl"
-          padding="none"
-          {...props}
-      >
-        <Flex
-            align="stretch"
-            gap="none"
-            orientation="column"
-            {...props}
-        >
-          <Filter
-              background={false}
-              id="react-table-props-filter-with-data"
-              maxHeight={MOCK_DATA.length < 10 ? "50vh" : "none"}
-              minWidth="xs"
-              popoverProps={filterPopoverProps}
-              results={MOCK_DATA.length}
-              {...props}
-          >
-            {({ closePopover }) => filterForm(closePopover)}
-          </Filter>
-          <SectionSeparator {...props} />
-          <AdvancedTable
-              columnDefinitions={columnDefinitions}
-              id="react_template_advanced_table"
-              tableData={MOCK_DATA}
-              tableProps={{container: false}}
-              {...props}
-          />
-        </Flex>
-      </Card>
     </div>
   )
 }

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_circle_icon_button/_circle_icon_button.scss

@@ -43,6 +43,11 @@ $pb_button_styles: (
       @include pb_circle_icon_button;
     }
   }
+
+  .pb_button_kit.pb_button_loading svg.loading-icon {
+    position: absolute;
+  }
+
   :first-child {
     &.pb_button_kit.pb_button_link {
       @include pb_circle_icon_button_active;

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