playbook_ui_docs 14.23.0.pre.alpha.PLAY2330removewalkthrough9176 → 14.23.0.pre.alpha.advancedtablefix9082

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8302db54f2b37e67bfc21c19f194591ef17922e3452d106ec4bc938bf58db77a
-  data.tar.gz: 71aaa06c4ea7cc3f6624fe87fdee668a1a9ec992408ff9615dc680c278af4385
+  metadata.gz: face0b80f1d5d9e0fb87ccc7cebcc7ef475bcc9d8145a351996b12411ec38617
+  data.tar.gz: 9fbf92d363ce40a13a78681df95530ad0272a61575375cc9fdb7e883cd8ebd2b
 SHA512:
-  metadata.gz: 01b517c69480a991a19a510d458e255d4cde2140616644009a515a21c72f3b27b7aea634aaad8075a661f6e40202b78d4af922ec75f8f321041586582b128a8a
-  data.tar.gz: 916bcea368c645449dc17cadb28252eaedb09386931fe1d2cb8d2ffd9e5022fc8ad1decab6f6c20d9578ac522f5cce1a01607853d23a1bc2507e0e5d91e924c4
+  metadata.gz: 3ba7b40439c66ea7b7fa22eb6ef5bd3e09cd60cef1fda49c4f12dc526b6105ebeb7c7e35a1df0019e39ec9db2b038cd917688e7bd139f9eda6ef163cbb801c8c
+  data.tar.gz: c73cf9c7237f5c8b4500e63cc26ba019d75b4cbad1978b460cb7152495f797e3976687ff50ec048079365c9b5da294007def7a87dfb9240102f59b2d8c021389

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
-          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1,2 +1 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
-If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

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

@@ -18,7 +18,6 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
-          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,9 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  - dropdown_with_custom_radio_options: Custom Radio Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,5 +21,4 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb

@@ -19,7 +19,6 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
-                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughContinuous = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example Title',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.examplePaused',
+      },
+      {
+        title: 'Toggle',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="examplePaused"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+          continuous
+      />
+    </div>
+  )
+}
+
+export default WalkthroughContinuous

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughDefault = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example title',
+        content:
+      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
+        target: '.example',
+      },
+      {
+        title: 'Toggle',
+        content:
+        'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="example"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughDefault

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughMultiBeacon = (props) => {
+  const [stateA, setStateA] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example title',
+        content:
+          'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
+        target: '.exampleMulti',
+      },
+    ],
+  })
+
+  const [stateB, setStateB] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Toggle',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb_toggle_control',
+      },
+    ],
+  })
+
+  const [stateC, setStateC] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Top Nav',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="exampleMulti"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setStateA({
+            ...stateA,
+            run: true,
+          })
+          setStateB({
+            ...stateB,
+            run: true,
+          })
+          setStateC({
+            ...stateC,
+            run: true,
+          })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setStateA({
+            ...stateA,
+            run: false,
+          })
+          setStateB({
+            ...stateB,
+            run: false,
+          })
+          setStateC({
+            ...stateC,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={stateA.run}
+          steps={stateA.steps}
+          {...props}
+      />
+      <Walkthrough
+          run={stateB.run}
+          steps={stateB.steps}
+          {...props}
+      />
+      <Walkthrough
+          run={stateC.run}
+          steps={stateC.steps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughMultiBeacon

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughNoBeacon = (props) => {
+  const [state, setState] = useState({
+    callback: (data) => {
+      if (data.action === 'close' && data.type === 'step:after') {
+        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
+        setState({ ...state, run: false })
+      }
+    },
+    run: false,
+    steps: [
+      {
+        title: 'Example Title',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.exampleNoBeacon',
+        disableBeacon: true,
+      },
+      {
+        title: 'Toggle',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="exampleNoBeacon"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+          continuous
+      />
+    </div>
+  )
+}
+
+export default WalkthroughNoBeacon

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughNoOverlay = (props) => {
+  const [noOverlay, setNoOverlayState] = useState({
+    callback: (data) => {
+      if (data.action === 'close' && data.type === 'step:after') {
+        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
+        setNoOverlayState({ ...noOverlay, run: false })
+      }
+    },
+    disableOverlay: true,
+    run: false,
+    steps: [
+      {
+        title: 'Example Title',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.exampleNoOverlay',
+      },
+      {
+        title: 'Toggle',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="exampleNoOverlay"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setNoOverlayState({ ...noOverlay,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setNoOverlayState({
+            ...noOverlay,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          disableOverlay
+          run={noOverlay.run}
+          steps={noOverlay.steps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughNoOverlay

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughStyled = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example title',
+        content:
+      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
+        target: '.styled',
+      },
+      {
+        title: 'Toggle',
+        content:
+        'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="styled"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          styles={{
+            options: {
+            beaconSize: 120,
+            },
+          }}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughStyled

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

@@ -0,0 +1,10 @@
+examples:
+  
+  
+  react:
+  - walkthrough_default: Default
+  - walkthrough_continuous: Continuous
+  - walkthrough_no_beacon: No Beacon
+  - walkthrough_no_overlay: No Overlay
+  - walkthrough_multi_beacon: Multi Beacon
+  - walkthrough_styled: Styled

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

@@ -0,0 +1,6 @@
+export { default as WalkthroughDefault } from './_walkthrough_default.jsx'
+export { default as WalkthroughContinuous } from './_walkthrough_continuous.jsx'
+export { default as WalkthroughNoBeacon } from './_walkthrough_no_beacon.jsx'
+export { default as WalkthroughMultiBeacon } from './_walkthrough_multi_beacon.jsx'
+export { default as WalkthroughNoOverlay } from './_walkthrough_no_overlay.jsx'
+export { default as WalkthroughStyled } from './_walkthrough_styled.jsx'