playbook_ui 14.6.1 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4304

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f6ea7da8d2792558be3547ba7f887dadbef40b7cc6e852865eccaf4c84a3026
-  data.tar.gz: 24c904059667b83f19598861f87fb05348151ea3e2fcb57a0d092107480f5b76
+  metadata.gz: 2ecc1c466ffb02f3bc53b3e5237a09734fa63537829c7a4602ea17c2cf54f8d4
+  data.tar.gz: 90a09dc18273b805231bc2657bb1d4cb953329a2e56bc8018002fbf31f65bb71
 SHA512:
-  metadata.gz: 82b8062e404c3ca8136f06c214176e53454f60576e3e3ec367f78b176726f925bf60ef71c18e94850f6a932c1dd78872f735a3c4ec7b18dc6f71485c0bdc2171
-  data.tar.gz: 725519a7cd656ab4c3a81f1b2fb9114d99c660e4bcde7ea420a3b303922d0f82a8631d77fc9175bcdb44466dae2c3d07663ffa010f76939e2f3103bfb5591c84
+  metadata.gz: 991aee43ea52beb462030837fff91e73869d23cc1121188427c880b67a77db574b8ff9b56686e054e66f744afe5f6d2a71bf55c29d761073e478280d7e70dff7
+  data.tar.gz: ec959956157c06abfd37e1fb04e118c012c067229045251faf52202c40bb205924702991409a7de939e016d8c8507ae37682ccd694c2cd63c89c8c0f4e122072

data/app/pb_kits/playbook/_playbook.scss

@@ -30,6 +30,7 @@
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
+@import 'pb_drawer/drawer';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -54,6 +55,7 @@
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
+@import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_map/map';
@@ -106,7 +108,6 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -9,7 +9,7 @@
 
 @import "./scss_partials/dropdown_animation";
 
-.pb_dropdown {
+[class*="pb_dropdown"] {
   .dropdown_wrapper {
     [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
@@ -131,7 +131,7 @@
     }
   }
 
-  &.separators_hidden {
+  &[class*="separators_hidden"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
@@ -142,7 +142,7 @@
     }
   }
 
-  &.subtle {
+  &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
@@ -178,7 +178,7 @@
       }
     }
   
-    &.separators_hidden {
+    &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const htmlProps = buildHtmlProps(htmlOptions);
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
-        buildCss("pb_dropdown"),
+        buildCss("pb_dropdown", variant, separatorsClass),
         globalProps(props),
-        variant,
-        separatorsClass,
         className
     );
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -24,7 +24,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
+        generate_classname("pb_dropdown", variant, separators_class)
       end
 
     private
@@ -38,7 +38,7 @@ module Playbook
       end
 
       def separators_class
-        separators ? "" : "separators_hidden"
+        separators ? nil : "separators_hidden"
       end
 
       def options_with_blank

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_dropdown')
+  expect(kit).toHaveClass('pb_dropdown_default')
 })
 
 test('generated default Trigger and Container when none passed in', () => {

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -142,7 +142,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag {
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+    + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
     }
   }
@@ -169,7 +171,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag {
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+      + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;
       }
     }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
+import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -62,6 +63,30 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const renderTitle = (content: string, className: string) => {
+    const titleComponent = (
+      <Title
+          className={className}
+          size={4}
+          text={content}
+          truncate={props.truncate}
+      />
+    )
+    if (props.truncate) {
+      return (
+        <Tooltip
+            interaction
+            placement="top"
+            position="fixed"
+            text={content}
+        >
+          {titleComponent}
+        </Tooltip>
+      )
+    }
+    return titleComponent
+  }
+
   return (
     <div className={css}
         id={id}
@@ -77,12 +102,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-              truncate={props.truncate}
-          />
+          {renderTitle(name, "pb_form_pill_text")}
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -93,12 +113,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-              truncate={props.truncate}
-          />
+          {renderTitle(name, "pb_form_pill_text")}
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -113,22 +128,10 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          <Title
-              className="pb_form_pill_tag"
-              size={4}
-              text={text}
-              truncate={props.truncate}
-          />
+          {renderTitle(text, "pb_form_pill_tag")}
         </>
       )}
-      {(!name && !icon && text) && (
-        <Title
-            className="pb_form_pill_tag"
-            size={4}
-            text={text}
-            truncate={props.truncate}
-        />
-      )}
+      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -143,4 +146,5 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
+
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,7 +13,28 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Names",
+    label: "Truncation Within Typeahead",
     pills: true,
     truncate: 1,
 }) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill with a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Names"
+          label="Truncation Within Typeahead"
           options={names}
           truncate={1}
           {...props}
       />
+      <Caption text="Form Pill Truncation"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            truncate={1}
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show truncation"
+            truncate={1}
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show truncation"
+            truncate={1}
+        />
+      </Card>
     </>
   )
 }

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

@@ -1 +1 @@
-For 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.
+For 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_form_pill/form_pill.html.erb

@@ -1,19 +1,51 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% element_id = "pill_#{object.name.parameterize}" %>
+    <div>
+      <%= pb_rails("title", props: { 
+        classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
+        id: element_id,
+        size: 4, 
+        text: object.name,
+      }) %>
+      <% if object.truncate %>
+        <%= pb_rails("tooltip", props: {
+          position: "top",
+          tooltip_id: "tooltip-#{element_id}",
+          trigger_element_selector: "##{element_id}"
+        }) do %>
+          <%= object.name %>
+        <% end %>
+      <% end %>
+    </div>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-      <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-      <% end %>
-      <% if object.text.present? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+    <% end %>
+    <% element_id = "pill_#{object.text.parameterize}" %>
+    <div>
+      <%= pb_rails("title", props: { 
+        classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
+        id: element_id,
+        size: 4, 
+        text: object.text
+      }) %>
+      <% if object.truncate %>
+        <%= pb_rails("tooltip", props: {
+          position: "top",
+          tooltip_id: "tooltip-#{element_id}",
+          trigger_element_selector: "##{element_id}"
+        }) do %>
+          <%= object.text %>
+        <% end %>
       <% end %>
+    </div>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+
+[class^=pb_link_kit]{
+  @include pb_link($primary);
+  &:hover {
+    color: $text_lt_default;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    border-radius: $border_rad_light;
+    outline: 1px solid $primary;
+    outline-offset: 2px;
+  }
+  &:visited {
+    color: $data_3;
+  }
+  &.dark  {
+    @include pb_link($active_dark);
+    &:hover {
+      color: $text_dk_default;
+    }
+  }
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_link($color_value);
+
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+      
+      &:hover {
+        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  &[class*=_underline] {
+    text-decoration: underline;
+  }
+
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
+  }
+
+}

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+
+type LinkProps = {
+  aria?: {[key: string]: string},
+  className?: string,
+  children?: React.ReactChild[] | React.ReactChild,
+  color?: 'default' | 'body' | 'muted' | 'destructive',
+  dark?: boolean,
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  href?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
+  icon?: string,
+  iconRight?: string,
+  id?: string,
+  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+  underline?: boolean,
+} & GlobalProps
+
+const Link = (props: LinkProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = '',
+    data = {},
+    disabled = false,
+    href= '',
+    htmlOptions = {},
+    icon = '',
+    iconRight = '',
+    id = '',
+    tag = 'a',
+    text = '',
+    underline = false,
+  } = props
+
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
+    globalProps(props),
+    className
+  )
+  const Tag = tag as keyof JSX.IntrinsicElements
+
+  const renderContent = () => (
+    <>
+      {icon && (
+        <Icon
+            fixedWidth
+            icon={icon}
+            marginRight="xxs"
+            size="xs"
+        />
+      )}
+      {text || children}
+      {iconRight && (
+        <Icon
+            fixedWidth
+            icon={iconRight}
+            marginLeft="xxs"
+            size="xs"
+        />
+      )}
+    </>
+  )
+
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
+  if (tag === 'a') {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        {renderContent()}
+      </a>
+    )
+  } else {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        <Tag>{renderContent()}</Tag>
+      </a>
+    )
+  }
+
+}
+
+export default Link

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

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

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

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

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

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

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

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