playbook_ui_docs 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380
+  version: 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-05 00:00:00.000000000 Z
+date: 2024-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -409,9 +409,6 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md
-- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb
-- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
 - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
@@ -856,8 +853,7 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -1103,18 +1099,6 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
 - app/pb_kits/playbook/pb_line_graph/docs/example.yml
 - app/pb_kits/playbook/pb_line_graph/docs/index.js
-- app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_color.jsx
-- app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx
-- app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
-- app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
-- app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
-- app/pb_kits/playbook/pb_link/docs/example.yml
-- app/pb_kits/playbook/pb_link/docs/index.js
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx
@@ -1814,9 +1798,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("currency", props: {
-  amount: '1234567.89',
-  comma_separator: true,
-  size: 'lg',
-  emphasized: false,
-  decimals: 'matching',
-}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx

@@ -1,18 +0,0 @@
-import React from "react"
-
-import Currency from "../_currency"
-
-const CurrencyCommaSeparator = (props) => {
-  return (
-    <Currency
-        amount='1234567.89'
-        commaSeparator
-        decimals="matching"
-        emphasized={false}
-        size="lg"
-        {...props}
-    />
-  )
-}
-
-export default CurrencyCommaSeparator

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

@@ -1,3 +0,0 @@
-The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
-
-**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +0,0 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
-
-__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +0,0 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb

@@ -1,30 +0,0 @@
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "https://www.google.com/search?q=playbook+design+system",
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "https://www.youtube.com/@PowerHRG",
-    color: "body",
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
-    color: "muted",
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "https://rubygems.org/gems/playbook_ui/",
-    color: "destructive",
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkColor = (props) => (
-  <div>
-    <div>
-      <Link
-          href="https://www.google.com/search?q=playbook+design+system"
-          text="link example"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          color="body"
-          href="https://www.youtube.com/@PowerHRG"
-          text="link example"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          color="muted"
-          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
-          text="link example"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          color="destructive"
-          href="https://rubygems.org/gems/playbook_ui/"
-          text="link example"
-          {...props}
-      />
-    </div>
-  </div>
-)
-
-export default LinkColor

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("link", props: {
-  text: "link example",
-  href: "#disabled",
-  disabled: true,
-}) %>

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkDisabled = (props) => (
-  <div>
-    <Link
-        disabled
-        href="#disabled"
-        text="link example"
-        {...props}
-    />
-  </div>
-)
-
-export default LinkDisabled

data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb

@@ -1,15 +0,0 @@
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "#icon",
-    icon: "arrow-up-right-from-square",
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("link", props: {
-    text: "link example",
-    href: "#icon2",
-    icon_right: "chevron-right",
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkIcon = (props) => (
-  <div>
-    <div>
-      <Link
-          href="#icon"
-          icon="arrow-up-right-from-square"
-          text="link example"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          href="#icon2"
-          iconRight="chevron-right"
-          text="link example"
-          {...props}
-      />
-    </div>
-  </div>
-)
-
-export default LinkIcon

data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb

@@ -1,35 +0,0 @@
-<%= pb_rails("link", props: {
-  text: "h1 link example",
-  href: "#tag",
-  icon: "arrow-up-right-from-square",
-  tag: "h1",
-}) %>
-
-<%= pb_rails("link", props: {
-  text: "h3 link example",
-  href: "#tag2",
-  tag: "h3",
-  underline: true,
-}) %>
-
-<%= pb_rails("link", props: {
-  color: "destructive",
-  text: "h6 link example",
-  href: "#tag3",
-  tag: "h6",
-}) %>
-
-<%= pb_rails("link", props: {
-  text: "p link example",
-  href: "#tag4",
-  icon_right: "chevron-right",
-  tag: "p",
-}) %>
-
-<div>
-  This is a <%= pb_rails("link", props: {
-    text: "span link example",
-    href: "#tag5",
-    tag: "span",
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkTag = (props) => (
-  <div>
-    <Link
-        href="#tag"
-        icon="arrow-up-right-from-square"
-        tag="h1"
-        text="h1 link example"
-        {...props}
-    />
-    <Link
-        href="#tag2"
-        tag="h3"
-        text="h3 link example"
-        underline
-        {...props}
-    />
-    <Link
-        color="destructive"
-        href="#tag3"
-        tag="h6"
-        text="h6 link example"
-        {...props}
-    />
-    <Link
-        href="#tag4"
-        iconRight="chevron-right"
-        tag="p"
-        text="p link example"
-        {...props}
-    />
-    <div>
-      This is a <Link
-          href="#tag5"
-          tag="span"
-          text="span link example"
-          {...props}
-    />
-    </div>
-  </div>
-)
-
-export default LinkTag

data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("link", props: {
-  text: "link example",
-  href: "#underline",
-  underline: true,
-}) %>

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkUnderline = (props) => (
-  <div>
-    <Link
-        href="#underline"
-        text="link example"
-        underline
-        {...props}
-    />
-  </div>
-)
-
-export default LinkUnderline

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

@@ -1,16 +0,0 @@
-examples:
-  
-  rails:
-  - link_color: Color
-  - link_underline: Underline
-  - link_icon: Icon
-  - link_disabled: Disabled
-  - link_tag: Tag
-  
-  
-  react:
-  - link_color: Color
-  - link_underline: Underline
-  - link_icon: Icon
-  - link_disabled: Disabled
-  - link_tag: Tag

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

@@ -1,5 +0,0 @@
-export { default as LinkColor } from './_link_color.jsx'
-export { default as LinkUnderline } from './_link_underline.jsx'
-export { default as LinkIcon } from './_link_icon.jsx'
-export { default as LinkDisabled } from './_link_disabled.jsx'
-export { default as LinkTag } from './_link_tag.jsx'

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -1,43 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-
-      <% item.label do %>
-        <%= pb_rails("timeline/label") do %>
-          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.step do %>
-        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Jackson Heights",
-          detail: "37-27 74th Street"
-        }) %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
-
-      <% item.step do %>
-        <%= pb_rails("timeline/step") do %>
-          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.detail do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Greenpoint",
-          detail: "81 Gate St Brooklyn"
-        }) %>
-      <% end %>
-    <% end %>
-
-    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
-      <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-      }) %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
-
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineWithChildren = (props) => (
-  <div>
-    <Timeline orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={2}
-              text='Any Kit Here'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
-  </div>
-)
-
-export default TimelineWithChildren

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

@@ -1,2 +0,0 @@
-Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
-