playbook_ui 13.30.0.pre.alpha.20240515remotebuildkitconversion3150 → 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import FormPill from './_form_pill';
+
+const testId = 'formpill';
+
+test('should render classname', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+});
+
+test('displays text content', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+  
+    const text = screen.getByText("test")
+    expect(text).toBeInTheDocument()
+});
+
+test('displays color variant', () => {
+    render(
+        <FormPill
+            color={"neutral"}
+            data={{ testid: testId }}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+});
+
+test('displays size variant', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            size={"small"}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});

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

@@ -5,7 +5,7 @@ import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -18,6 +18,9 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
+  color?: "primary" | "neutral",
+  data?: {[key: string]: string},
+  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -36,20 +39,26 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
+    color = "primary",
+    data = {},
+    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
+    `pb_form_pill_kit_${color}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
+        tabIndex={tabIndex}
+        {...dataProps}
         {...htmlProps}
     >
         {name &&

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= 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: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,9 +11,13 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[primary neutral],
+                   default: "primary"
+      prop :tabindex
 
       def classname
-        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
       end
 
       def display_text

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:span,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb

@@ -1,6 +1 @@
-<%= pb_rails("icon", props: { icon: "angles-down", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "circle-arrow-right", fixed_width: true }) %>
-<%= pb_rails("icon", props: { icon: "arrow-circle-right", fixed_width: true }) %>
-
-<%= pb_rails("caption", props: { text: "Font Awesome (no alias & not in our Playbook-icons lib)", margin_y: "md" }) %>
-<%= pb_rails("icon", props: { icon: "elephant", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,29 +1,12 @@
 import React from "react"
-
 import Icon from "../_icon"
-import {Caption} from "../.."
 
 const IconDefault = (props) => {
   return (
     <div>
-      <Icon fixedWidth
-          icon='angles-down'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='circle-arrow-right'
-          {...props}
-      />
-      <Icon fixedWidth
-          icon='arrow-circle-right'
-          {...props}
-      />
-      <Caption
-          marginY='md'
-          text='Font Awesome (no alias & not in our Playbook-icons lib)'
-      />
-      <Icon fixedWidth
-          icon='elephant'
+      <Icon
+          fixedWidth
+          icon="user"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -86,33 +86,18 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
+    // replace default trix "block code" button with "inline code" button
     let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
-
-    // set button attributes
-    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    if (!inlineCodeButton) {
+      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+      blockCodeButton.hidden = true
+      // set button attributes
+      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    } 
 
     if (toolbarBottom) editor.element.after(toolbarElement)
 
-    const getCodeFormattingType = (): string => {
-      if (editor.attributeIsActive('code')) return 'block'
-      if (editor.attributeIsActive('inlineCode')) return 'inline'
-
-      const range = editor.getSelectedRange()
-      if (range[0] == range[1]) return 'block'
-
-      const text = editor.getSelectedDocument().toString().trim()
-      return /\n/.test(text) ? 'block' : 'inline'
-    }
-
-    // DOM event listeners
-    element.addEventListener('trix-selection-change', () => {
-      const type = getCodeFormattingType()
-      blockCodeButton.hidden = type == 'inline'
-      inlineCodeButton.hidden = type == 'block'
-    })
-
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),