RubyGems - playbook_ui_docs - Versions diffs - 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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