playbook_ui 15.7.0.pre.alpha.PLAY2678emojimask13284 → 15.7.0.pre.alpha.play2607setheightofeditor13370

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5671bd3842cbc616980cca133af25a4d32013d8bcf16c2472d5e5cda9d122943
-  data.tar.gz: 0c2ce0cd5554eb290beb880f6ad0ce84207c40ceaa428b947c6b9566947388ba
+  metadata.gz: f960f22bca9b3635502362441b26a13583eb183fcdebab46ebbca3f5b2b64d33
+  data.tar.gz: 37dd6c333df8bc2149be578ef208c32fea70e3ebdec053a8ab180ec5bf56e1d7
 SHA512:
-  metadata.gz: 769539b8947c986ca86ad41720be93617da036d335de3ffe9945afe26fcb05bc543d420124486ed2825b85e46ad83bb183ac922a9cbc3f70a1f318f987a5c53b
-  data.tar.gz: af02627b473d11689bf92429bf6bfe6dd7a11bfc443f641c48749ef56faeb0358f12779049e6b72ccb8b6486cca3a211ed7572113cbf65751dc2b9e96a4a7a79
+  metadata.gz: 694f79e8ddf8ab1bd308e0d0f85faacbd856f66dfbb52f728074ff1721d673b0d4d32513c0aa5dd4c05f652aeb73d1ae4f5c77258fedbdb26b17f80fdcbf1e3d
+  data.tar.gz: b8cb5e6390f7a57b562a29dfa341ec33860bdee17c24df89ead92d06d01ae82bf9283600c0d0f4aedcf9b6dafc1b0cddb2eebd4bebdf5118b4fd10a356e65004

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

@@ -30,10 +30,6 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
-      def auto_close_class
-        auto_close.present? ? " auto_close_#{auto_close}" : ""
-      end
-
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -42,6 +38,14 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
+      def auto_close_attribute
+        auto_close.present? ? { "pb-auto-close": auto_close } : {}
+      end
+
+      def data
+        Hash(prop(:data)).merge(auto_close_attribute)
+      end
+
       def icon_value
         icon || case status
                 when "success"
@@ -61,9 +65,7 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
       end
     end
   end

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

@@ -21,17 +21,12 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const classListValues = element.classList.value
-    const hasAutoCloseClass = classListValues.includes('auto_close')
-
-    if (hasAutoCloseClass) {
-      const classList = classListValues.split(' ')
-      const autoCloseValue = classList[classList.length - 1].split('_')[2]
-      const autoCloseIntValue = parseInt(autoCloseValue)
+    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
 
+    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, autoCloseIntValue)
+      }, parseInt(autoCloseDataAttr))
     }
   }
 }

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

@@ -90,7 +90,7 @@
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
-  <%= form.text_field :example_text_field, props: { label: "emoji mask demo text input", emoji_mask: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -98,7 +98,7 @@
   <%= form.search_field :example_search_field, props: { label: true } %>
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
-  <%= form.text_area :example_text_area, props: { label: "emoji mask demo textarea", emoji_mask: true } %>
+  <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ import Flex from "../../pb_flex/_flex";
 import FlexItem from "../../pb_flex/_flex_item";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
 
-import  EditorButton  from "./EditorButton";
+import EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

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

@@ -44,6 +44,8 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
+  inputHeight?: "sm" | "md" | "lg",
+  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,6 +70,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -214,9 +218,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
-              })}
+              className={classnames(
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -205,6 +205,59 @@
     }
   }
 }
+
+.pb_rich_text_editor_advanced_container.input_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      height: 131px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_md {
+  div {
+    .tiptap.ProseMirror {
+      height: 180px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      height: 230px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 131px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_md {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 180px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 230px;
+    }
+  }
+}
+
+
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedHeight = (props) => {
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+      <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor}
+          inputHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+      <br />
+
+      <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedHeight

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md

@@ -0,0 +1 @@
+Use the `inputHeight` prop to keep the text area a specific height. If the text exceeds the text area, it will automatically add a scrollbar to maintain the fixed height.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_heigh.md

@@ -0,0 +1 @@
+Use the inputMinHeight prop to render the text area with a minimum height. If the text exceeds the text area, the text area will grow to accommodate it.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedMinHeight = (props) => {
+
+  const editor1 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+    <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor1}
+          inputMinHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor1} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputMinHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputMinHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedMinHeight

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

@@ -29,5 +29,7 @@ examples:
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
+  - rich_text_editor_advanced_height: Advanced Height
+  - rich_text_editor_advanced_min_height: Advanced Min Height
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -16,4 +16,6 @@ export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_adva
 export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
 export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
 export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
+export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'