playbook_ui_docs 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
-  data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
+  metadata.gz: 79167a3d16d25909c9f4110866ef74784797313510baf6574c8a9dcc7f145e5d
+  data.tar.gz: b3adb21e79b1da5706208b838fc26fb04e29444fdd2b341fed054ec9e27d5d8d
 SHA512:
-  metadata.gz: 295d43d1813478690c1fd083359013a0207ae5fb2c79f2f702d139a3b781719eaa1b9d836940d478377971556325fa1d39560d417f61c6f5379e3d77640b531b
-  data.tar.gz: 76f1fa54e955307ed54c87ad0062f4fcb2698508da6b166c117d20e81ee883fa13bd5ceb0f6d8814b30e04d05c154d77c73486e12a0d01fbd5fd5b23093422d8
+  metadata.gz: fb61c3f801e0ccebb9fe280a588095cd14499955d22de09030a3bd8449d810a273d1ac1498e8a8e2a8f3d39907d817c1c675f54254a0e31e3c99ef4f74eea90b
+  data.tar.gz: a2ce5f891a1340dfed230be9b76e61fd91f3f71e96566921a27dcb958012bf0ed3916b23a050f38de9bd8bea8e194fd2d3806ed85e16c38ccd3e7b73c419dcfa

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

@@ -6,7 +6,6 @@ examples:
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
-    - checkbox_disabled: Disabled Checkbox
 
   react:
   - checkbox_default: Default
@@ -14,7 +13,6 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
-  - checkbox_disabled: Disabled Checkbox
 
   swift:
     - checkbox_default_swift: Default

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

@@ -3,4 +3,3 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
-export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'

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

@@ -17,8 +17,3 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-
-  swift:
-  - currency_size_swift: Size
-  - currency_alignment_swift: Alignment
-  - currency_props_swift: ""

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

@@ -1,5 +1,3 @@
 Your change 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.
-
-NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.
+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/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,5 +1,3 @@
 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.
-
-NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.
+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/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
+Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.

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

@@ -5,7 +5,3 @@ examples:
   
   react:
   - date_range_stacked_default: Default
-
-  swift:
-  - date_range_stacked_default_swift: Default
-  - date_range_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -1,20 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown } from '../../'
 
 const DropdownDefault = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
       label: "United States",
       value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
     }
   ];  
 
@@ -22,9 +33,16 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
-    />
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id} 
+            option={option}
+        /> 
+      ))}
+    </Dropdown>
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Designer",
+      title: "Senior UX Desinger",
       id: "ramon-ruiz",
       status: "Away"
     },
@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
     }
   ];
 
-  const CustomDisplay = () => {
+  const customDisplay = () => {
     return (
       <>
       {
@@ -62,9 +62,7 @@ const DropdownWithCustomDisplay = (props) => {
         options={options}
         {...props}
     >
-      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
-          placeholder="Select a User"
-      />
+      <Dropdown.Trigger customDisplay={customDisplay()}/>
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
@@ -81,7 +79,7 @@ const DropdownWithCustomDisplay = (props) => {
                 />
               </FlexItem>
               <FlexItem>
-                <Badge dark
+                <Badge
                     rounded
                     text={option.status}
                     variant={`${

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
 
 const DropdownWithCustomOptions = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -12,11 +14,11 @@ const DropdownWithCustomOptions = (props) => {
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",
@@ -31,6 +33,7 @@ const DropdownWithCustomOptions = (props) => {
   return (
   <div>
     <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
       id: "United-states"
     },
     {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
     },
     {
       label: "Pakistan",

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

@@ -1,23 +1,9 @@
 examples:
-  rails:
-  - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_label: With Label
-  - dropdown_with_custom_options: Custom Options
-  - dropdown_with_custom_display: Custom Display
-  - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-
+  
+  
   react:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-  # - dropdown_with_autocomplete: Autocomplete
-  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  # - dropdown_with_external_control: useDropdown Hook
-  # - dropdown_with_hook: useDropdown Hook with Any Trigger
 

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

@@ -2,10 +2,3 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
-export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
-export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
-export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
-export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
-export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
-export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
-  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -13,7 +12,6 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
-  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

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

@@ -2,7 +2,6 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
-export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = (props) => {
+const RadioAlignment = () => {
   return (
     <Flex>
       <Radio
@@ -11,7 +11,6 @@ const RadioAlignment = (props) => {
           name="Group2"
           tabIndex={0}
           value="Power"
-          {...props}
       />
       <br />
       <Radio
@@ -21,7 +20,6 @@ const RadioAlignment = (props) => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
-          {...props}
       />
       <br />
       <Radio
@@ -30,7 +28,6 @@ const RadioAlignment = (props) => {
           label="Google"
           name="Group2"
           value="Google"
-          {...props}
       />
     </Flex>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Radio from '../_radio'
 
-const RadioDefault = (props) => {
+const RadioDefault = () => {
   const ref = React.createRef()
 
   return (
@@ -13,7 +13,6 @@ const RadioDefault = (props) => {
           ref={ref}
           tabIndex={0}
           value="Power"
-          {...props}
       />
       <br />
       <Radio
@@ -21,7 +20,6 @@ const RadioDefault = (props) => {
           label="Nitro"
           name="Group2"
           value="Nitro"
-          {...props}
       />
       <br />
       <Radio
@@ -29,7 +27,6 @@ const RadioDefault = (props) => {
           label="Google"
           name="Group2"
           value="Google"
-          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Radio } from '../..'
 
-const RadioError = (props) => {
+const RadioError = () => {
   return (
     <div>
       <Radio
@@ -9,7 +9,6 @@ const RadioError = (props) => {
           label="Power"
           name="Group2"
           value="Power"
-          {...props}
       />
     </div>
   )

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

@@ -6,14 +6,12 @@ examples:
   - radio_error: With Error
   - radio_options: With Options
   - radio_alignment: Alignment
-  - radio_disabled: Disabled
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
-  - radio_disabled: Disabled
 
   swift:
   - radio_default_swift: Default

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

@@ -2,4 +2,3 @@ export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
-export { default as RadioDisabled } from './_radio_disabled.jsx'