RubyGems - playbook_ui - Versions diffs - 7.0.1.pre.alpha15 → 7.0.1 - Mend

playbook_ui 7.0.1.pre.alpha15 → 7.0.1

Files changed (140) hide show

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx CHANGED

@@ -19,18 +19,11 @@ const MultiValue = (props: Props) => {
     selectProps,
   } = props
-  const { imageUrl, label } = data
-  const handleOnMultiValueRemove = () => {
-    const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
-    document.dispatchEvent(multiValueRemoveEvent)
-  }
   const handleOnClick = () => {
     if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
-    handleOnMultiValueRemove()
     removeProps.onClick()
   }
+  const { imageUrl, label } = data
   return (
     <components.MultiValueContainer

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx CHANGED

@@ -12,29 +12,21 @@ const Option = (props: any) => {
     imageUrl,
     label,
   } = props.data
-  const handleOptionClicked = () => {
-    const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
-    document.dispatchEvent(resultSelectedEvent)
-  }
   return (
     <components.Option {...props}>
-      <div onClick={handleOptionClicked}>
-        <Choose>
-          <When condition={imageUrl}>
-            <User
-                align="left"
-                avatarUrl={imageUrl}
-                name={label}
-                orientation="horizontal"
-            />
-          </When>
-          <When condition={!imageUrl}>
-            {label}
-          </When>
-        </Choose>
-      </div>
+      <Choose>
+        <When condition={imageUrl}>
+          <User
+              align="left"
+              avatarUrl={imageUrl}
+              name={label}
+              orientation="horizontal"
+          />
+        </When>
+        <When condition={!imageUrl}>
+          {label}
+        </When>
+      </Choose>
     </components.Option>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb CHANGED

@@ -25,7 +25,7 @@
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+    if (!event.target.dataset.typeaheadExample) return;
     fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
       .then(response => response.json())

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb CHANGED

@@ -18,7 +18,7 @@
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
+    if (!event.target.dataset.typeaheadExample2) return;
     const fuzzyMatch = function(string, term) {
       const ratio = 0.5;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx CHANGED

@@ -10,9 +10,12 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
+import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
 const TypeaheadWithPills = () => {
   return (
     <>
+      <TypeaheadWithPillsSummary />
       <Typeahead
           isMulti
           label="Colors"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx ADDED

@@ -0,0 +1,45 @@
+/* @flow */
+import React from 'react'
+import { Body, Flex, FlexItem, Icon } from '../..'
+const TypeaheadWithPillsAsyncSummary = () => {
+  return (
+    <>
+      <Flex
+          marginBottom="lg"
+          vertical="center"
+      >
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            <Icon
+                icon="info-circle"
+                marginRight="xs"
+            />
+          </Body>
+        </FlexItem>
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            {'If the data field '}
+            <code>{'imageUrl'}</code>
+            {' is present, '}
+            <code>{'FormPill'}</code>
+            {' will receive that field as a prop and display the image. '}
+            <br />
+            {'Additionally, you can also leverage the callback prop: '}
+            <code>{'onMultiValueClick'}</code>
+            {' to perform custom work when a '}
+            <code>{'MultiValue'}</code>
+            {' item is clicked.'}
+          </Body>
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
+export default TypeaheadWithPillsAsyncSummary

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx CHANGED

@@ -8,6 +8,8 @@ import {
   User,
 } from '../..'
+import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
 /**
  *
  * @const filterResults
@@ -63,6 +65,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
   return (
     <>
+      <TypeaheadWithPillsAsyncSummary />
       <If condition={users && users.length > 0}>
         <Caption
             marginBottom="xs"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx ADDED

@@ -0,0 +1,27 @@
+// @flow
+import React from 'react'
+import { Body, Icon } from '../..'
+const TypeaheadWithPillsSummary = () => {
+  return (
+    <>
+      <Body
+          color="light"
+          marginBottom="lg"
+      >
+        <Icon
+            icon="info-circle"
+            marginRight="xs"
+        />
+        {'Typeahead kit is data-driven. The minimum default fields are '}
+        <code>{'label'}</code>
+        {' and '}
+        <code>{'value'}</code>
+        {'.'}
+      </Body>
+    </>
+  )
+}
+export default TypeaheadWithPillsSummary

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED

@@ -2,9 +2,6 @@ examples:
   rails:
     - typeahead_default: Default
     - typeahead_with_context_dark: With Context
-    - typeahead_with_pills: With Pills
-    - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED

@@ -5,19 +5,12 @@ module Playbook
     class Typeahead
       include Playbook::Props
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
       prop :label
-      prop :load_options
       prop :name
-      prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
+      prop :value
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
-      prop :value
       partial "pb_typeahead/typeahead"
@@ -32,22 +25,6 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
-      def typeahead_with_pills_options
-        base_options = {
-          isMulti: true,
-          label: label,
-          options: options,
-          placeholder: placeholder
-        }
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
-        base_options
-      end
     end
   end
 end

data/app/pb_kits/playbook/react_rails_kits.js CHANGED

@@ -3,4 +3,3 @@ export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
 export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
-export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'

data/app/pb_kits/playbook/vendor.js CHANGED

@@ -18,9 +18,6 @@ PbPopover.start()
 import PbTooltip from './pb_tooltip'
 PbTooltip.start()
-import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
-PbFixedConfirmationToast.start()
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()

data/lib/playbook/version.rb CHANGED

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.0.1.pre.alpha15"
+  VERSION = "7.0.1"
 end

metadata CHANGED

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.1.pre.alpha15
+  version: 7.0.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-09 00:00:00.000000000 Z
+date: 2020-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -515,13 +515,15 @@ files:
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
-- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
-- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
 - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx
 - app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
 - app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
 - app/pb_kits/playbook/pb_button_toolbar/docs/index.js
@@ -530,8 +532,6 @@ files:
 - app/pb_kits/playbook/pb_caption/_caption.scss
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.rb
-- app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb
-- app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb
@@ -680,11 +680,15 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
@@ -832,8 +836,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
@@ -846,7 +848,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
 - app/pb_kits/playbook/pb_flex/_flex.html.erb
 - app/pb_kits/playbook/pb_flex/_flex.jsx
 - app/pb_kits/playbook/pb_flex/_flex.scss
@@ -1505,18 +1506,12 @@ files:
 - app/pb_kits/playbook/pb_table/_table_row.html.erb
 - app/pb_kits/playbook/pb_table/_table_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_description.md
-- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md
 - app/pb_kits/playbook/pb_table/docs/_table_lg.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_lg.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_lg.md
@@ -1525,9 +1520,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_md.md
 - app/pb_kits/playbook/pb_table/docs/_table_multiline.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_one_action.md
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
@@ -1538,12 +1530,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.md
-- app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
-- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md
 - app/pb_kits/playbook/pb_table/docs/example.yml
 - app/pb_kits/playbook/pb_table/docs/index.js
 - app/pb_kits/playbook/pb_table/index.js
@@ -1713,7 +1699,6 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
 - app/pb_kits/playbook/pb_toggle/toggle.rb
@@ -1739,15 +1724,11 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/docs/index.js
 - app/pb_kits/playbook/pb_typeahead/index.js
@@ -1853,7 +1834,6 @@ files:
 - lib/playbook/engine.rb
 - lib/playbook/version.rb
 - lib/playbook_ui.rb
-- lib/tasks/changelog.rake
 - lib/tasks/pb_release.rake
 - lib/tasks/playbook_tasks.rake
 homepage: http://playbook.powerapp.cloud
@@ -1871,9 +1851,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key:

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss DELETED

@@ -1,57 +0,0 @@
-@import "./button_toolbar_mixins";
-@import "../tokens/colors";
-@import "../tokens/opacity";
-[class^=pb_button_toolbar]{
-  // Vertical =============
-  &[class*=_vertical] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_dark)
-      }
-    }
-  }
-  // Horizontal =============
-  &[class*=_horizontal] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_dark)
-      }
-    }
-  }
-  & > [class^=pb_button]:not(:first-child):hover::before,
-  [class^=pb_button]:hover + [class^=pb_button]::before {
-    opacity: 0
-  }
-  // Hover =============
-  [class^=pb_button].dark  {
-    @media (hover:hover) {
-      &:hover {
-        background-color:darken($royal, 20%);
-      }
-    }
-    &[class*=secondary] {
-      @media (hover:hover) {
-        &:hover {
-          background-color:rgba($primary_action, $opacity_3)
-        }
-      }
-    }
-  }
-}