playbook_ui 10.18.1 → 10.19.0.pre.popover.alpha1

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -36,6 +36,7 @@ const PopoverZIndex = (props) => {
       <PbReactPopover
           closeOnClick="outside"
           offset
+          padding="sm"
           placement="top"
           reference={popoverTrigger}
           shouldClosePopover={handleShouldClosePopover}

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

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, { once: true, capture: true })
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -88,6 +88,56 @@
         border-color: $error;
       }
     }
+    .text_input_wrapper_add_on {
+      .add-on {
+        &-right {
+          .add-on-card {
+            border: 1px solid red;
+            border-left: 0;
+          }
+        }
+        &-left {
+          .add-on-card {
+            border: 1px solid red;
+            border-right: 0;
+          }
+        }
+      }
+      .border {
+        &_left {
+          &_on {
+            .card-right-aligned {
+              border-left: 0;
+            }
+          }
+          &_off {
+            .card-right-aligned {
+              border-left: 0;
+            }
+            .text_input {
+              border-right: 0;
+              padding-right: 0;
+            }
+          }
+        }
+        &_right {
+          &_on {
+            .card-left-aligned {
+              border-right: 0;
+            }
+          }
+          &_off {
+            .card-left-aligned {
+              border-right: 0;
+            }
+            .text_input {
+              border-left: 0;
+              padding-left: 0;
+            }
+          }
+        }
+      }
+    }
   }
   &.inline {
     .text_input_wrapper input::placeholder,
@@ -119,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0 !important;
+      padding: 0;
       align-items: center;
       justify-content: center;
       width: 45px;
@@ -132,15 +182,15 @@
     }
     &-left {
       .text_input {
-        border-top-left-radius: 0 !important;
-        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
 
     &-right {
       .text_input{
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
   }
@@ -148,15 +198,14 @@
     background-color: $focus_input_dark;
     border-width: 0px;
   }
-
   .card-left-aligned {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .card-right-aligned {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .border {
@@ -165,8 +214,8 @@
         border-right: 0;
       }
       .text_input {
-        border-left: 0 !important;
-        padding-left: 0 !important;
+        border-left: 0;
+        padding-left: 0;
       }
     }
     &_left_on {
@@ -184,8 +233,8 @@
         border-left: 0;
       }
       .text_input {
-        border-right: 0 !important;
-        padding-right: 0 !important;
+        border-right: 0;
+        padding-right: 0;
       }
     }
   }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -1,2 +1,21 @@
-<%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
-<%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  placeholder: "Enter email address",
+  type: "email"
+}) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  label: "Confirm Email Address",
+  placeholder: "Confirm email address",
+  type: "email"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import {
-  TextInput,
-} from '../..'
+
+import TextInput from '../_text_input'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -12,6 +11,7 @@ const TextInputError = (props) => {
   return (
     <div>
       <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
           error="Please enter a valid email address"
           label="Email Address"
           onChange={handleUpdateEmail}
@@ -20,6 +20,15 @@ const TextInputError = (props) => {
           value={email}
           {...props}
       />
+      <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
+          label="Confirm Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Confirm email address"
+          type="email"
+          value={email}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,12 +3,13 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: 1 | 2 | 3 | 4,
@@ -18,24 +19,25 @@ type TitleProps = {
 }
 
 const Title = (props: TitleProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,
     className,
+    color,
     data = {},
     id,
     size = 3,
     tag = 'h3',
     text,
-    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, variant),
+    buildCss('pb_title_kit', size, color),
     globalProps(props),
-    className
+    className,
   )
   const Tag = `${tag}`
 

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,26 +1,26 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import './title_mixin';
 
 [class^=pb_title_kit]{
   &[class*=_1] {
     @include pb_title_1;
+    @include title_colors;
   }
 
   &[class*=_2] {
     @include pb_title_2;
+    @include title_colors;
   }
 
   &[class*=_3] {
     @include pb_title_3;
+    @include title_colors;
   }
 
   &[class*=_4] {
     @include pb_title_4;
-
-    &[class*=_link]  {
-      color: $primary;
-    }
-
+    @include title_colors;
   }
 
   &.dark {

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1 +1,18 @@
 @import "../tokens/titles";
+
+$pb_title_colors: (
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  success: $success,
+  error: $error,
+  link: $primary
+);
+
+@mixin title_colors {
+  @each $name, $color in $pb_title_colors {
+    &[class*=_#{$name}] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleColors = (props) => {
+  return (
+    <div>
+      <Title
+          text="Default Color"
+          {...props}
+      />
+      <Title
+          color="link"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="success"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="error"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleColors

data/app/pb_kits/playbook/pb_title/docs/_title_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+Title kit will use `default` color by default. Other available colors are:
+
+*`light` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_title/docs/_title_light.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `h3` tag by default, and `size 3` as well. 
+Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

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

@@ -1,8 +1,8 @@
 examples:
   rails:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors
 
   react:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors

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

@@ -1,2 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleVariants } from './_title_variants.jsx'
+export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbTitle
     class Title < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
+                   default: nil
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3
@@ -10,12 +13,10 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
-      prop :variant, type: Playbook::Props::Enum,
-                     values: [nil, "link"],
-                     default: nil
+      prop :variant, deprecated: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant)
+        generate_classname("pb_title_kit", size, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Title from './_title'
+
+test('returns namespaced class name', () => {
+  render(
+    <Title
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_3')
+})
+
+test('with colors', () => {
+  render(
+    <Title
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_3_success')
+})

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -0,0 +1,11 @@
+@import "../tokens/exports/line_height";
+
+@mixin line-height-classes($line-height-list) {
+  @each $name, $line-height in $line-height-list {
+    [class*=pb_] .line_height_#{$name} {
+      line-height: $line-height;
+    }
+  }
+}
+@include line-height-classes($line_height);
+ 

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -63,6 +63,12 @@ const shadowProps = ({ shadow }) => {
   return css
 }
 
+const lineHeightProps = ({ lineHeight }) => {
+  let css = ''
+  css += lineHeight ? `line_height_${lineHeight} ` : ''
+  return css
+}
+
 const displayProps = ({ display }) => {
   let css = ''
   css += display ? `display_${display} ` : ''
@@ -78,7 +84,7 @@ const cursorProps = ({ cursor }) => {
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + displayProps(allProps) + cursorProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/lib/playbook/classnames.rb

@@ -17,6 +17,7 @@ module Playbook
         z_index_props,
         number_spacing_props,
         shadow_props,
+        line_height_props,
         display_props,
         cursor_props,
       ].compact.join(" ")

data/lib/playbook/kit_base.rb

@@ -5,6 +5,7 @@ require "playbook/spacing"
 require "playbook/z_index"
 require "playbook/number_spacing"
 require "playbook/shadow"
+require "playbook/line_height"
 require "playbook/display"
 require "playbook/cursor"
 
@@ -17,6 +18,7 @@ module Playbook
     include Playbook::ZIndex
     include Playbook::NumberSpacing
     include Playbook::Shadow
+    include Playbook::LineHeight
     include Playbook::Display
     include Playbook::Cursor
 

data/lib/playbook/line_height.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module LineHeight
+    def self.included(base)
+      base.prop :line_height
+    end
+
+    def line_height_props
+      selected_props = line_height_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        line_height_value = send(k)
+        "line_height_#{line_height_value}" if line_height_values.include? line_height_value
+      end.compact.join(" ")
+    end
+
+    def line_height_options
+      {
+        line_height: "line_height",
+      }
+    end
+
+    def line_height_values
+      %w[tightest tighter tight normal loose looser loosest]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.18.0"
-  VERSION = "10.18.1"
+  PREVIOUS_VERSION = "10.18.1"
+  VERSION = "10.19.0.pre.popover.alpha1"
 end