playbook_ui_docs 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -1 +0,0 @@
-The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md

@@ -1 +0,0 @@
-To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleBorderless = (props) => {
-  return (
-    <>
-        <Table
-            headerStyle="borderless"
-            size="sm"
-            {...props}
-        >
-          <thead>
-              <tr>
-                  <th>{'Column 1'}</th>
-                  <th>{'Column 2'}</th>
-                  <th>{'Column 3'}</th>
-                  <th>{'Column 4'}</th>
-                  <th>{'Column 5'}</th>
-              </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-          </tbody>
-        </Table>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleBorderless

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md

@@ -1 +0,0 @@
-Customize your header by removing the header borders with the `headerStyle="borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-
-import Background from '../../pb_background/_background'
-import Card from '../../pb_card/_card'
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleFloating = (props) => {
-  return (
-    <>
-        <Card background="light" 
-            {...props}
-        >
-            <Table
-                headerStyle="floating"
-                size="sm"
-                {...props}
-            >
-              <Table.Head>
-                  <Background backgroundColor="light" 
-                      tag="tr"
-                      {...props}
-                  >
-                      <Table.Header>{'Column 1'}</Table.Header>
-                      <Table.Header>{'Column 2'}</Table.Header>
-                      <Table.Header>{'Column 3'}</Table.Header>
-                      <Table.Header>{'Column 4'}</Table.Header>
-                      <Table.Header>{'Column 5'}</Table.Header>
-                  </Background>
-              </Table.Head>
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-        </Card>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleFloating

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -1 +0,0 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
-    I'm 150px high and 100px wide!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
-    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
-    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
-    I have a min_width of 300px!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
-    I have a min_height of 300px!
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb

@@ -1,19 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-disabled",
-    disabled: true,
-    placeholder: "All Colors",
-    options: options,
-    label: "Colors",
-    name: :foo,
-    is_multi: false
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadDisabled = (props) => {
-  return (
-    <Typeahead
-        disabled
-        label="Colors"
-        options={options}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadDisabled

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { Typeahead, Title } from 'playbook-ui'
-import { useForm } from 'react-hook-form'
-
-const languages = [
-  { label: 'JavaScript', value: '1995', category: 'Web Development' },
-  { label: 'Python', value: '1991', category: 'General Purpose' },
-  { label: 'Java', value: '1995', category: 'Enterprise' },
-  { label: 'C++', value: '1985', category: 'Systems Programming' },
-  { label: 'Go', value: '2009', category: 'Systems Programming' },
-  { label: 'Rust', value: '2010', category: 'Systems Programming' },
-  { label: 'Swift', value: '2014', category: 'Mobile Development' },
-  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
-  { label: 'Ruby', value: '1995', category: 'General Purpose' },
-  { label: 'PHP', value: '1995', category: 'Web Development' },
-]
-
-const colors = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadReactHook = (props) => {
-  const { register, watch } = useForm()
-
-  const selectedLanguages = watch('languages')
-  const selectedColor = watch('color')
-
-  return (
-    <>
-      <Typeahead
-          isMulti
-          label="Multi Select Languages"
-          multiKit="language"
-          options={languages}
-          {...props}
-          {...register('languages')}
-      />
-      <Title 
-          size={4} 
-          text='Selected Languages' 
-      />
-      {selectedLanguages && selectedLanguages.map(language => (
-        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
-      ))}
-
-      <Typeahead
-          label="Colors"
-          marginTop="lg"
-          options={colors}
-          {...props}
-          {...register('color')}
-      />
-      <Title 
-          size={4} 
-          text='Selected Color' 
-      />
-      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
-    </>
-  )
-}
-
-export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -1 +0,0 @@
-You can pass `react-hook-form` props to the Typeahead kit.

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb

@@ -1,22 +0,0 @@
-<div class="pb--doc-demo-row">
-  <%= pb_rails("user", props: {
-    align: "left",
-    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-    name: "Anna Black",
-    name_style: "body",
-    orientation: "horizontal",
-    size: "md",
-    territory: "PHL",
-    title: "Remodeling Consultant"
-  }) %>
-  <%= pb_rails("user", props: {
-    align: "left",
-    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-    name: "Anna Black",
-    name_style: "detail",
-    orientation: "horizontal",
-    size: "md",
-    territory: "PHL",
-    title: "Remodeling Consultant"
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { User } from 'playbook-ui'
-
-const UserFontOptions = (props) => {
-  return (
-    <div>
-      <div className="pb--doc-demo-row">
-        <div>
-          <User
-              align="center"
-              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-              name="Anna Black"
-              nameStyle= "body"
-              orientation="horizontal"
-              size= "md"
-              territory= "PHL"
-              title="Remodeling Consultant"
-              {...props}
-          />
-        </div>
-
-        <div>
-          <User
-              align="left"
-              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-              name="Anna Black"
-              nameStyle= "detail"
-              orientation="horizontal"
-              size= "md"
-              territory= "PHL"
-              title= "Remodeling Consultant"
-              {...props}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default UserFontOptions

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md

@@ -1,5 +0,0 @@
-Passing a `name_style` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
-
-Passing a `title_style` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
-
-The size of the `caption` is determined by the `size` prop.

data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md

@@ -1,5 +0,0 @@
-Passing a `nameStyle` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
-
-Passing a `titleStyle` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
-
-The size of the `caption` is determined by the `size` prop.