playbook_ui 7.13.0 → 7.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 339e7eb831a191f85cd95d143b88818216f350a78ec38992e50a90ab1b50be2b
-  data.tar.gz: 8af38244f70df603708855cb9d470e0fa1643c0f9a0f3bfdfb25adc3fcd8add9
+  metadata.gz: afa113290f2904fa0ce5794378b5c8e9ee247d1a213aa5911a339277738e331d
+  data.tar.gz: 5be3a1822a72e60809e8bc54e777e78bc8130f4be7f776d579d2a47a2987dfd1
 SHA512:
-  metadata.gz: 07e97af69c7e47fcd4bb457134be6f8f61cae1705924542ce55ea0f897224b48d48cd799b6fff456771e43c4abedeb5653a20842373dc2e83d40d7ecab3a1805
-  data.tar.gz: 842d3bbbdd41bee99ccf142a5b4f64e8f3004cf303a1c5ad20b192570434f73258dc6a95c67f4a981fc0d701a7e9cf9923660cbc603a32f9a9e58628bda75c59
+  metadata.gz: dcdb7c84e58b1835cdefd80e7d5e8bfdd29e08a2a16a107ebba9ac66a6b3f704c0eeef5df64db523605bb5cd80167dd17c1691ee5371271ed38e692f92b0fbdc
+  data.tar.gz: b0570e9d26ca5cba15edeece70de4db71384a916164f773f48631c6fe4c4389016142b4dd4a8c33e41092f91f778a2a690a069ab95e200892b42b52c58cfdf75

data/app/helpers/playbook/application_helper.rb

@@ -5,6 +5,10 @@ module Playbook
     include ::Webpacker::React::Helpers
     include ::Playbook::PbKitHelper
 
+    def current_webpacker_instance
+      Playbook.webpacker
+    end
+
     def pb_rails(kit, props: {}, &block)
       super kit, props: dark_mode_props(props), &block
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -89,3 +89,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+@import './utilities/max_width';

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
   borderNone?: boolean,
+  borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
   highlight?: {
@@ -62,6 +63,7 @@ const Body = (props: CardBodyProps) => {
 const Card = (props: CardPropTypes) => {
   const {
     borderNone = false,
+    borderRadius = 'md',
     children,
     className,
     highlight = {},
@@ -70,7 +72,7 @@ const Card = (props: CardPropTypes) => {
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,

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

@@ -3,6 +3,7 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
+  overflow: auto;
 
   &[class*=_selected] {
     @include pb_card_selected;
@@ -26,7 +27,7 @@
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;  
+    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
@@ -44,7 +45,7 @@
     min-height: 1px;
     border: 0;
   }
-  
+
   @each $name, $shadow in $box_shadows {
     &[class*=_#{$name}] {
       box-shadow: $shadow;

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

@@ -50,6 +50,12 @@ $pb_card_padding:(
       box-shadow: $shadow;
     }
   }
+
+  @each $name, $radius in $border_radius {
+    &[class*=_#{$name}] {
+      border-radius: $radius;
+    }
+  }
 }
 
 @mixin pb_card_dark {

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

@@ -15,6 +15,9 @@ module Playbook
                        default: {}
       prop :border_none, type: Playbook::Props::Boolean,
                          default: false
+      prop :border_radius, type: Playbook::Props::Enum,
+                           values: %w[xs sm md lg xl none rounded],
+                           default: "md"
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +25,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           border_class)
+                           border_class,
+                           border_radius_class)
       end
 
       def body_padding
@@ -55,6 +59,10 @@ module Playbook
       def border_class
         border_none == true ? "border_none" : nil
       end
+
+      def border_radius_class
+        border_radius != "md" ? "border_radius_#{border_radius}" : nil
+      end
     end
   end
 end

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

@@ -0,0 +1,53 @@
+<%= pb_rails("card", props: {
+  border_radius: "rounded"
+})  do %>
+  Rounded (1000px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xl"
+})  do %>
+  Extra large (16px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "lg"
+})  do %>
+  Large (8px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "md"
+})  do %>
+  Medium (6px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "sm"
+})  do %>
+  Small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xs"
+})  do %>
+  Extra small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "none"
+})  do %>
+  None
+<% end %>

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardLight = (props) => {
+  return (
+    <div>
+      <Card
+          borderRadius="rounded"
+          {...props}
+      >
+        {'Rounded (1000px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xl"
+          {...props}
+      >
+        {'Extra large (16px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="lg"
+          {...props}
+      >
+        {'Large (8px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="md"
+          {...props}
+      >
+        {'Medium (6px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="sm"
+          {...props}
+      >
+        {'Small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xs"
+          {...props}
+      >
+        {'Extra small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="none"
+          {...props}
+      >
+        {'None'}
+      </Card>
+    </div>
+  )
+}
+
+export default CardLight

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

@@ -0,0 +1 @@
+`border_radius_md` is the card kit default

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

@@ -0,0 +1 @@
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -9,6 +9,7 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius
   react:
   - card_light: Default
   - card_highlight: Highlight Cards
@@ -19,3 +20,4 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardBorderNone } from './_card_border_none.jsx'
+export { default as CardBorderRadius } from './_card_border_radius.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -28,7 +28,11 @@ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
         shouldClosePopover={updateHide}
         show={!hide}
     >
-      <div className="pb-form">{children}</div>
+      <div className="pb-form">
+        {typeof children === 'function'
+          ? children({ closePopover: () => (updateHide(true)) })
+          : children}
+      </div>
     </PbReactPopover>
   )
 }

data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+const FilterClosePopover = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+
+  return (
+    <Filter
+        {...props}
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      {({ closePopover }) => (
+        <form>
+          <TextInput
+              label="Full Name"
+              placeholder="Enter name"
+          />
+
+          <Select
+              blankSelection="Select One..."
+              label="Territory"
+              name="location"
+              options={options}
+          />
+          <Flex
+              spacing="between"
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+            />
+          </Flex>
+        </form>
+      )}
+    </Filter>
+  )
+}
+
+export default FilterClosePopover

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md

@@ -0,0 +1 @@
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -17,3 +17,4 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_min_width: Min Width for Popover Inside of Filter
+  - filter_close_popover: Close Popover

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

@@ -5,3 +5,4 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMinWidth } from './_filter_min_width.jsx'
+export { default as FilterClosePopover } from './_filter_close_popover.jsx'

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -18,6 +18,8 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  margin-bottom: 2px;
+  margin-top: 2px;
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -11,6 +11,7 @@ $image-sizes: (
 
 [class^=pb_image_kit] {
   position: relative;
+  object-fit: cover;
 
   @each $name, $size in $image-sizes {
     &[class*=_#{$name}] {

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("layout/body") do %>
 
  <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card") do %>
    <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
@@ -26,10 +26,10 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
     <% end %>
      <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card") do %>
-      Card content 
+      Card content
     <% end %>
       <%= pb_rails("user", props: {
       name: "Anna Black",
@@ -40,7 +40,7 @@
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
       }) %>
      <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card" ) do %>
      <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -0,0 +1 @@
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -11,6 +11,7 @@
     width: 22px;
     min-width: 22px;
     height: 22px;
+    box-sizing: border-box;
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb

@@ -9,17 +9,60 @@
     <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% end %>
 
-  <label for="<%= object.input_id_present %>">
-    <% if object.children.nil? %>
-      <%= pb_rails("body", props: { text: object.text }) %>
-    <% else %>
-      <%= capture(&object.children) %>
-    <% end %>
-    <% if object.icon %>
-      <div class="pb_selectable_card_circle">
-        <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
-      </div>
-    <% end %>
+  <label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
+    <div class="buffer">
+      <% if object.variant == "display_input" %>
+        <%= pb_rails("flex", props: { vertical: "center" }) do %>
+          <%= pb_rails("flex", props: {
+            orientation: "column",
+            padding: "sm",
+            padding_right: "xs",
+            vertical: "center",
+          }) do %>
+            <%= pb_rails(object.input, props: { text: "" }) do %>
+              <input <%= object.is_checked %> <%= object.is_disabled %> id="checkbox-styled" name="<%= object.name %>-display" type="<%= object.input %>">
+            <% end %>
+          <% end %>
+          <div class="separator"></div>
+          <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+            <% if object.children.nil? %>
+              <%= pb_rails("body", props: { text: object.text }) %>
+            <% else %>
+              <%= capture(&object.children) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <% if object.children.nil? %>
+          <%= pb_rails("body", props: { text: object.text }) %>
+        <% else %>
+          <%= capture(&object.children) %>
+        <% end %>
+        <% if object.icon %>
+          <div class="pb_selectable_card_circle">
+            <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
   </label>
 
+  <% if object.variant == "display_input" %>
+    <script>
+      var outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+      var innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+
+      outerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        innerCheckbox.checked = outerCheckbox.checked
+      })
+
+      innerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        outerCheckbox.checked = innerCheckbox.checked
+      })
+    </script>
+  <% end %>
 <% end %>