playbook_ui 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx

@@ -13,7 +13,6 @@ type ResultsCountProps = {
 const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
   
   const resultTitle = () => {
-    if (results == null) return null
     return (
       <TitleCount
           align="center"
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const justResults = () => {
-    if (results == null) return null
     return (
       <Caption
           className="filter-results"
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
   }
 
   const displayResultsCount = () => {
-    if (results != null && results >=0 && title) {
+    if (results && title) {
       return (
         <>
           {resultTitle()}
         </>
       )
-    } else if (results !=null && results >=0 ) {
+    } else if (results) {
       return (
         <>
           {justResults()}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
           double
           minWidth="375px"
           onSortChange={SortingChangeCallback}
-          results={0}
+          results={1}
           sortOptions={{
             popularity: 'Popularity',
             // eslint-disable-next-line

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

@@ -10,7 +10,6 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
-  - filter_popover_props: Popover Props
 
   react:
   - filter_default: Default
@@ -22,5 +21,3 @@ examples:
   - filter_max_width: Max Width for Popover Inside of Filter
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
-  - filter_popover_props: Popover Props
-

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

@@ -7,4 +7,3 @@ export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
-export { default as FilterPopoverProps } from './_filter_popover_props.jsx'

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -71,13 +71,13 @@
     <% end %>
 
     <% if object.template != "sort_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
         <%= content %>
       <% end %>
     <%end%>
 
     <% if object.template != "filter_only"%>
-      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
+      <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
           <%= pb_rails("list") do %>
             <% object.sort_menu.each do |item| %>
               <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :placement, type: Playbook::Props::Enum,
                        values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                        default: "bottom-start"
-      prop :popover_props, type: Playbook::Props::HashProp,
-                           default: {}
 
       def classname
         generate_classname("pb_filter_kit").rstrip

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
-        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
-  const dynamicInlineProps = globalInlineProps(props)
-  const combinedStyles = {
-    ...fixedStyle,
-    ...dynamicInlineProps
-  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={combinedStyles}
+        style={fixedStyle}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,5 +1,8 @@
-<%= pb_content_tag(:div, 
-  style: object.inline_styles
-) do %> 
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,13 +20,8 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def inline_styles
-        styles = []
-        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
-        styles << "height: #{height};" if height.present?
-        styles << "min-height: #{min_height};" if min_height.present?
-        styles << "max-height: #{max_height};" if max_height.present?
-        styles.join(" ")
+      def style_value
+        "flex-basis: #{fixed_size};" if fixed_size.present?
       end
 
     private

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

@@ -3,4 +3,3 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
-  - form_form_with_loading: Default + Loading

data/app/pb_kits/playbook/pb_form/form.rb

@@ -7,7 +7,6 @@ module Playbook
                          type: Playbook::Props::Base
       prop :form_system_options, deprecated: "Use options instead",
                                  type: Playbook::Props::Base
-      prop :loading, type: Playbook::Props::Boolean, default: false
       prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
@@ -23,7 +22,6 @@ module Playbook
           aria: aria,
           class: classname,
           data: data,
-          loading: loading,
           validate: validate,
         }.merge(prop(:options) || prop(:form_system_options) || {})
       end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
-
-  const filteredProps: FormPillProps = {...props}
-  delete filteredProps.truncate
-
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(filteredProps),
+    globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
-            truncate={props.truncate}
         />
       )}
       <div

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -12,7 +11,6 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,4 +4,3 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
-export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'