playbook_ui 13.30.0 → 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -8,16 +8,22 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
+const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
     return DROPDOWN_SELECTOR;
   }
 
+  get target() {
+    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+  }
+
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.bindEventListeners();
     this.updateArrowDisplay(false);
+    this.handleFormValidation();
   }
 
   bindEventListeners() {
@@ -38,9 +44,13 @@ export default class PbDropdown extends PbEnhancedElement {
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
     const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
+      inputFormValidation.value = JSON.parse(value).id;
+      this.clearFormValidation(inputFormValidation);
       this.onOptionSelected(value, option);
     }
   }
@@ -103,10 +113,6 @@ export default class PbDropdown extends PbEnhancedElement {
     selectedOption.classList.add("pb_dropdown_option_selected");
   }
 
-  get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-  }
-
   showElement(elem) {
     elem.classList.remove("close");
     elem.classList.add("open");
@@ -150,4 +156,27 @@ export default class PbDropdown extends PbEnhancedElement {
       upArrow.style.display = isOpen ? "inline-block" : "none";
     }
   }
+
+  handleFormValidation() {
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+
+    inputFormValidation.addEventListener("invalid", function (event) {
+      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
+        event.preventDefault();
+        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
+      }
+    }, true);
+  }
+
+  clearFormValidation(input) {
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -23,6 +23,7 @@ type FixedConfirmationToastProps = {
   data?: string;
   horizontal?: "right" | "left" | "center";
   htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  icon?: string,
   id?: string;
   multiLine?: boolean;
   onClose?: VoidCallback;
@@ -41,6 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     closeable = false,
     horizontal,
     htmlOptions = {},
+    icon,
     multiLine = false,
     onClose = () => undefined,
     open = true,
@@ -48,14 +50,18 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     text,
     vertical,
   } = props;
+
+  const returnedIcon = icon || iconMap[status]
+  const iconClass = icon ? "custom_icon" : ""
+
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     { _multi_line: multiLine },
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    `${iconClass}`,
     globalProps(props),
     className
   );
-  const icon = iconMap[status];
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
@@ -86,11 +92,11 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {icon && (
+          {returnedIcon && (
             <Icon
                 className="pb_icon"
                 fixedWidth
-                icon={icon}
+                icon={returnedIcon}
             />
           )}
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb

@@ -0,0 +1,32 @@
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "wrench",
+    text: "Fix before proceeding",
+    status: "error",
+    closeable: true,
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "star",
+    text: "Thank you for completing the form!",
+    status: "success",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "file-pdf",
+    text: "Saved as PDF",
+    status: "neutral",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "arrow-down",
+    text: "New Messages",
+    status: "tip"
+  })%>
+</div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastCustomIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="wrench"
+            marginBottom="md"
+            status="error"
+            text="Fix before proceeding"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="star"
+            marginBottom="md"
+            status="success"
+            text="Thank you for completing the form!"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="file-pdf"
+            marginBottom="md"
+            status="neutral"
+            text="Saved as PDF"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="arrow-down"
+            status="tip"
+            text="New Messages"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastCustomIcon

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

@@ -6,6 +6,7 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -14,6 +15,7 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_to
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
+export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -20,6 +20,7 @@ module Playbook
                       values: [nil, "top", "bottom"],
                       default: nil
       prop :auto_close, type: Playbook::Props::Number
+      prop :icon, type: Playbook::Props::String
 
       def show_text?
         text.present?
@@ -42,20 +43,24 @@ module Playbook
       end
 
       def icon_value
-        case status
-        when "success"
-          "check"
-        when "error"
-          "exclamation-triangle"
-        when "neutral"
-          "info-circle"
-        when "tip"
-          "info-circle"
-        end
+        icon || case status
+                when "success"
+                  "check"
+                when "error"
+                  "exclamation-triangle"
+                when "neutral"
+                  "info-circle"
+                when "tip"
+                  "info-circle"
+                end
+      end
+
+      def icon_class
+        icon.present? ? " custom_icon" : ""
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, waitFor } from '../utilities/test-utils'
+
+import { FixedConfirmationToast } from '../'
+
+beforeEach(() => {
+    // Silences error logs within the test suite.
+    jest.spyOn(console, 'error')
+    // eslint-disable-next-line
+    console.error.mockImplementation(() => {})
+})
+  
+afterEach(() => {
+    // eslint-disable-next-line
+    console.error.mockRestore()
+})
+
+test('renders with default props', () => {
+    const { container } = render(<FixedConfirmationToast />);
+    expect(container.firstChild).toBeInTheDocument();
+});
+
+test('renders with text', () => {
+    const { getByText } = render(<FixedConfirmationToast text="Message Text" />);
+    expect(getByText('Message Text')).toBeInTheDocument();
+});
+
+test('does not render if open prop is false', () => {
+    const { container } = render(<FixedConfirmationToast open={false} />);
+    expect(container.firstChild).toBeNull();
+});
+
+test('closes after autoClose duration', async () => {
+    jest.useFakeTimers();
+    const onCloseMock = jest.fn();
+    render(
+        <FixedConfirmationToast 
+            autoClose={1000} 
+            onClose={onCloseMock}
+            open
+        />
+    );
+    
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+});
+
+test('renders success status with icon', () => {
+    const { container } = render(<FixedConfirmationToast status="success" />);
+    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_success')).toBeInTheDocument();
+    expect(container.querySelector('.pb_icon')).toBeInTheDocument();
+});
+  
+test('renders custom icon when provided', () => {
+    const { container } = render(<FixedConfirmationToast icon="wrench" />);
+    expect(container.querySelector('.custom_icon')).toBeInTheDocument();
+});
+
+test('renders correctly with multiLine prop', () => {
+    const { container } = render(<FixedConfirmationToast multiLine />);
+    expect(container.querySelector('._multi_line')).toBeInTheDocument();
+});
+
+test('renders position when provided', () => {
+    const { container } = render(
+        <FixedConfirmationToast 
+            horizontal="right"
+            vertical="bottom" 
+        />
+    );
+    expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,6 +13,14 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
@@ -22,6 +30,7 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>

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

@@ -8,6 +8,7 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
 );
 
 
@@ -23,34 +24,71 @@ $form_pill_colors: (
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: rgba($color_value, $opacity-1);
+      background-color: mix($color_value, $card_light, 10%);
+      @if ($color_name == "neutral") {
+        background-color: $white;
+        border: 1px solid $border_light;
+      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: rgba($color_value, $opacity-2);
+          background-color: mix($color_value, $card_light, 20%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 20%);
+            border: 1px solid $border_light;
+          }
+        }
+        &:active {
+          background-color: mix($color_value, $card_light, 30%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 30%);
+          }
         }
       }
       #{$selector}_text {
         color: $color_value;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         padding-left: $space-sm;
-        padding-right: $space-sm/4;
+        padding-right: $space-sm/2;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/2;
+        padding-left: $space-sm/4;
         padding-right: $space-sm/4;
         display: flex;
         align-items: center;
-        height: 100%;
+        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
+        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
+        height: 27px;
+        border-radius: 70px;
         cursor: pointer;
+        &:hover {
+          background-color: mix($color_value, $card_light, 40%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 60%);
+          }
+        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
       }
     }
   }
+  &:focus {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
+  &:focus-visible {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -70,6 +108,71 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &.dark {
+    @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
+      // Primary and Neutral are exceptions to the general rule in the handoff 
+      &[class*=_#{$color_name}]  {
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_tag {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
+        @if ($color_name == "neutral") {
+          background-color: transparent;
+          border: 1px solid $border_dark;
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $text_dk_default;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_default;
+            &:hover {
+              background-color: mix($neutral, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($white, $card_dark, 10%);
+          }
+          &:active {
+            background-color: mix($white, $card_dark, 20%);
+          }
+          &:focus {
+            border: 1px solid $primary;
+          }
+        }
+        @if ($color_name == "primary") {
+          background-color: mix($active_dark, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $active_dark;
+          }
+          .pb_form_pill_close {
+            color: $active_dark;
+            &:hover {
+              background-color: mix($active_dark, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($active_dark, $card_dark, 20px);
+          }
+          &:active {
+            background-color: mix($active_dark, $card_dark, 30%);
+          }
+        }
+      }
+    }
+  }
+
   &[class*=lowercase] {
     text-transform: lowercase;
   }

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>