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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb

@@ -1,17 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,48 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../..'
-
-const DropdownWithCustomPadding = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-            padding="sm"
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithCustomPadding

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

@@ -1 +0,0 @@
-By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb

@@ -1,47 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") do %>
-        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
-    <% end %>
-    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1 +0,0 @@
-The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 

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

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Dropdown, useDropdown, Button } from '../../'
-
-const DropdownWithExternalControl = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-    <Button
-        data={{dropdown:'pb-dropdown-trigger'}}
-        marginBottom='sm'
-        onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-        padding="none"
-        tabIndex={0}
-        variant="link"
-    >
-      {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
-    </Button>
-
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithExternalControl

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

@@ -1,72 +0,0 @@
-import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
-
-const DropdownWithHook = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-const buttonRef = useRef(null);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-      <CircleIconButton
-          htmlOptions={{ref: buttonRef}}
-          icon={"flag"}
-          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-          variant="secondary"
-      />
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        triggerRef={buttonRef}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        > 
-        <>
-          <FlexItem>
-              <Flex paddingRight='md'>
-                <Icon icon={option.icon} 
-                    paddingRight="xs"
-                />
-                <Body text={option.label} />
-              </Flex>
-          </FlexItem>
-              <FlexItem>
-                <Body color="light" 
-                    text={option.areaCode} 
-                />
-              </FlexItem>
-            </>
-        </Dropdown.Option>
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithHook

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

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

@@ -1,39 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../..'
-
-const DropdownDefault = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        label="Select a Country"
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownDefault

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

@@ -1 +0,0 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("flex") do %>
- <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
-<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Flex, ProgressSimple } from '../..'
-
-const ProgressSimpleFlex = () => {
-  return (
-    <Flex>
-      <ProgressSimple
-          align="left"
-          flex="1"
-          percent={68}
-      />
-    </Flex>
-  )
-}
-
-export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -1 +0,0 @@
-When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb

@@ -1,26 +0,0 @@
-<%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("radio", props: {
-            text: "Disabled unselected",
-            input_options: {
-                tabindex: 0,
-                disabled: true,
-            },
-            margin_bottom: "xs",
-            name: "DisabledGroup",
-            value: "Disabled unselected",
-        }) %>
-    <% end %>
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("radio", props: {
-            text: "Disabled selected",
-            input_options: {
-                tabindex: 0,
-                disabled: true,
-            },
-            checked: true,
-            name: "DisabledGroup",
-            value: "Disabled selected"
-        }) %>
-    <% end %>
-<% end %>

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

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import Radio from '../_radio'
-
-const RadioDisabled = (props) => {
-  const ref = React.createRef()
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-        <Radio 
-            disabled
-            label="Disabled unselected"
-            marginBottom="xs"
-            name="DisabledGroup"
-            ref={ref}
-            tabIndex={0}
-            value="Disabled unselected"
-            {...props}
-        />
-        <Radio
-            checked 
-            disabled
-            label="Disabled selected"
-            name="DisabledGroup"
-            value="Disabled selected"
-            {...props}
-        />
-    </div>
-  )
-}
-export default RadioDisabled