playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -4,28 +4,6 @@ import { Avatar } from '../..'
 const AvatarBadgeComponentOverlay = () => {
     return (
         <div>
-            <Avatar
-                componentOverlay={{
-                    component: "badge",
-                    placement: "top-left",
-                    text: "12"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xxs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "badge",
-                    placement: "top-right",
-                    text: "12"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xs"
-            />
-
             <Avatar
                 componentOverlay={{
                     component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "bottom-left",
+                    placement: "top-left",
                     text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-left",
-                    text: "12"
+                    placement: "top-center",
+                    text: "On Roadtip",
+                    variant: "info"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-right",
-                    text: "12"
+                    placement: "bottom-center",
+                    text: "Out of Office",
+                    variant: "error"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            />    
-
+            /> 
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md

@@ -0,0 +1,3 @@
+NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
+
+When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb

@@ -1,32 +1,9 @@
-<%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "icon_circle",
-        icon: "plus",
-        placement: "top-left"
-    },
-    name: "Terry Johnson",
-    size: "xxs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
-
-  <%= pb_rails("avatar", props: {
-    component_overlay: {
-        component: "icon_circle",
-        icon: "plus",
-        placement: "top-right"
-    },
-    name: "Terry Johnson",
-    size: "xs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    margin_bottom: "sm"
-  }) %>
-
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "bottom-right"
+        icon: "shield",
+        placement: "bottom-right",
+        variant: "royal"
     },
     name: "Terry Johnson",
     size: "sm",
@@ -37,8 +14,9 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "bottom-left"
+        icon: "check",
+        placement: "top-right",
+        variant: "green"
     },
     name: "Terry Johnson",
     size: "md",
@@ -49,8 +27,9 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "top-left"
+        icon: "lock",
+        placement: "top-left",
+        variant: "red"
     },
     name: "Terry Johnson",
     size: "lg",
@@ -61,11 +40,12 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "plus",
-        placement: "top-right"
+        icon: "star",
+        placement: "left-center",
+        variant: "yellow"
     },
     name: "Terry Johnson",
     size: "xl",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     margin_bottom: "sm"
-  }) %>
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -4,73 +4,54 @@ import { Avatar } from '../..'
 const AvatarCircleIconComponentOverlay = () => {
     return (
         <div>
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xxs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-right"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xs"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "bottom-right",
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="sm"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "bottom-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="md"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-left"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="lg"
-            />
-
-            <Avatar
-                componentOverlay={{
-                    component: "iconCircle",
-                    icon: "plus",
-                    placement: "top-right"
-                }}
-                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-                marginBottom="sm"
-                size="xl"
-            />
-
-        </div>
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "bottom-right",
+                icon: "shield",
+                variant: "royal"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="sm"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "bottom-right",
+                icon: "check",
+                variant: "green"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="md"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "top-left",
+                icon: "lock",
+                variant: "red"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="lg"
+        />
+
+        <Avatar
+            componentOverlay={{
+                component: "iconCircle",
+                placement: "left-center",
+                icon: "star",
+                variant: "yellow"
+            }}
+            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            marginBottom="sm"
+            size="xl"
+        /> 
+    </div>
     )
 }
 

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md

@@ -0,0 +1,3 @@
+NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
+
+When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
-          size="lg"
-          status="offline"
-          {...props}
-      />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
-          size="xl"
-          status="offline"
-          {...props}
-      />
     </div>
   )
 }

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

@@ -4,14 +4,14 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,

data/app/pb_kits/playbook/pb_badge/badge.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <span><%= object.text %></span>
 <% end %>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -163,6 +163,9 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -172,7 +175,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
   return (
     <HighchartsReact
         containerProps={{
-          className: classnames(globalProps(props), className),
+          className: classnames(globalProps(filteredProps), className),
           id: id,
           ...ariaProps,
           ...dataProps,

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import BarGraph from './_bar_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'bargraph1';
+
+test('bargraph uses exact classname', () => {
+  render(
+    <BarGraph
+        className='super_important_class'
+        data={{ testid: testId }}
+        id='bar-default'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('super_important_class');
+});

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -74,6 +74,22 @@ module Playbook
         standard_options.deep_merge(custom_options)
       end
 
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_bar_graph")
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1 +1,2 @@
-See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% custom_options = {
+<% bar_graph_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: custom_options
-}) %>
+    custom_options: bar_graph_options
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -0,0 +1,2 @@
+The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom: Custom Overrides
+  - bar_graph_custom_rails: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -45,6 +45,9 @@
   }
 
   &[class*=dark] {
+    a {
+      color: $active_dark;
+    }
     @include pb_body_dark();
     @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
       &[class*=_#{$dark_color_name}][class*=dark]{

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
-  link:           $primary_action_dark,
+  link:           $active_dark,
   error:          $error,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,6 +28,7 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
+  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
@@ -197,16 +198,16 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button_variant($transparent, $white);
+  @include pb_button_variant($transparent, $active_dark);
 
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($white, $opacity_6)
+      color: rgba($active_dark, $opacity_6)
     }
     &:active {
       transition: none;
-      @include pb_button_variant($transparent, $white);
+      @include pb_button_variant($transparent, $active_dark);
     }
   }
 }

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,7 +13,7 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary,
+  link:           $active_dark,
   success:        $text_dk_success_sm,
   error:          $error,
 );

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -17,13 +17,19 @@ $additional_colors: (
   "light": $bg_light,
   "white": $white,
   "none": none,
+  "success_subtle": $success_subtle,
+  "warning_subtle": $warning_subtle,
+  "error_subtle": $error_subtle,
+  "info_subtle": $info_subtle,
+  "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
 
       def classname

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -42,3 +42,23 @@
     dark: true
   }) %>
 <% end %>
+
+<%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Success Subtle"
+  }) %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Warning Subtle"
+  }) %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Info Subtle"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -90,7 +90,47 @@ const CardBackground = (props) => {
         />
       </Card>
 
-      
+
+      <Title
+          {...props}
+          marginBottom="sm"
+          size={4}
+          tag="h4"
+          text="Subtle Status Colors"
+      />
+
+      <Card
+          background="success_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Success Subtle"
+            {...props}  
+        />
+      </Card>
+
+      <Card
+          background="warning_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Warning Subtle"
+            {...props}
+        />
+      </Card>
+
+      <Card
+          background="info_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Info Subtle"
+            {...props}
+        />
+      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.