playbook_ui 15.6.0 → 15.7.0.pre.alpha.PLAY2678emojimask13284

data/app/pb_kits/playbook/pb_textarea/index.ts

@@ -1,19 +1,76 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+import { stripEmojisForPaste, applyEmojiMask } from '../utilities/emojiMask'
 
 export default class PbTextarea extends PbEnhancedElement {
   style: {[key: string]: string}
   scrollHeight: string
+  private skipNextEmojiFilter = false
+  
   static get selector(): string {
-    return '.resize_auto textarea'
+    return '.resize_auto textarea, [data-pb-emoji-mask="true"]'
+  }
+
+  hasEmojiMask(): boolean {
+    return (this.element as HTMLElement).dataset.pbEmojiMask === "true"
   }
 
   onInput(): void {
-    this.style.height = 'auto'
-    this.style.height = (this.scrollHeight) + 'px'
+    if ((this.element as HTMLElement).closest('.resize_auto')) {
+      this.style.height = 'auto'
+      this.style.height = (this.scrollHeight) + 'px'
+    }
+  }
+
+  handleEmojiInput = (): void => {
+    if (!this.hasEmojiMask()) return
+    
+    if (this.skipNextEmojiFilter) {
+      this.skipNextEmojiFilter = false
+      return
+    }
+
+    applyEmojiMask(this.element as HTMLTextAreaElement)
+  }
+
+  handleEmojiPaste = (event: ClipboardEvent): void => {
+    if (!this.hasEmojiMask()) return
+
+    const pastedText = event.clipboardData?.getData('text') || ''
+    const filteredText = stripEmojisForPaste(pastedText)
+
+    if (pastedText !== filteredText) {
+      event.preventDefault()
+      const textarea = this.element as HTMLTextAreaElement
+      const start = textarea.selectionStart || 0
+      const end = textarea.selectionEnd || 0
+      const currentValue = textarea.value
+      const newValue = currentValue.slice(0, start) + filteredText + currentValue.slice(end)
+      const newCursor = start + filteredText.length
+      
+      textarea.value = newValue
+      textarea.selectionStart = textarea.selectionEnd = newCursor
+      
+      this.skipNextEmojiFilter = true
+      
+      textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    }
   }
 
   connect(): void {
-    this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
-    this.element.addEventListener('input', this.onInput, false)
+    if ((this.element as HTMLElement).closest('.resize_auto')) {
+      this.element.setAttribute('style', 'height:' + (this.element as HTMLTextAreaElement).scrollHeight + 'px;overflow-y:hidden;')
+      this.element.addEventListener('input', this.onInput, false)
+    }
+    
+    if (this.hasEmojiMask()) {
+      this.element.addEventListener('input', this.handleEmojiInput, false)
+      this.element.addEventListener('paste', this.handleEmojiPaste as EventListener, false)
+    }
+  }
+
+  disconnect(): void {
+    this.element.removeEventListener('input', this.onInput, false)
+    this.element.removeEventListener('input', this.handleEmojiInput, false)
+    this.element.removeEventListener('paste', this.handleEmojiPaste as EventListener, false)
   }
 }

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -11,6 +11,7 @@
     <%= text_area(
         :object,
         :method,
+        :data => object.textarea_options[:data],
         :max_characters => object.max_characters,
         :name => object.name,
         :onkeyup => object.onkeyup,

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbTextarea
     class Textarea < Playbook::KitBase
+      prop :emoji_mask, type: Playbook::Props::Boolean,
+                        default: false
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -28,6 +30,12 @@ module Playbook
         max_characters && character_count ? "#{character_count} / #{max_characters}" : character_count
       end
 
+      def textarea_options
+        {
+          data: emoji_mask ? { pb_emoji_mask: true } : {},
+        }
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -1,5 +1,5 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React, { useState } from "react"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import Textarea from "./_textarea"
 
@@ -211,3 +211,58 @@ describe("TextArea Kit Props", () => {
     expect(textarea.required).toBeTruthy()
   })
 })
+
+describe("Textarea Emoji Mask", () => {
+  const TextareaEmojiMask = (props) => {
+    const [value, setValue] = useState('')
+    const handleOnChange = ({ target }) => {
+      setValue(target.value)
+    }
+
+    return (
+      <Textarea
+          emojiMask
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    )
+  }
+
+  test("removes emoji characters when emojiMask is enabled", () => {
+    render(
+      <TextareaEmojiMask
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    fireEvent.change(textarea, { target: { value: 'Hello 👋 World 🌍' } })
+    expect(textarea.value).toBe('Hello  World ')
+
+    fireEvent.change(textarea, { target: { value: '😀😂🎉' } })
+    expect(textarea.value).toBe('')
+
+    fireEvent.change(textarea, { target: { value: 'Hello World' } })
+    expect(textarea.value).toBe('Hello World')
+  })
+
+  test("allows accented characters when emojiMask is enabled", () => {
+    render(
+      <TextareaEmojiMask
+          data={{ testid: testId }}
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const textarea = kit.querySelector("textarea")
+
+    fireEvent.change(textarea, { target: { value: 'Café résumé naïve' } })
+    expect(textarea.value).toBe('Café résumé naïve')
+
+    fireEvent.change(textarea, { target: { value: 'àëǒüñ' } })
+    expect(textarea.value).toBe('àëǒüñ')
+  })
+})

data/app/pb_kits/playbook/pb_time_picker/_time_picker.scss

@@ -0,0 +1,296 @@
+@import "../tokens/typography";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+@import "../tokens/positioning";
+@import "../pb_body/body_mixins";
+
+.pb_time_picker {
+  > label {
+    cursor: pointer;
+    display: block;
+  }
+
+  .time_picker_wrapper {
+    position: relative;
+  }
+
+  .text_input_wrapper_add_on .add-on-card {
+    transition: background-color 0.3s ease-in-out 0s;
+    border-color: $border_light;
+  }
+
+  .text_input_wrapper_add_on:focus-within .add-on-card {
+    transition: background-color 0.3s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
+    border-color: $primary;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .text_input_wrapper_add_on .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light, $opacity_5);
+      }
+    }
+  }
+
+  .text_input_wrapper_add_on .add-on-right .text_input {
+    cursor: pointer;
+  }
+
+  &.error {
+    .text_input_wrapper_add_on .add-on-card {
+      border-color: $error;
+    }
+    
+    .text_input_wrapper_add_on:focus-within .add-on-card {
+      transition: background-color 0.3s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
+      border-color: $error;
+    }
+  }
+
+  &.disabled {
+    > label {
+      cursor: not-allowed;
+    }
+
+    .text_input_wrapper_add_on .add-on-card {
+      background-color: shade($white, 5%);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .text_input_wrapper_add_on .add-on-right .text_input {
+      cursor: not-allowed;
+    }
+
+  }
+
+  .pb_time_picker_container {
+    position: absolute;
+    top: 100%;
+    background-color: $white;
+    overflow: visible;
+    box-shadow: $shadow_deep;
+    border-radius: $border_rad_heavier;
+    border: 1px solid $border_light;
+    margin-top: $space_xxs;
+    z-index: $z_1;
+    width: 314.2px;
+
+    &.pb_time_picker_container_24hour {
+      width: 170.4px;
+    }
+
+    .pb_time_selection {
+      color: inherit;
+      text-align: left;
+      margin: $space_sm;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .time_input_wrapper {
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        > label {
+          margin-bottom: $space_xxs;
+          cursor: pointer;
+        }
+
+        input.time_input {
+          border: 1px solid $border_light;
+          border-radius: $border_radius_md;
+          text-align: center;
+          width: 60px;
+          margin-left: 0;
+          padding: $space_xs;
+          height: 45px;
+          font-size: 14px;
+          font-weight: $bolder;
+          background-color: $white;
+          cursor: pointer;
+          transition: border-color 0.2s ease, background-color 0.2s ease;
+          color: $text_lt_default;
+
+          appearance: textfield;
+          -moz-appearance: textfield;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            appearance: none;
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          &:focus {
+            border-color: $primary;
+            outline: none;
+          }
+
+          &:hover {
+            background-color: $focus_input_light;
+          }
+
+          &.invalid {
+            border-color: $error;
+            background-color: rgba($error, 0.05);
+          }
+        }
+
+        // Time Selection Dropdowns
+        .time_dropdown {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          background-color: $white;
+          border: 1px solid $border_light;
+          border-radius: $border_rad_heavier;
+          box-shadow: $shadow_deep;
+          margin-top: $space_xxs;
+          max-height: 200px;
+          overflow-y: auto;
+          overflow-x: hidden;
+          z-index: $z_1;
+          width: 60px;
+
+          // Firefox Scrollbar Styles
+          scrollbar-width: thin;
+          scrollbar-color: rgba($text_lt_lighter, 0.5) transparent;
+
+          // Chrome/Safari/Edge (WebKit) Scrollbar Styles
+          &::-webkit-scrollbar {
+            width: 6px;
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba($text_lt_lighter, 0.5);
+            border-radius: 3px;
+            
+            &:hover {
+              background-color: rgba($text_lt_lighter, 0.7);
+            }
+          }
+
+          .time_dropdown_option {
+            @include pb_body;
+            padding: $space_xs $space_sm;
+            text-align: center;
+            cursor: pointer;
+            transition: background-color 0.15s ease;
+            white-space: nowrap;
+
+            &:hover {
+              background-color: $bg_light;
+            }
+
+            &.selected {
+              background-color: $primary;
+              color: $white;
+
+              &:hover {
+                background-color: $product_1_background;
+              }
+            }
+          }
+        }
+      }
+
+      .time_range_error {
+        width: 100%;
+        flex-basis: 100%;
+        .time_range_error_text {
+          color: $error;
+        }
+      }
+      .pb_caption_kit_xs {
+        clear: both;
+        display: block;
+        width: 100%;
+        flex-basis: 100%;
+      }
+      .time-separator {
+        padding: 20px 6px 0 6px;
+        font-size: 14px;
+        font-weight: $bolder;
+      }
+      .meridiem {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: $space_md;
+        
+        > .time_input_label {
+          margin-bottom: $space_xxs;
+        }
+        
+        .pb_form_group_kit {
+          margin-left: 0;
+          display: flex;
+          gap: 0;
+        }
+
+        .datePicker-AMPM {
+          display: none;
+        }
+        &:focus, &:hover {
+          background: transparent;
+        }
+
+        // Override SelectableCard's display:none to make radio inputs keyboard accessible using visually-hidden pattern to keep inputs focusable but not visible
+        .pb_selectable_card_kit_enabled,
+        .pb_selectable_card_kit_checked_enabled,
+        .pb_selectable_card_kit_disabled,
+        .pb_selectable_card_kit_checked_disabled {
+          > input[type="radio"] {
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+          }
+
+          > input[type="radio"]:focus + label {
+            border-color: $primary;
+          }
+        }
+
+        .pb_selectable_card_kit_enabled > label,
+        .pb_selectable_card_kit_checked_enabled > label,
+        .pb_selectable_card_kit_disabled > label,
+        .pb_selectable_card_kit_checked_disabled > label {
+          padding: 0;
+          margin: 0;
+          width: 60px;
+          height: 45px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: $bolder;
+        }
+
+        .disabled_meridiem > label,
+        .pb_selectable_card_kit_disabled > label,
+        .pb_selectable_card_kit_checked_disabled > label {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background-color: $bg_light;
+          &:hover {
+            background-color: $bg_light;
+          }
+        }
+      }
+    }
+  }
+}