playbook_ui 10.19.0.pre.popover.alpha1 → 10.21.0.pre.alpha.na1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '090e97cafaabff3f06f58cca0ce4a1416d09f6baea9f828e51c93059f279f292'
-  data.tar.gz: 580359a862a8567240f9759e2ab80b708688d528ddc054789e6f658352cc21e1
+  metadata.gz: c91379a8ff1fbd4421f2d351cfd11cd08cf5dac3b00d275e2b8312b64ab983a9
+  data.tar.gz: 80f1bcd2b434b6213116668028aadbce11ef28b54d5ab758aea3d87c00eee109
 SHA512:
-  metadata.gz: 85c349d66339b000e6d7cb9077621b9e8d40852538d6e9eb7111947fabd0df9e11b3d2448a67609727c9fb915393ddf903140f43375be0947d5d749ffb6fb85a
-  data.tar.gz: b3774dfcbf0315c3b2fde5e145e7e0e33c3ceb23e5371aa01120ccca6f7294e7883e1f19c89dc73cdc3af2664d7b3484f0d9de5835119e862424902ee153bbc9
+  metadata.gz: 10bd2dc160d0cc7ad0cfc921b20b0429611bb628b6203cfa75528bfa32c4a3bf2a57506f4922dbb8fdfc2e75df4e0698759d21312a9a78dac41b3c044a5eea6e
+  data.tar.gz: c372e8a2490809b8345cb99230a49cb3c2420bdeec256a05cad5d10688a16ca447b44cbc582ab5cebd1af8517f7a3fc0ed63fdc7f22c54316461930baff3161f

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -44,7 +44,7 @@ const Avatar = (props: AvatarProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -21,6 +21,7 @@ type BodyProps = {
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  variant: null | 'link',
 }
 
 const Body = (props: BodyProps) => {
@@ -36,12 +37,13 @@ const Body = (props: BodyProps) => {
     status,
     tag = 'div',
     text,
+    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size?: 'sm' | 'md' | 'lg',
+  size: 'large' | 'medium' | 'small',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,16 +36,16 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
+    size = null,
     type = 'inline',
     variant = 'primary',
-    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
+  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,24 +1,7 @@
 @import "./button_mixins";
 
-$pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
-);
-
 [class^=pb_button_kit]{
   @include pb_button;
-  // Size =================
-  @each $name, $size in $pb_button_sizes {
-    &[class*=_#{$name}] {
-      font-size: $size;
-      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
-    }
-  }
-  &[class*=_sm] {
-    min-height: 0;
-  }
-
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,9 +18,6 @@ module Playbook
       prop :text
       prop :type
       prop :value
-      prop :size, type: Playbook::Props::Enum,
-                  values: ["sm", "md", "lg", nil],
-                  default: nil
 
       def options
         {
@@ -47,12 +44,12 @@ module Playbook
         link ? "a" : "button"
       end
 
+    private
+
       def classname
-        generate_classname("pb_button_kit", size, variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
-    private
-
       def disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,16 +89,3 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
-
-test('size prop', () => {
-  render(
-    <Button
-        data={{ testid: 'size-test' }}
-        size="sm"
-    />
-  )
-
-  const kit = screen.getByTestId('size-test')
-
-  expect(kit).toHaveClass('pb_button_kit_sm_primary_inline_enabled')
-})

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

@@ -7,7 +7,6 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
-  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -16,4 +15,3 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
-  - button_size: Button Size

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

@@ -5,4 +5,3 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
-export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -30,6 +30,7 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +49,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, color),
+    buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,6 +3,9 @@
 
 [class^="pb_caption_kit"] {
   @include caption;
+  &[class*="_link"] {
+    color: $primary;
+  }
 
   &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
@@ -11,6 +14,10 @@
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
   }
+  
+  &[class*="link"] {
+    color: $primary;
+  }
 
   @include pb_caption_kit_colors;
 

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -10,14 +10,17 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
-      prop :variant, deprecated: true
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil,
+                     deprecated: true
 
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size, color)
+        generate_classname("pb_caption_kit", size, variant, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -107,7 +107,7 @@ const PbDate = (props: PbDateProps) => {
               <Icon
                   fixedWidth
                   icon="calendar-alt"
-                  size="xs"
+                  size="sm"
               />
             </Caption>
           </If>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -42,7 +42,7 @@
       <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

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

@@ -40,6 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
+  plugins?: Boolean,
   type?: String,
   yearRange?: Array,
 }
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
+    plugins = false,
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -100,6 +102,7 @@ const DatePicker = (props: DatePickerProps) => {
       mode: mode,
       onChange: onChange,
       pickerId: pickerId,
+      plugins: plugins,
       yearRange: yearRange,
     })
   }, [])

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

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
 @import "./sass_partials/inline_styles";
+@import "./sass_partials/month_and_year_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -41,6 +41,8 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
+      prop :plugins, type: Playbook::Props::Boolean,
+                     default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -64,6 +66,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          plugins: plugins,
           required: required,
           yearRange: year_range,
         }.to_json.html_safe

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

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 
 const datePickerHelper = (config) => {
   const {
@@ -13,6 +14,7 @@ const datePickerHelper = (config) => {
     mode,
     onChange = () => {},
     pickerId,
+    plugins,
     required,
     yearRange,
   } = config
@@ -50,6 +52,10 @@ const datePickerHelper = (config) => {
     }
   }
 
+  const setMonthAndYearPlugin = () => (
+    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
+  )
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -97,6 +103,7 @@ const datePickerHelper = (config) => {
     onYearChange: [() => {
       yearChangeHook()
     }],
+    plugins: setMonthAndYearPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -153,8 +160,10 @@ const datePickerHelper = (config) => {
   }
 
   // Adding dropdown icons to year and month selects
-  picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  if (picker.monthElements[0].parentElement) {
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  plugins: true,
+  picker_id: "disabled_date"
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMonthAndYear = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="disabled-date"
+          plugins
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerMonthAndYear

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

@@ -0,0 +1 @@
+By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.

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

@@ -16,6 +16,7 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
 
 
   react:
@@ -34,3 +35,4 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only

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

@@ -13,3 +13,4 @@ export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
+export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}

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

@@ -44,20 +44,18 @@ const Image = (props: ImageProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div>
-      <img
-          {...ariaProps}
-          {...dataProps}
-          alt={alt}
-          className={classes}
-          data-src={url}
-          id={id}
-          onError={onError}
-          rounded={+rounded}
-          src={url}
-          transition={transition}
-      />
-    </div>
+    <img
+        {...ariaProps}
+        {...dataProps}
+        alt={alt}
+        className={classes}
+        data-src={url}
+        id={id}
+        onError={onError}
+        rounded={+rounded}
+        src={url}
+        transition={transition}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb

@@ -49,6 +49,7 @@
   props: {
     alt: "This is the alt text!",
     on_error: "this.classList.add('image-error')",
+    padding_x: "none",
     rounded: true,
     size: "xs",
     url: "not_a_picture"