playbook_ui 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

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

@@ -86,44 +86,44 @@
     }
 
     code {
-      @include preview_code;
+      @include preview_tiptap_code;
     }
 
     pre {
-      @include preview_pre_codeblock;
+      @include preview_tiptap_pre_codeblock;
     }
     a {
-      @include preview_a;
+      @include preview_tiptap_a;
     }
     blockquote {
-      @include preview_blockquote;
+      @include preview_tiptap_blockquote;
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      @include preview_h1;
+      @include preview_tiptap_h1;
     }
     h2 {
-      @include preview_h2;
+      @include preview_tiptap_h2;
     }
     h3 {
-      @include preview_h3;
+      @include preview_tiptap_h3;
     }
     h4,
     h5,
     h6 {
-      @include preview_smaller_headings;
+      @include preview_tiptap_smaller_headings;
     }
     hr {
-      @include preview_hr;
+      @include preview_tiptap_hr;
     }
     ol {
-      @include preview_ol;
+      @include preview_tiptap_ol;
     }
     ul {
-      @include preview_ul;
+      @include preview_tiptap_ul;
     }
   }
 }
@@ -170,40 +170,40 @@
   }
 }
 .tiptap-content {
-  @include preview_first_child;
+  @include preview_tiptap_first_child;
   a {
-    @include preview_a;
+    @include preview_tiptap_a;
   }
   blockquote {
-    @include preview_blockquote;
+    @include preview_tiptap_blockquote;
   }
   h1 {
-    @include preview_h1;
+    @include preview_tiptap_h1;
   }
   h2 {
-    @include preview_h2;
+    @include preview_tiptap_h2;
   }
   h3 {
-    @include preview_h3;
+    @include preview_tiptap_h3;
   }
   h4,
   h5,
   h6 {
-    @include preview_smaller_headings;
+    @include preview_tiptap_smaller_headings;
   }
   hr {
-    @include preview_hr;
+    @include preview_tiptap_hr;
   }
   ol {
-    @include preview_ol;
+    @include preview_tiptap_ol;
   }
   p {
-    @include preview_p;
+    @include preview_tiptap_p;
   }
   pre {
-    @include preview_pre_codeblock;
+    @include preview_tiptap_pre_codeblock;
   }
   ul {
-    @include preview_ul;
+    @include preview_tiptap_ul;
   }
 }

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

@@ -1,3 +1,5 @@
+@import "previewer_mixin";
+
 @charset "UTF-8";
 /*
 Trix 1.3.0
@@ -297,41 +299,31 @@ trix-editor .attachment__metadata {
   trix-editor .attachment__metadata .attachment__size {
     margin-left: 0.2em;
     white-space: nowrap; }
+  trix-editor blockquote {
+    @include preview_trix_blockquote; }
+  trix-editor [dir=rtl] blockquote,
+  trix-editor blockquote[dir=rtl] {
+    @include preview_trix_blockquote }
 @charset "UTF-8";
-.trix-content {
-  line-height: 1.5; }
-  .trix-content * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0; }
+.trix-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  .trix-content#content-preview div {
+    @include preview_trix_div; }
   .trix-content h1 {
-    font-size: 1.2em;
-    line-height: 1.2; }
+    @include preview_trix_h1; }
   .trix-content blockquote {
-    border: 0 solid #ccc;
-    border-left-width: 0.3em;
-    margin-left: 0.3em;
-    padding-left: 0.6em; }
+    @include preview_trix_blockquote; }
   .trix-content [dir=rtl] blockquote,
   .trix-content blockquote[dir=rtl] {
-    border-width: 0;
-    border-right-width: 0.3em;
-    margin-right: 0.3em;
-    padding-right: 0.6em; }
+    @include preview_trix_blockquote; }
   .trix-content li {
-    margin-left: 1em; }
+    @include preview_trix_li; }
   .trix-content [dir=rtl] li {
-    margin-right: 1em; }
+    @include preview_trix_li; }
   .trix-content pre {
-    display: inline-block;
-    width: 100%;
-    vertical-align: top;
-    font-family: monospace;
-    font-size: 0.9em;
-    padding: 0.5em;
-    white-space: pre;
-    background-color: #eee;
-    overflow-x: auto; }
+    @include preview_trix_pre; }
   .trix-content img {
     max-width: 100%;
     height: auto; }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,15 +11,25 @@
 <% end %>
 
 <script>
-  // Button event handler
-  const button = document.getElementById('preview-button');
-  button.addEventListener('click', function() {
-    const content = document.getElementById('content-preview-editor');
-    const previewArea = document.getElementById('content-preview');
-    const cardDiv = document.getElementById('card-obfuscation');
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
-    previewArea.innerHTML = content.value;
-    cardDiv.classList.add('mt_md');
-    cardDiv.style.display = 'block';
-  });
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
 </script>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -63,7 +63,7 @@ test('typeahead with pills', () => {
   )
 
   const kit = screen.getByTestId('pills-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
+  const pill = kit.querySelector(".pb_form_pill_kit_primary")
   expect(pill).toBeInTheDocument()
 })
 
@@ -89,7 +89,7 @@ test('typeahead multi select with badges and small pills', () => {
   )
 
   const kit = screen.getByTestId('small-pill-test')
-  const badge = kit.querySelector(".pb_form_pill_kit_neutral.mr_xs.small")
+  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
   expect(badge).toBeInTheDocument()
 })
 
@@ -107,20 +107,4 @@ test('should pass className prop', () => {
 
   const kit = screen.getByTestId('typeahead-test')
   expect(kit).toHaveClass(className)
-})
-
-test('typeahead with colored pills', () => {
-  render(
-    <Typeahead
-        color="primary"
-        data={{ testid: 'pills-color-test' }}
-        defaultValue={[options[0]]}
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('pills-color-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_primary")
-  expect(pill).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,14 +45,12 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
-  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 export type SelectValueType = {
   label: string,
   value: string,
   imageUrl?: string,
-  pillColor?: string,
 }
 
 type TagOnChangeValues = {
@@ -78,7 +76,6 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
-  color,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -108,7 +105,6 @@ const Typeahead = ({
     onCreateOption: null as null,
     plusIcon: false,
     onMultiValueClick: (_option: SelectValueType): any => undefined,
-    pillColor: color,
     ...props,
   }
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -8,7 +8,6 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  pillColor?: "neutral" | "primary" | "neutral" | "success" | "warning" | "error",
   removeProps: any,
   selectProps: any,
 }
@@ -16,55 +15,48 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
     name: label,
     avatarUrl: '',
-    dark,
   }
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
   return (
     <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
+      className="text_input_multivalue_container"
+      {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
         />
       }
 
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-            avatarUrl={imageUrl}
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name={label}
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text=''
-            {...props}
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
         />
       }
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name=''
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text={label}
-            {...props}
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
         />
       }
     </components.MultiValueContainer>

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

@@ -9,7 +9,6 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
-    - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
     - typeahead_default: Default
@@ -24,4 +23,3 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
-    - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -10,4 +10,3 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
-export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -34,9 +34,6 @@ module Playbook
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
       prop :value
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
-                   default: "neutral"
 
       def classname
         generate_classname("pb_typeahead_kit")
@@ -61,7 +58,6 @@ module Playbook
       def typeahead_react_options
         base_options = {
           className: classname,
-          color: color,
           dark: dark,
           defaultValue: default_options,
           error: error,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -259,7 +259,6 @@ $solar:                 $product_4_background !default; // deprecated
 $roofing:               $product_5_background !default; // deprecated
 $gutters:               $product_6_background !default; // deprecated
 $insulation:            $product_7_background !default; // deprecated
-$accessories:           $product_8_background !default; // added specifically for form_pill product map
 $product_colors: (
   windows:                $windows,
   siding:                 $siding,
@@ -268,7 +267,6 @@ $product_colors: (
   roofing:                $roofing,
   gutters:                $gutters,
   insulation:             $insulation,
-  accessories:            $accessories,
   product_1_background:   $product_1_background,
   product_1_highlight:    $product_1_highlight,
   product_2_background:   $product_2_background,