playbook_ui 14.5.0.pre.alpha.javascriptassets3939 → 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2ca4e8e8c3df9cdee7d02f68c3a611611053345876eb602efcdb91a16b4b076
-  data.tar.gz: fb337ad2f116c3f991969c8e59c06ba697828ae5af32cde1c01cb49bf06b6ee6
+  metadata.gz: 1c9d08fec85ee5acbc34292a8fe9c2554c5e77a0da8e39d8aa8c901d7e911c05
+  data.tar.gz: 91c6c9fa38bfcd8910cabf5df1742689a327464084f5692b722f33d3576af112
 SHA512:
-  metadata.gz: c833f8f4d32140a79a374f9d2b2b642fff7341defb6fc781122288238ba851c62281797eb4307ad9859c3a5004fd756c37e25dea8aa73434ac0dc6952b345fe9
-  data.tar.gz: 468fdf29ec022656bedceb21a0f7e165aee5de1d469ebd541e09a0587a642f91dbee263fe8c7932b5cd06fa9cac6f73efd4852edeab71757d93f1ffd561638f2
+  metadata.gz: c0d2bfbd37af33531f7638d2f1e7e72ebe1f0bcedb5ec8f0b7df81431110a14754ed7c4d73ee19a3bb0f500e40f9e83be46ea6bf9e82d9fe186e4fca9a9818b0
+  data.tar.gz: c617f6acf17b65fbed0633c84baa9fbc240bc549d30633aa89b004734137a48632a47300e64b7d5660d4b71b86e05d68ae5cac13bc00f8de47e59ece1c655567

data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts}

@@ -1,34 +1,47 @@
+// eslint-disable-next-line
+// @ts-nocheck
+import PbEnhancedElement from "./index"
+
 export default class ElementObserver {
-  constructor(matchDelegate, target = document) {
+  matchDelegate: PbEnhancedElement
+  target: Document
+  _mutationObserver: MutationObserver
+
+  constructor(matchDelegate: PbEnhancedElement, target = document) {
     this.matchDelegate = matchDelegate
     this.target = target
   }
 
-  start() {
+  get mutationObserver(): MutationObserver {
+    return this._mutationObserver =
+      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
+  }
+
+  start(): void {
     this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
     this.catchup()
   }
 
-  stop() {
+  stop(): void {
     this.mutationObserverdisconnect()
   }
 
-  catchup() {
-    this.handleAdditions(this.matchDelegate.matches(this.target))
+  catchup(): void {
+    this.handleAdditions(this.matchDelegate.matches(this.target as unknown as Element))
   }
 
-  processMutationList(mutationList) {
+  processMutationList(mutationList: Array<MutationRecord>): void {
     for (const mutation of mutationList) {
       if (mutation.type == 'attributes') {
-        this.processAttributeChange(mutation.target)
+        this.processAttributeChange(mutation.target as Element)
       } else if (mutation.type == 'childList') {
-        this.processRemovedNodes(Array.from(mutation.removedNodes))
-        this.processAddedNodes(Array.from(mutation.addedNodes))
+        this.processRemovedNodes(Array.from(mutation.removedNodes) as Array<Element>)
+        this.processAddedNodes(Array.from(mutation.addedNodes) as Array<Element>)
       }
     }
   }
 
-  processAttributeChange(node) {
+  processAttributeChange(node: Element): void | Array<Element> {
     if (node.nodeType !== Node.ELEMENT_NODE) return
 
     const matches = this.matchDelegate.matches(node)
@@ -38,30 +51,25 @@ export default class ElementObserver {
     this.handleAdditions(matches)
   }
 
-  processRemovedNodes(nodes) {
+  processRemovedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleRemovals(this.matchDelegate.matches(node))
     }
   }
 
-  processAddedNodes(nodes) {
+  processAddedNodes(nodes: Array<Element>): void {
     for (const node of nodes) {
       if (node.nodeType !== Node.ELEMENT_NODE) continue
       this.handleAdditions(this.matchDelegate.matches(node))
     }
   }
 
-  handleRemovals(elements) {
+  handleRemovals(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.removeMatch(element)
   }
 
-  handleAdditions(elements) {
+  handleAdditions(elements: Array<Element>): void {
     for (const element of elements) this.matchDelegate.addMatch(element)
   }
-
-  get mutationObserver() {
-    return this._mutationObserver =
-      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
-  }
 }

data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts}

@@ -1,21 +1,31 @@
-import ElementObserver from './element_observer.js'
+// eslint-disable-next-line
+// @ts-nocheck
+import ElementObserver from './element_observer'
 
 export default class PbEnhancedElement {
-  static get elements() {
+  static _elements: Map<Element, PbEnhancedElement>
+  static _observer: ElementObserver
+  element: Element
+
+  constructor(element?: Element) {
+    this.element = element
+  }
+
+  static get elements(): Map<Element, PbEnhancedElement> {
     return this._elements = (this._elements || new Map)
   }
 
-  static get observer() {
+  static get observer(): ElementObserver {
     return this._observer = (this._observer || new ElementObserver(this))
   }
 
-  static get selector() {
+  static get selector(): string {
     // eslint-disable-next-line no-console
     console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
     return null
   }
 
-  static matches(node) {
+  static matches(node: Element): Array<Element> {
     if (!this.selector) return []
 
     const matches = []
@@ -25,7 +35,7 @@ export default class PbEnhancedElement {
     return (matches)
   }
 
-  static addMatch(element) {
+  static addMatch(element: Element): void {
     if (element._pbEnhanced || this.elements.has(element)) return
 
     const enhansedElement = new this(element)
@@ -34,7 +44,7 @@ export default class PbEnhancedElement {
     element._pbEnhanced = enhansedElement
   }
 
-  static removeMatch(element) {
+  static removeMatch(element: Element): void {
     if (!this.elements.has(element)) return
 
     const enhansedElement = this.elements.get(element)
@@ -42,22 +52,19 @@ export default class PbEnhancedElement {
     this.elements.delete(element)
   }
 
-  static start() {
+  static start(): void {
     this.observer.start()
   }
 
-  static stop() {
+  static stop(): void {
     this.mutationObserver.stop()
   }
 
-  constructor(element) {
-    this.element = element
-  }
-
-  connect() {
+  connect(): void {
     // eslint-disable-next-line no-console
     console.warn('Redefine the connect function in a subclass.', this)
   }
 
-  disconnect() { }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  disconnect(): void {}
 }

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

@@ -47,9 +47,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+
+  const filteredProps: FormPillProps = {...props}
+  delete filteredProps.truncate
+
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(props),
+    globalProps(filteredProps),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -77,6 +81,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -92,6 +97,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
+              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -111,6 +117,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
+              truncate={props.truncate}
           />
         </>
       )}
@@ -119,6 +126,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
+            truncate={props.truncate}
         />
       )}
       <div

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

@@ -0,0 +1,19 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Names",
+    pills: true,
+    truncate: 1,
+}) %>

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Names"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default FormPillTruncatedText

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

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

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -11,6 +12,7 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
+  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,3 +4,4 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
+export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'