RubyGems - playbook_ui - Versions diffs - 14.14.0.pre.alpha.play1853typeaheadreacthookform6480 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286 - Mend

playbook_ui 14.14.0.pre.alpha.play1853typeaheadreacthookform6480 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f65dcf8d97eebac4beb401f99459d8dd6e52a2a4fa4027a98a1562c7fbcd6453
-  data.tar.gz: 14ae80f9ae45b3dd0e341cbf86d2fd38d472a2dd53fa15a695e225be401442f2
+  metadata.gz: d27a1fb0e1b7ff46b56d6009a0eb62cd2d8fee0a67bcbe52756710ef9aaf5581
+  data.tar.gz: c46d01bb2e6d6b386297b040c132f438da09b14b5582319a07ec6358f758917f
 SHA512:
-  metadata.gz: f28550af673137070b4371ff81a3c64a6cbb9972e258be442f08e6faf543ab0f0dd089cd464d6c36d42d3481e67c7fd4d6fbf104a4644653c74ff323406f2937
-  data.tar.gz: 7b6e924e6b9f16bbfd886877b0abfc92b961b0cf14155aa0c1edcdaf12a43fd557d6d561d69ccac82d20da7523d307aee0a107955d407c33185afbd6ffef91c7
+  metadata.gz: 7c87e5ec2242eaf97737497152d0494d166282ad0da5dc17e0efd1008e1c698bbeb1389fd96cff40e8b1607caaa92dfdf3a90b9461e9876cf4c79030bd079b2d
+  data.tar.gz: f41cc750d14f6ec823711b0f85c3af3f60ff08f7149de6242969353b0fb2bac27576e03d75e587370d1286f46c2b60b64554cc19aa663a432274ee91c0dd03b3

data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED Viewed

@@ -21,7 +21,6 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
-  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
-    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -120,57 +118,44 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && !amount ? (
-            <div>{nullDisplay}</div>
-          ) : (
-            <>
-              <div>{handleNegative}{symbol}</div>
-              <div>{getAmount}</div>
-              <div>
-                {getAbbreviation}
-                {unit ? unit : getDecimalValue}
-              </div>
-            </>
-          )
+          <>
+            <div>{handleNegative}{symbol}</div>
+            <div>{getAmount}</div>
+            <div>
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </div>
+          </>
         ) : (
-          nullDisplay && !amount ? (
+          <>
+            <Body
+                className="dollar_sign"
+                color="light"
+                dark={dark}
+            >
+              {handleNegative}{symbol}
+            </Body>
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-          >
-            {nullDisplay}
-          </Title>
-          ) : (
-            <>
-              <Body
-                  className="dollar_sign"
-                  color="light"
-                  dark={dark}
-              >
-                {handleNegative}{symbol}
-              </Body>
-              <Title
-                  className="pb_currency_value"
-                  dark={dark}
-                  size={sizes[size]}
-              >
-                {getAmount}
-              </Title>
-              <Body
-                  className="unit"
-                  color="light"
-                  dark={dark}
-              >
-                {getAbbreviation}
-                {unit ? unit : getDecimalValue}
-              </Body>
-            </>
-          )
+            >
+              {getAmount}
+            </Title>
+            <Body
+                className="unit"
+                color="light"
+                dark={dark}
+            >
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </Body>
+          </>
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb CHANGED Viewed

@@ -1,24 +1,17 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <% if object.null_display && object.amount.blank? %>
-        <div><%= object.null_display %></div>
-      <% else %>
-        <div><%= object.negative_sign %><%= object.symbol %></div>
-        <div><%= object.title_props[:text] %></div>
-        <div><%= object.body_props[:text] %></div>
-      <% end %>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
+      <div><%= object.title_props[:text] %></div>
+      <div><%= object.body_props[:text] %></div>
     <% else %>
-     <% if object.null_display && object.amount.blank? %>
-        <%= pb_rails("title", props: object.title_props) %>
-      <% else %>
-        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-          <%= object.negative_sign %><%= object.symbol %>
-        <% end %>
-          <%= pb_rails("title", props: object.title_props) %>
-          <%= pb_rails("body", props: object.body_props) %>
+      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+        <%= object.negative_sign %><%= object.symbol %>
       <% end %>
+      <%= pb_rails("title", props: object.title_props) %>
+      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED Viewed

@@ -46,9 +46,6 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
-      prop :null_display, type: Playbook::Props::String,
-                          required: false
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -68,20 +65,10 @@ module Playbook
         }
       end
-      def title_text
-        if null_display
-          null_display
-        elsif swap_negative
-          absolute_amount(abbr_or_format_amount)
-        else
-          abbr_or_format_amount
-        end
-      end
       def title_props
         {
           size: size_value,
-          text: title_text,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -158,10 +145,8 @@ module Playbook
           1
         when "md"
           3
-        when "sm"
-          4
         else
-          3
+          4
         end
       end

data/app/pb_kits/playbook/pb_currency/docs/example.yml CHANGED Viewed

@@ -10,7 +10,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
   react:
   - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js CHANGED Viewed

@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
-export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_drawer/_drawer.scss CHANGED Viewed

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -149,34 +157,6 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-    &.open {
-      max-height: 1000px;
-    }
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -349,10 +329,6 @@ body.PBDrawer__Body--close {
     opacity: 1;
     pointer-events: none;
-    & .pb_drawer {
-      pointer-events: auto;
-    }
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb CHANGED Viewed

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-    <%= pb_rails("drawer", props: {
-        id:"drawer-1",
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    <%= pb_rails("drawer", props: {
-        id:"drawer-2",
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
+<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/example.yml CHANGED Viewed

@@ -2,11 +2,6 @@ examples:
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders
   react:

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb CHANGED Viewed

@@ -1,20 +1,12 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>">
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>DRAWER CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb CHANGED Viewed

@@ -2,55 +2,7 @@
 module Playbook
   module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
+    class Drawer < ::Playbook::KitBase
     end
   end
 end

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { isEmpty, map, omitBy } from '../../utilities/object'
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ?
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> :
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 import Flex from '../../pb_flex/_flex'
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children &&
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED Viewed

@@ -32,7 +32,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_overlay/_overlay.scss CHANGED Viewed

@@ -69,17 +69,4 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
-  &.overlay-hide-scrollbar {
-    & [class*="overflow_x_auto"],
-    & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
-      &::-webkit-scrollbar {
-        display: none !important;
-      }
-      -ms-overflow-style: none !important;
-      scrollbar-width: none !important;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx CHANGED Viewed

@@ -11,7 +11,6 @@ export type OverlayChildrenProps = {
     dynamic?: boolean,
     position: string,
     size: string,
-    scrollBarNone?: boolean,
 }
 type OverlayProps = {
@@ -24,8 +23,6 @@ type OverlayProps = {
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
-    scrollBarNone?: boolean,
 }
 const Overlay = (props: OverlayProps) => {
@@ -39,12 +36,11 @@ const Overlay = (props: OverlayProps) => {
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
-        scrollBarNone = false,
     } = props
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
@@ -72,14 +68,12 @@ const Overlay = (props: OverlayProps) => {
                     children,
                     color,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
                     position: getPosition(),
-                    scrollBarNone,
                     size: getSize()
                 })
             }

data/app/pb_kits/playbook/pb_overlay/docs/example.yml CHANGED Viewed

@@ -4,11 +4,8 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
-  - overlay_hide_scroll_bar: Hide Scroll Bar

data/app/pb_kits/playbook/pb_overlay/docs/index.js CHANGED Viewed

@@ -2,4 +2,3 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
-export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb CHANGED Viewed

@@ -16,14 +16,12 @@ id: object.id,
         <% end %>
     <% else %>
-        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>"></div>
-        <div data-overlay-scroll-element="true">
-            <%= content.presence %>
-        </div>
+        <%= content.presence %>
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb CHANGED Viewed

@@ -8,13 +8,9 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
-      prop :dynamic, type: Playbook::Props::Boolean,
-                     default: false
-      prop :scroll_bar_none, type: Playbook::Props::Boolean,
-                             default: false
       def classname
-        generate_classname("pb_overlay", hide_scroll_bar_class)
+        generate_classname("pb_overlay")
       end
       def position
@@ -109,17 +105,6 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
-      def data_attributes
-        data ||= {}
-        data.merge!("data-pb-overlay" => true)
-        data.merge!("data-overlay-dynamic" => true) if dynamic
-        data
-      end
-      def hide_scroll_bar_class
-        scroll_bar_none ? " overlay-hide-scrollbar" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx CHANGED Viewed

@@ -64,15 +64,3 @@ test('should render children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveTextContent(props.children)
 })
-test('should add overlay-hide-scrollbar class when scrollBarNone is true', () => {
-    const props = {
-      children,
-      data: { testid: testId },
-      scrollBarNone: true
-    }
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('overlay-hide-scrollbar')
-})

data/app/pb_kits/playbook/pb_select/select.rb CHANGED Viewed

@@ -21,7 +21,6 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
-      prop :validation_message, type: Playbook::Props::String, default: ""
       def classnames
         classname + inline_class + compact_class + show_arrow_class
@@ -89,13 +88,6 @@ module Playbook
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
-      def data_attributes
-        data = attributes[:data] || {}
-        data.merge!("data-pb-select" => true)
-        data.merge!("data-validation-message" => validation_message) if validation_message.present?
-        data
-      end
     private
       def error_class