playbook_ui 7.13.0 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -10,9 +10,14 @@ module Playbook
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false
+      prop :shrink, type: Playbook::Props::Boolean,
+                    default: false
+      prop :flex, type: Playbook::Props::Enum,
+                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
+                  default: "none"
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class)
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class)
       end
 
       def style_value
@@ -28,6 +33,18 @@ module Playbook
       def grow_class
         grow ? "grow" : nil
       end
+
+      def shrink_class
+        shrink ? "shrink" : nil
+      end
+
+      def flex_class
+        if flex == "none"
+          nil
+        else
+          "flex_#{flex}"
+        end
+      end
     end
   end
 end

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

@@ -14,9 +14,14 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl } = props
+  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
@@ -46,6 +51,7 @@ const FormPill = (props: FormPillProps) => {
       <div
           className="pb_form_pill_close"
           onClick={onClick}
+          {...closeProps}
       >
         <Icon
             fixedWidth

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_icon/docs/example.yml

@@ -7,7 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_default_dark: Icon Default Dark
+
   react:
   - icon_default: Icon Default
   - icon_rotate: Icon Rotate
@@ -16,4 +16,3 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
-  - icon_default_dark: Icon Default Dark

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

@@ -5,4 +5,3 @@ export { default as IconAnimate } from './_icon_animate.jsx'
 export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
-export { default as IconDefaultDark } from './_icon_default_dark.jsx'

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

@@ -4,15 +4,8 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
-  - icon_circle_dark: Dark
-  - icon_circle_sizes_dark: Dark Size
-  - icon_circle_color_dark: Dark Color
-  
 
   react:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
-  - icon_circle_dark: Dark
-  - icon_circle_sizes_dark: Dark Size
-  - icon_circle_color_dark: Dark Color

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

@@ -1,6 +1,3 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
 export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
-export { default as IconCircleDark } from './_icon_circle_dark.jsx'
-export { default as IconCircleColorDark } from './_icon_circle_color_dark.jsx'
-export { default as IconCircleSizesDark } from './_icon_circle_sizes_dark.jsx'

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

@@ -3,12 +3,7 @@ examples:
   rails:
   - icon_value_default: Default
   - icon_value_align: Align
-  - icon_value_dark: Dark
-  - icon_value_align_dark: Align Dark
-
 
   react:
   - icon_value_default: Default
   - icon_value_align: Align
-  - icon_value_dark: Dark
-  - icon_value_align_dark: Align Dark

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

@@ -1,4 +1,2 @@
 export { default as IconValueDefault } from './_icon_value_default.jsx'
 export { default as IconValueAlign } from './_icon_value_align.jsx'
-export { default as IconValueDark } from './_icon_value_dark.jsx'
-export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'

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

@@ -21,14 +21,14 @@ $card-border-radius: $border_rad_lightest;
       grid-column-gap: $space_sm;
       grid-row-gap: $space_sm;
       grid-template-columns: repeat(4, 1fr);
-      
+
       @media screen and (max-width: $screen-md-min) {
         grid-template-columns: repeat(2, 1fr);
       }
        @media screen and (max-width: $screen-xs-min) {
         grid-template-columns: repeat(1, 1fr);
       }
-    } 
+    }
   }
 
   &[class*=_collection_detail]{
@@ -36,13 +36,13 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
       height: 100%;
       padding: $space_lg;
-      grid-template-areas: 
+      grid-template-areas:
       "side-bar collection";
       grid-template-columns: .25fr 1fr;
       grid-column-gap: $space_sm;
       div.layout_body{
         @media screen and (min-width: $screen-md-min) {
-        margin-left: $space_md;        
+        margin-left: $space_md;
         }
         @media screen and (max-width: $screen-lg-min) {
           grid-template-columns: repeat(3, 1fr);
@@ -61,7 +61,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
-      
+
   }
 
   &[class*=_kanban]{
@@ -76,7 +76,7 @@ $card-border-radius: $border_rad_lightest;
       content: '';
       flex: 0 0 $gap;
     }
-    
+
     div.layout_body{
       width: $list-width;
       height: 100vh;
@@ -135,7 +135,7 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
     }
   }
-  
+
 
   &[class*=_sidebar]{
     $layout_sizes: (
@@ -188,7 +188,7 @@ $card-border-radius: $border_rad_lightest;
     // Collapse Settings
     @each $position in $positions {
       @each $breakpoint_name, $breakpoint in $breakpoints {
-        &_#{$position}_collapse_#{$breakpoint_name} {
+        &[class*=_#{$position}_collapse_#{$breakpoint_name}] {
           @include break_at($breakpoint) {
             @if $position == 'left' {
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
@@ -198,7 +198,7 @@ $card-border-radius: $border_rad_lightest;
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
               grid-template-rows: 1fr auto;
             }
-            grid-template-columns: 1fr;
+            grid-template-columns: 1fr !important;
             &.full {
               min-height: auto !important;
             }

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_layout/docs/example.yml

@@ -3,20 +3,16 @@ examples:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
 
-
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
-

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

@@ -1,7 +1,6 @@
 export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
-export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
 export { default as LayoutCollection } from './_layout_collection.jsx'
 export { default as LayoutKanban } from './_layout_kanban.jsx'
 export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'

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

@@ -5,11 +5,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
 
   react:
     - popover_default: Default
@@ -17,12 +12,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
-  
-
-
     

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

@@ -3,8 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
-export { default as PopoverDark } from './_popover_dark.jsx'
-export { default as PopoverListDark } from './_popover_list_dark.jsx'
-export { default as PopoverCloseDark } from './_popover_close_dark.jsx'
-export { default as PopoverZIndexDark } from './_popover_z_index_dark.jsx'
-export { default as PopoverScrollHeightDark } from './_popover_scroll_height_dark.jsx'

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

@@ -12,6 +12,11 @@
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
     padding-right: $space_xl;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;
@@ -20,8 +25,6 @@
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
-    color: transparent !important;
-    text-shadow: 0 0 0 $text_lt_default;
   }
   option {
     color: $text_lt_default;
@@ -62,12 +65,12 @@
       @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+      text-shadow: 0 0 0 $text_dk_default;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
           background-color: tint($focus_input_dark, 5%);
         }
       }
-      text-shadow: 0 0 0 $text_dk_default;
     }
     .pb_select_kit_caret {
       color: $white;
@@ -82,5 +85,4 @@
       }
     }
   }
-
 }

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 %>

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '../'
+import { Card, Checkbox, Flex, Icon, Radio } from '../'
 
 import type { InputCallback } from '../types'
 
@@ -20,6 +20,7 @@ type SelectableCardProps = {
   checked: boolean,
   children?: array<React.ReactChild>,
   className?: string,
+  dark?: boolean,
   data: object,
   disabled?: boolean,
   icon?: boolean,
@@ -30,6 +31,7 @@ type SelectableCardProps = {
   onChange: InputCallback<HTMLInputElement>,
   text?: string,
   value?: string,
+  variant?: string,
 }
 
 const SelectableCard = ({
@@ -37,6 +39,7 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
+  dark = false,
   data = {},
   disabled = false,
   icon = false,
@@ -46,6 +49,7 @@ const SelectableCard = ({
   onChange = noop,
   text,
   value,
+  variant = 'default',
   ...props
 }: SelectableCardProps) => {
   const ariaProps = buildAriaProps(aria)
@@ -55,7 +59,9 @@ const SelectableCard = ({
     { 'checked': checked,
       'disabled': disabled,
       'enabled': !disabled }),
-  globalProps(props), className)
+  dark ? 'dark' : '',
+  className
+  )
 
   const displayIcon = () => {
     if (icon === true) {
@@ -70,9 +76,16 @@ const SelectableCard = ({
     }
   }
 
-  const inputType = multi === false ? 'radio' : 'checkbox'
+  const inputRef = React.createRef()
+  // Delegate clicks to hidden input from visible one
+  const handleClick = () => {
+    inputRef.current.click()
+  }
 
+  const inputType = multi ? 'checkbox' : 'radio'
   const inputIdPresent = inputId !== null ? inputId : name
+  const Input = multi ? Checkbox : Radio
+  const labelProps = variant === 'displayInput' ? Object.assign(props, { padding: 'none' }) : props
 
   return (
     <div
@@ -87,15 +100,49 @@ const SelectableCard = ({
           id={inputIdPresent}
           name={name}
           onChange={onChange}
+          ref={inputRef}
           type={inputType}
           value={value}
       />
+
       <label
-          className={globalProps(props)}
+          className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
-        {text || children}
-        {displayIcon()}
+        <div className="buffer">
+          <Choose>
+            <When condition={variant === 'displayInput'}>
+              <Flex vertical="center">
+                <Flex
+                    orientation="column"
+                    padding="sm"
+                    paddingRight="xs"
+                    vertical="center"
+                >
+                  <Input dark={dark}>
+                    <input
+                        checked={checked}
+                        disabled={disabled}
+                        onClick={handleClick}
+                        type={inputType}
+                    />
+                  </Input>
+                </Flex>
+                <div className="separator" />
+                <Card.Body
+                    dark={dark}
+                    padding="sm"
+                >
+                  {text || children}
+                </Card.Body>
+              </Flex>
+            </When>
+            <Otherwise>
+              {text || children}
+            </Otherwise>
+          </Choose>
+          {displayIcon()}
+        </div>
       </label>
     </div>
   )