playbook_ui 14.12.0.pre.alpha.play1849cssbargraph5901 → 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714

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

@@ -5,14 +5,12 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
-  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
-export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,7 +18,6 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
-      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -30,7 +29,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state&.upcase].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +37,7 @@ module Playbook
       end
 
       def address_house_style
-        [format_street_address, house_style].join(separator)
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -49,14 +48,6 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def format_street_address
-        preserve_case ? address : custom_titleize(address)
-      end
-
-      def custom_titleize(str)
-        str.split(" ").map(&:capitalize).join(" ")
-      end
-
       def city_emphasis_props
         {
           address_house_style: address_house_style,

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -19,9 +19,7 @@ type LinkProps = {
   icon?: string,
   iconRight?: string,
   id?: string,
-  tabIndex?: number,
   tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  target?: string,
   text?: string,
   underline?: boolean,
 } & GlobalProps
@@ -39,9 +37,7 @@ const Link = (props: LinkProps): React.ReactElement => {
     icon = '',
     iconRight = '',
     id = '',
-    tabIndex,
     tag = 'a',
-    target = '',
     text = '',
     underline = false,
   } = props
@@ -56,14 +52,6 @@ const Link = (props: LinkProps): React.ReactElement => {
   )
   const Tag = tag as keyof JSX.IntrinsicElements
 
-  const getTargetAttribute = () => {
-    if (target && href) {
-      return target
-    }
-
-    return undefined
-  }
-
   const renderContent = () => (
     <>
       {icon && (
@@ -99,9 +87,6 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
       >
         {renderContent()}
       </a>
@@ -111,9 +96,6 @@ const Link = (props: LinkProps): React.ReactElement => {
       <a
           {...commonProps}
           href={href}
-          rel={target !== 'child' ? 'noreferrer' : undefined}
-          tabIndex={tabIndex}
-          target={getTargetAttribute()}
       >
         <Tag>{renderContent()}</Tag>
       </a>

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

@@ -1,18 +1,16 @@
 examples:
-
+  
   rails:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  - link_target: Target
-
-
+  
+  
   react:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  - link_target: Target

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

@@ -2,5 +2,4 @@ export { default as LinkColor } from './_link_color.jsx'
 export { default as LinkUnderline } from './_link_underline.jsx'
 export { default as LinkIcon } from './_link_icon.jsx'
 export { default as LinkDisabled } from './_link_disabled.jsx'
-export { default as LinkTag } from './_link_tag.jsx'
-export { default as LinkTarget } from './_link_target.jsx'
+export { default as LinkTag } from './_link_tag.jsx'

data/app/pb_kits/playbook/pb_link/link.html.erb

@@ -9,7 +9,7 @@
 <% end %>
 
 <% if object.tag == "a" %>
-  <%= pb_content_tag(object.tag, { href: object.href, target: object.target }) do %>
+  <%= pb_content_tag(object.tag, { href: object.href }) do %>
     <%= link_content.call %>
   <% end %>
 <% else %>

data/app/pb_kits/playbook/pb_link/link.rb

@@ -11,11 +11,9 @@ module Playbook
       prop :href
       prop :icon
       prop :icon_right
-      prop :tabindex
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[a h1 h2 h3 h4 h5 h6 p span div],
                  default: "a"
-      prop :target
       prop :text
       prop :underline, type: Playbook::Props::Boolean,
                        default: false
@@ -28,10 +26,6 @@ module Playbook
         text
       end
 
-      def target_attribute
-        target if target && href
-      end
-
     private
 
       def color_class

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -90,33 +90,3 @@ test('adds icon right', () => {
   const icon = kit.querySelector('.pb_icon_kit')
   expect(icon).toBeInTheDocument();
 })
-
-test('should render target prop', () => {
-  render(
-      <Link
-          data={{ testid: 'target-test' }}
-          href="https://playbook.powerapp.cloud/"
-          target="blank"
-      />
-  )
-
-  const kit = screen.getByTestId('target-test')
-
-  expect(kit).toHaveAttribute('target', 'blank')
-})
-
-
-test('should render child target prop', () => {
-  render(
-      <Link
-          data={{ testid: 'target-test' }}
-          href="https://playbook.powerapp.cloud/"
-          tabIndex={0}
-          target="child"
-      />
-  )
-
-  const kit = screen.getByTestId('target-test')
-
-  expect(kit).toHaveAttribute('target', 'child')
-})

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
   step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
   step 4
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
   step 5
   <% end %>
 <% end %>
@@ -19,7 +19,7 @@
 <br /><br />
 
 <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
   <% end %>
@@ -31,10 +31,10 @@
 
 <br /><br>
 <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
       <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

@@ -39,17 +39,20 @@
     </tr>
   </tbody>
 <% end %>
+
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <thead>
-    <th>Column 1</th>
-    <th>Column 2</th>
-    <th>Column 3</th>
-  </thead>
+  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+    </tr>
+  <% end %>
   <tbody>
     <tr>
       <td>Value 1</td>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="info_subtle"
+                backgroundColor="card_light"
                 tag='col'
             />
             <Background
@@ -76,13 +76,16 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <thead>
+          <Background
+              backgroundColor="card_light"
+              tag='thead'
+          >
             <tr>
-              <th>{'Column 1'}</th>
-              <th>{'Column 2'}</th>
-              <th>{'Column 3'}</th>
+                <th>{'Column 1'}</th>
+                <th>{'Column 2'}</th>
+                <th>{'Column 3'}</th>
             </tr>
-          </thead>
+          </Background>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -106,7 +81,6 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
-
               &:after {
                 height: 0;
                 background-color: transparent;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -77,6 +77,7 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
+              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -74,31 +74,6 @@
       &.table-card {
         background: none !important;
 
-        &.dark {
-          tbody, .pb_table_tbody {
-            tr, .pb_table_tr {
-              td, .pb_table_td {
-                background: $bg_dark_card !important;
-                border-color: $border_dark !important;
-                &:before {
-                  color: $text_dk_light !important;
-                }
-                &:after {
-                  height: 0;
-                  background-color: transparent;
-                }
-  
-                &:first-child {
-                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
-                }
-                &:last-child {
-                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
-                }
-              }
-            }
-          }
-        }
-
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -1,4 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+
 import {
   createPopperLite as createPopper,
   flip,
@@ -16,34 +17,27 @@ export default class PbTooltip extends PbEnhancedElement {
 
   connect() {
     this.triggerElements.forEach((trigger) => {
-      const method = this.triggerMethod
-
-      if (method === 'click') {
-        trigger.addEventListener('click', () => {
+      trigger.addEventListener('mouseenter', () => {
+        this.mouseenterTimeout = setTimeout(() => {
           this.showTooltip(trigger)
-        })
-      } else {
-        trigger.addEventListener('mouseenter', () => {
-          this.mouseenterTimeout = setTimeout(() => {
-            this.showTooltip(trigger)
-            this.checkCloseTooltip(trigger)
-          }, TOOLTIP_TIMEOUT)
-
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            setTimeout(() => {
-              this.hideTooltip()
-            }, 0)
-          }, { once: true })
-        })
-
-        this.tooltip.addEventListener('mouseenter', () => {
+          this.checkCloseTooltip(trigger)
+        }, TOOLTIP_TIMEOUT)
+
+        trigger.addEventListener('mouseleave', () => {
           clearTimeout(this.mouseenterTimeout)
-        })
-        this.tooltip.addEventListener('mouseleave', () => {
-          this.hideTooltip()
-        })
-      }
+
+          setTimeout(() => {
+            this.hideTooltip()
+          }, 0)
+        }, { once: true })
+      })
+    })
+
+    this.tooltip.addEventListener('mouseenter', () => {
+      clearTimeout(this.mouseenterTimeout)
+    })
+    this.tooltip.addEventListener('mouseleave', () => {
+      this.hideTooltip()
     })
   }
 
@@ -60,7 +54,7 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === 'false') return
+    if (this.shouldShowTooltip === "false") return
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
@@ -84,13 +78,6 @@ export default class PbTooltip extends PbEnhancedElement {
       ],
     })
     this.tooltip.classList.add('show')
-
-    if (this.triggerMethod === 'click') {
-      clearTimeout(this.autoHideTimeout)
-      this.autoHideTimeout = setTimeout(() => {
-        this.hideTooltip()
-      }, 1000)
-    }
   }
 
   hideTooltip() {
@@ -107,26 +94,25 @@ export default class PbTooltip extends PbEnhancedElement {
     let triggerEl
 
     if (this.triggerElementId) {
-      triggerEl = document.querySelector(`#${this.triggerElementId}`)
+      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
     } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
-      triggerEl = selectorIsId
-        ? document.querySelector(`${this.triggerElementSelector}`)
-        : document.querySelectorAll(`${this.triggerElementSelector}`)
+      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
+        document.querySelectorAll(`${this.triggerElementSelector}`)
     }
 
     if (!triggerEl) {
+      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
       console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
 
     if (!triggerEl.length) triggerEl = [triggerEl]
-    return (this._triggerElements = this._triggerElements || triggerEl)
+    return this._triggerElements = (this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return (this._tooltip =
-      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -148,8 +134,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get shouldShowTooltip() {
     return this.element.dataset.pbTooltipShowTooltip
   }
-
-  get triggerMethod() {
-    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
-  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -9,9 +9,6 @@ module Playbook
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :trigger_method, type: Playbook::Props::Enum,
-                            values: %w[hover click],
-                            default: "hover"
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -24,8 +21,7 @@ module Playbook
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
-          pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method
+          pb_tooltip_show_tooltip: true
         )
       end
 

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -13,7 +13,6 @@ type UserProps = {
   aria?: {[key: string]: string},
   avatar?: boolean,
   avatarUrl?: string,
-  bold?: boolean,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
@@ -33,7 +32,6 @@ const User = (props: UserProps): React.ReactElement => {
     aria = {},
     avatar = false,
     avatarUrl,
-    bold = true,
     className,
     dark = false,
     data = {},
@@ -77,7 +75,6 @@ const User = (props: UserProps): React.ReactElement => {
       }
       <div className="content_wrapper">
         <Title
-            bold={bold}
             dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}

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

@@ -2,7 +2,6 @@ examples:
 
   rails:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -12,7 +11,6 @@ examples:
 
   react:
   - user_default: Default
-  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,5 +1,4 @@
 export { default as UserDefault } from './_user_default.jsx'
-export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -12,7 +12,7 @@
     }) %>
   <% end %>
   <%= content_tag(:div, class: "content_wrapper") do %>
-    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark, bold: object.bold }) %>
+    <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,

data/app/pb_kits/playbook/pb_user/user.rb

@@ -9,7 +9,6 @@ module Playbook
       prop :avatar, type: Playbook::Props::Boolean,
                     default: false
       prop :avatar_url
-      prop :bold, type: Playbook::Props::Boolean, default: true
       prop :name
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],