playbook_ui 12.13.0.pre.alpha.PLAY693tooltipwrongbg440 → 12.13.0.pre.alpha.PLAY705phonenumberkit438

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18b2b312491b972cf09d3520048e4bcee3b3a54fc77823a96f99e4b8124d691e
-  data.tar.gz: 15984bc190a04b1a771106b3c0d487164c94a5565f9403946cba9f042f244c6e
+  metadata.gz: 8ffc2f1f3d1df264f744d65f5b89a07812fe6e560e9c9137e3f91e2b1eb17816
+  data.tar.gz: a85d780b532e6930b7588a22d566023d965398cb73ea2267e8f12ab5e46f3114
 SHA512:
-  metadata.gz: 93575b229a5e34b07acfa9efcdfa1a7c4abdc4d312a1ada00215312802a5a51c42b5d0a23c8ba12876bc102400e7f768202c8656145ff00bf724006a25eb28bd
-  data.tar.gz: fce5886dc11ec423b86399cfbb5879c3bdc8d9c5833d5a4cc4f6dcea84928396f00a80fa6832f44e91f9a63f7767a6a6975e1dbce541e6a6822ed3dcca05f345
+  metadata.gz: b346f34311944e98fb46a98c01fce27798f102ab81cc93db231ddfa570648b613a43a0bb40c8c628b3bc434366d8216f44977c657a5f9dd6fff67c655ce7edec
+  data.tar.gz: 0a807e7b97cd9f9524572abc04563d13e25fd0dff7b032e9479a0a41847502b515ee64508432ac7b0e63d48202c9a282022d678923aef7cf408ac6d1cec34b6f

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -78,7 +78,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     mode = 'single',
     name,
     onChange = () => { void 0 },
-    onClose,
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -96,13 +95,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-  const filteredProps = {...props}
-  delete filteredProps?.position
-
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    //@ts-ignore
-    globalProps(filteredProps),
+    globalProps(props),
     error ? 'error' : null,
     className
   )
@@ -122,10 +117,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       minDate,
       mode,
       onChange,
-      onClose,
       pickerId,
       plugins,
-      // @ts-ignore
       position,
       positionElement,
       selectionType,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -19,7 +19,6 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
-  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
   selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
@@ -42,7 +41,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate,
     mode,
     onChange = () => {},
-    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -153,10 +151,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
-    onClose: [(selectedDates, dateStr) => {
+    onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
-      onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)

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

@@ -31,7 +31,6 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange
-  - date_picker_on_close: onClose
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates

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

@@ -19,4 +19,3 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -151,10 +151,6 @@ const Layout = (props: LayoutPropTypes) => {
   const nonSideChildren = layoutChildren.filter(
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
-
-  const filteredProps = {...props}
-  delete filteredProps?.position
-
   return (
     <div
         {...ariaProps}
@@ -163,8 +159,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        //@ts-ignore
-        globalProps(filteredProps)
+        globalProps(props)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -88,18 +88,13 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     &.show {
       opacity: 1;
       margin-bottom: $space_sm;
-      color: $white;
-      background-color: rgba($black, $opacity_9);
+      background-color: $white;
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
       }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
-      }
     }
   }
 
@@ -114,12 +109,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
       //rails
       &.show {
-        color: $charcoal;
-        background-color: $white;
+        color: $white;
+        background-color: rgba($black, $opacity_9);
       }
-      .arrow {        
-        border-color: $white transparent transparent transparent;
-        opacity: $opacity_10;
+      .arrow {
+        border-color: $black transparent transparent transparent;
+        opacity: $opacity_9;
       }
       // react arrow
       .arrow_bg {

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -1,16 +1,3 @@
-$relative: relative !default;
-$absolute: absolute !default;
-$fixed: fixed !default;
-$sticky: sticky !default;
-$static: static !default;
-$position: (
-  relative: $relative,
-  absolute: $absolute,
-  fixed: $fixed,
-  sticky: $sticky,
-  static: $static
-);
-
 // z_index variables
 $z_1: 100 !default;
 $z_2: 200 !default;

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

@@ -1,23 +1,3 @@
-.position_relative {
-  position: relative;
-}
-
-.position_absolute {
-  position: absolute;
-}
-
-.position_fixed {
-  position: fixed;
-}
-
-.position_sticky {
-  position: sticky;
-}
-
-.position_static {
-  position: static;
-}
-
 .z_index_1 {
   z-index: 100;
 }

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

@@ -100,10 +100,6 @@ type Padding = {
   padding?: AllSizes,
 }
 
-type Position = {
-  position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
-}
-
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -119,7 +115,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Position & Shadow & ZIndex
+  Shadow & ZIndex
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -287,12 +283,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return order ? `flex_order_${order}` : ''
     }
-  }, 
-  positionProps: ({ position }: Position) => {
-    let css = ''
-    css += position && position !== 'static' ? `position_${position}` : ''
-    return css
-  },
+  }
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>

data/lib/playbook/classnames.rb

@@ -31,7 +31,6 @@ module Playbook
         flex_grow_props,
         flex_shrink_props,
         order_props,
-        position_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -19,7 +19,6 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
-require "playbook/position"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -44,7 +43,6 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
-    include Playbook::Position
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.13.0"
-  VERSION = "12.13.0.pre.alpha.PLAY693tooltipwrongbg440"
+  VERSION = "12.13.0.pre.alpha.PLAY705phonenumberkit438"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.13.0.pre.alpha.PLAY693tooltipwrongbg440
+  version: 12.13.0.pre.alpha.PLAY705phonenumberkit438
 platform: ruby
 authors:
 - Power UX
@@ -738,8 +738,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
@@ -2440,7 +2438,6 @@ files:
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
-- lib/playbook/position.rb
 - lib/playbook/props.rb
 - lib/playbook/props/array.rb
 - lib/playbook/props/base.rb

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,43 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { DatePicker,LabelValue } from '../..'
-
-
-const DatePickerOnClose = (props) => {
-  const today = new Date()
-  const [dateString, setDateString] = useState(today.toLocaleDateString())
-  const [dateObj, setDateObj] = useState([today])
-
-  const handleOnClose = (selectedDates, dateStr) => {
-    setDateString(dateStr)
-    setDateObj(selectedDates)
-  }
-
-
-  return (
-    <div>
-        <DatePicker
-            defaultDate={dateString}
-            enableTime
-            marginBottom="lg"
-            onClose={handleOnClose}
-            pickerId="date-picker-on-close"
-            showTimezone
-            {...props}
-        />
-        <LabelValue
-            label="Date Object"
-            marginBottom="lg"
-            value={dateObj[0] ? dateObj[0].toString() : ''}
-            {...props}
-        />
-        <LabelValue
-            label="Date String"
-            value={dateString}
-            {...props}
-        />
-    </div>
-  )
-}
-
-export default DatePickerOnClose

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,3 +0,0 @@
-The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
-
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/lib/playbook/position.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module Position
-    def self.included(base)
-      base.prop :position
-    end
-
-  private
-
-    def position_props
-      selected_props = position_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-
-      selected_props.map do |k|
-        value = send(k)
-        return nil unless position_values.include? value
-
-        "position_#{value}"
-      end.compact.join(" ")
-    end
-
-    def position_options
-      {
-        position: "position",
-      }
-    end
-
-    def position_values
-      %w[relative absolute fixed sticky]
-    end
-  end
-end