playbook_ui 16.6.0.pre.alpha.RTEPOC15805 → 16.6.0.pre.alpha.emptystatepresets15848

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dfb690dbbba85b30da33be0eb084cf300f6847ad953e629f73e532555cb4483b
-  data.tar.gz: d6d91db903e58cfa5cfcb33d5807d83d762237a79c5558492b23ed853664a1cc
+  metadata.gz: f403796e53bc3b998e1c127a73fec5be5d4ecdff23f011d4bdf66777e5d8549f
+  data.tar.gz: 27bc94414daabd7e53b42d503e86aaedfbc3edff2332d8a17506d3c8823bd0bd
 SHA512:
-  metadata.gz: 9ed26edb44d0abae16688ce39f747bf506af5733d6097d2c2525f19effd8760fbc7d688550b5ba59aca0d7171a358568bb3f00584084e88cbe820cd86e8a01b6
-  data.tar.gz: 688fc44f6ea83e627637fce0aa191eaba27aef8afded9fb0937a7df448a6b790683d1e383fc1747193f2e9932e6c24fbec6c084c44ceec2b867f8d50bd165f66
+  metadata.gz: 1e215435bd8d6420d587f0db1043b603f272ef79020bee8e3f0abf597daac8473b6d0a9481dfb901a7bb364a56109f975b40f557436d6decba7652db5006b8e4
+  data.tar.gz: 50a69d0bc34bf5fbb44ee650b4158fe1e4dd8b51b84a51243ef7b3a2c428e82ccf0943a399dc2a6b5c50c20480260b4c4b5b79c1bf18a9624fc47e1809eaec64

data/app/pb_kits/playbook/pb_empty_state/__mocks__/assetUrl.ts

@@ -0,0 +1 @@
+export default "https://pb-empty-state.test/mock-asset"

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -12,6 +12,8 @@ import Flex from "../pb_flex/_flex"
 import FlexItem from "../pb_flex/_flex_item"
 import Image from "../pb_image/_image"
 import computer from "./docs/default_image/utils"
+import thisIsFineImageUrl from "./docs/default_image/this_is_fine.svg?url"
+import travoltaLostImageUrl from "./docs/default_image/travolta_lost.gif?url"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -23,6 +25,7 @@ type EmptyStateProps = {
   description?: string,
   header?: string,
   id?: string,
+  /** Built-in illustrations: `default`, `this_is_fine`, `travolta_lost`, or a custom image URL */
   image?: string,
   linkButton?: string,
   onLinkButtonClick?: EventHandler,
@@ -134,6 +137,22 @@ const EmptyState = (props: EmptyStateProps) => {
       return `data:image/svg+xml,${encodedSvg}`
     }
 
+    const resolvePresetImage = (): { alt: string, url: string } | null => {
+      if (!image) return null
+      if (image === "default") {
+        return { alt: "Empty state illustration", url: getSvgAsDataUrl() }
+      }
+      if (image === "this_is_fine") {
+        return { alt: "This is fine illustration", url: thisIsFineImageUrl }
+      }
+      if (image === "travolta_lost") {
+        return { alt: "Confused reaction illustration", url: travoltaLostImageUrl }
+      }
+      return { alt: "Empty state image", url: image }
+    }
+
+    const presetImage = resolvePresetImage()
+
     const layout = (
       <div {...ariaProps}
           {...dataProps}
@@ -148,17 +167,11 @@ const EmptyState = (props: EmptyStateProps) => {
             vertical="center"
         >
 
-          { image && image === 'default' ? (
-            <Image
-                alt="test"
-                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={getSvgAsDataUrl()}
-            />
-          ) : image && image ? (
+          { presetImage ? (
             <Image
-                alt="test"
+                alt={presetImage.alt}
                 htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={image}
+                url={presetImage.url}
             />
           ) : null}
 

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("flex", props: { align: "start", justify: "start", orientation: "column", gap: "xl" }) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "This error was unexpected. Please try again in a moment.",
+    header: "Something went wrong",
+    image: "this_is_fine",
+    primary_button: "Back to home",
+  }) %>
+  <%= pb_rails("empty_state", props: {
+    description: "We could not load this resource. Check the URL or try again later.",
+    header: "We are not sure what happened",
+    image: "travolta_lost",
+    link_button: "Contact support",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
+
+const EmptyStatePresets = (props) => (
+  <Flex align="start"
+      gap="xl"
+      orientation="column"
+  >
+    <EmptyState
+        {...props}
+        description="This error was unexpected. Please try again in a moment."
+        header="Something went wrong"
+        image="this_is_fine"
+        primaryButton="Back to home"
+    />
+    <EmptyState
+        {...props}
+        description="We could not load this resource. Check the URL or try again later."
+        header="We are not sure what happened"
+        image="travolta_lost"
+        linkButton="Contact support"
+    />
+  </Flex>
+)
+
+export default EmptyStatePresets

data/app/pb_kits/playbook/pb_empty_state/docs/default_image/this_is_fine.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" id="This-Is-Fine--Streamline-Memes" height="48" width="48">
+  <desc>
+    This Is Fine Streamline Element: https://streamlinehq.com
+  </desc>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M26.114 37.139c1.314 -0.422 1.896 -0.882 2.638 -2.15" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M11.726 44.394c0 -2.35 0.052 -5.692 0.305 -9.019m11.61 -16.063c1.866 0.475 3.82 1.753 4.843 4.157" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M26.578 32.669c2.365 -1.31 6.05 -2.796 8.844 -2.614m-5.034 13.948c-0.078 -1.642 -0.558 -5.164 -0.789 -6.72 4.062 1.425 9.68 1.069 9.68 -2.758 0 -0.116 0.005 -0.337 0 -0.449" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M27.653 36.382c0.576 0.348 1.237 0.651 1.946 0.9" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M34.17 32.74a3.224 2.638 -11.758 1 0 6.312 -1.314 3.224 2.638 -11.758 1 0 -6.312 1.314" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M23.04 15.784a2.442 2.442 0 0 1 0.7 3.383c-1.22 1.856 -2.515 3.357 -4.302 4.265 -1.793 0.91 -3.746 1.053 -5.9 0.932a2.442 2.442 0 0 1 -2.303 -2.575c0.076 -1.347 1.223 -1.64 2.57 -1.565 1.836 0.103 3.096 0.07 3.75 -0.261 0.66 -0.335 1.83 -1.544 2.879 -3.14 0.74 -1.128 1.479 -1.78 2.606 -1.039Z" clip-rule="evenodd" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m13.938 20.219 -0.234 -3.244a2.712 2.712 0 0 1 1.276 -2.5v0a2.712 2.712 0 0 1 3.212 0.263l2.275 1.986" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M20.388 16.662c-1.114 -0.27 -2.606 -0.078 -4.06 0.617 -1.035 0.494 -1.883 1.163 -2.463 1.881l0.07 0.977c2.046 0.297 3.364 0.077 4.565 -0.914 0.591 -0.575 1.285 -1.414 1.934 -2.4l0.05 -0.076 -0.096 -0.085Z" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M16.563 30.91a3.615 4.69 0 1 0 7.23 0 3.615 4.69 0 1 0 -7.23 0" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M25.161 27.393a3.615 3.908 0 1 0 7.23 0 3.615 3.908 0 1 0 -7.23 0" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M12.744 24.327c-0.696 1.224 -1.644 2.243 -2.558 3.225 -1.676 1.802 -3.237 3.478 -2.908 6.065 0.456 3.596 4.147 3.122 5.753 0.66 1.838 -2.817 2.145 -7.709 0.577 -9.891a27.982 27.982 0 0 1 -0.57 -0.027 2.769 2.769 0 0 1 -0.294 -0.032Z" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M15.732 40.583s-0.488 2.834 0 4.006" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M17.98 40.779c-0.257 1.792 -0.088 2.584 0.488 3.81" stroke-width="1"></path>
+  <path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M3.54 44.274C2.694 43.428 1 39.054 1 35.46c1.407 1.407 2.931 1.563 3.517 1.466 -0.977 -1.433 -2.93 -5.16 -2.93 -8.599 1.563 1.563 3.32 1.953 4.004 1.953C4.29 28 2.172 22.405 4.127 18.262c0 0 1.27 2.639 3.029 3.616C6.765 20.118 14.19 7.71 9.89 3.41c8.109 0 19.835 3.615 21.692 13.874 1.042 -0.488 3.185 -2.052 3.42 -4.397 2.188 3.518 1.888 8.696 1.465 10.846 1.798 -1.173 3.094 -3.55 3.517 -4.592 2.614 3.02 3.953 6.401 2.741 11.567 2.033 -1.172 3.655 -3.91 4.274 -4.528 0.032 3.387 -2.56 14.81 -5.842 18.093" stroke-width="1"></path>
+  <path fill="#000000" fill-rule="evenodd" d="M29.376 26.341a1.432 1.432 0 1 0 0 2.864 1.432 1.432 0 0 0 0 -2.864Z" clip-rule="evenodd" stroke-width="1"></path>
+  <path fill="#000000" fill-rule="evenodd" d="M20.598 29.478a1.432 1.432 0 1 0 0 2.864 1.432 1.432 0 0 0 0 -2.864Z" clip-rule="evenodd" stroke-width="1"></path>
+</svg>

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

@@ -1,12 +1,14 @@
 examples:
   rails:
   - empty_state_default: Default
+  - empty_state_presets: Illustration presets
   - empty_state_size: Size
   - empty_state_orientation: Orientation
   - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default
+  - empty_state_presets: Illustration presets
   - empty_state_size: Size
   - empty_state_orientation: Orientation
   - empty_state_alignment: Alignment

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

@@ -1,4 +1,5 @@
 export { default as EmptyStateDefault } from './_empty_state_default.jsx'
+export { default as EmptyStatePresets } from './_empty_state_presets.jsx'
 export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
 export { default as EmptyStateSize } from './_empty_state_size.jsx'
 export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb

@@ -1,6 +1,8 @@
 <%= pb_content_tag do %>
   <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
-    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
+    <% if resolved_image_url.present? %>
+      <%= pb_rails("image", props: { url: resolved_image_url, alt: image_alt_text, html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
+    <% end %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
       <% if size == "sm" %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "base64"
+
 module Playbook
   module PbEmptyState
     class EmptyState < Playbook::KitBase
@@ -104,6 +106,47 @@ module Playbook
         "data:image/svg+xml,#{encoded}"
       end
 
+      def resolved_image_url
+        case image
+        when "default"
+          default_image_data_uri
+        when "this_is_fine"
+          svg_preset_data_uri("this_is_fine.svg")
+        when "travolta_lost"
+          gif_preset_data_uri("travolta_lost.gif")
+        when nil, ""
+          nil
+        else
+          image
+        end
+      end
+
+      def image_alt_text
+        case image
+        when "this_is_fine"
+          "This is fine illustration"
+        when "travolta_lost"
+          "Confused reaction illustration"
+        when "default"
+          "Empty state illustration"
+        else
+          "Empty state image"
+        end
+      end
+
+      def svg_preset_data_uri(filename)
+        path = File.join(__dir__, "docs", "default_image", filename)
+        svg = File.read(path)
+        "data:image/svg+xml,#{ERB::Util.url_encode(svg)}"
+      end
+
+      def gif_preset_data_uri(filename)
+        path = File.join(__dir__, "docs", "default_image", filename)
+        binary = File.binread(path)
+        b64 = Base64.strict_encode64(binary)
+        "data:image/gif;base64,#{b64}"
+      end
+
       def padding_size
         size == "sm" ? "xs" : "xl"
       end

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

@@ -142,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
-  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions?.id ? `${inputOptions.id}_trix` : undefined))
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
 
   return (
     <div

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

@@ -8,53 +8,38 @@
 @import "../tokens/transition";
 @import "previewer_mixin";
 
-// Rails TipTap root: flex/grid children default to min-width: auto, so the toolbar’s
-// intrinsic width can force horizontal page/dialog scroll. Pin the kit to the parent width.
-[data-pb-rte-tiptap="true"] {
-  box-sizing: border-box;
-  display: block;
-  max-width: 100%;
-  min-width: 0;
-  width: 100%;
-}
-
-.pb_rich_text_editor_kit {
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-
-  &.inline {
-    .toolbar {
-      opacity: 0;
-      transition: all 0.3s ease-in-out 0s;
-    }
-
-    &:focus-within .toolbar {
-      opacity: 100;
-    }
-
-    .ProseMirror {
-      border: 1px solid transparent;
-      transition: all 0.3s ease-in-out 0s;
-    }
-
-    &:focus-within .ProseMirror {
-      border: 1px solid $input_border_default;
-      border-top: none;
-    }
-
-    &:hover {
-      .toolbar {
-        opacity: 100;
-      }
-
-      .ProseMirror {
-        border: 1px solid $input_border_default;
-        border-top: none;
+[class^="pb_rich_text_editor_kit"] {
+    &.inline {
+        .toolbar {
+          opacity: 0;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .toolbar {
+          opacity: 100;
+        }
+    
+        .ProseMirror {
+          border: 1px solid transparent;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .ProseMirror {
+          border: 1px solid $input_border_default;
+          border-top: none;
+        }
+    
+        &:hover {
+          .toolbar {
+            opacity: 100;
+          }
+    
+          .ProseMirror {
+            border: 1px solid $input_border_default;
+            border-top: none;
+          }
+        }
       }
-    }
-  }
-
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -88,76 +73,18 @@
     }
   }
 
-  // Active state for toolbar (Rails kit uses pb_button_kit pb_button_link; override link variant when active)
-  .toolbar button.pb_button_kit.is-active {
-    color: $primary;
-    background-color: $bg_light;
-  }
-
   .pb_rich_text_editor_tiptap_toolbar_sticky {
     position: sticky;
     top: 0;
     z-index: 10;
   }
-
-  .rte-editor-wrap {
-    box-sizing: border-box;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  .pb_rich_text_editor_advanced_container {
-    max-width: 100%;
-    min-width: 0;
-  }
-
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $input_border_default;
     overflow-x: auto;
-    // Single horizontal row + scroll in narrow modals/sidebars (wrap used to stack controls vertically).
     &_block {
-      align-items: center;
-      display: flex;
-      flex-wrap: nowrap;
       gap: $space_xs;
-      min-width: 0;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    // React: keep one horizontal scroll on .toolbar (avoid nested scroll + trailing history cluster).
-    &:not(.rte-rails-toolbar-layout) {
-      > .pb_flex_kit.pb_flex_kit_justify_content_between {
-        box-sizing: border-box;
-        column-gap: $space_sm;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        min-width: 100%;
-        width: max-content;
-      }
-
-      > .pb_flex_kit > .pb_flex_item_kit.toolbar_block {
-        flex: 0 0 auto;
-        min-width: 0;
-        overflow-x: visible;
-      }
-
-      > .pb_flex_kit > .pb_flex_item_kit:last-child {
-        flex: 0 0 auto;
-      }
     }
-
-    // Vertical section separators use ::before/::after with height: 100%. With
-    // align-items: center on .toolbar_block the kit’s cross size was 0, so the
-    // lines disappeared (master only had gap on .toolbar_block, default stretch).
-    .pb_section_separator_kit.pb_section_separator_vertical {
-      align-self: center;
-      flex-shrink: 0;
-      height: $space_xl;
-    }
-
-    // React ToolbarDropdown — match master (fixed width trigger; prod playbook.cloud).
     .editor-dropdown-button {
       background: transparent;
       border: none;
@@ -166,115 +93,23 @@
       font-weight: $light;
       padding: ($space_xs - 1) 0px;
       width: $space_xl * 3;
-
       &:focus-visible {
         box-shadow: unset;
       }
     }
-
-    &.rte-rails-toolbar-layout {
-      max-width: 100%;
-      min-width: 0;
-
-      .rte-rails-toolbar-row {
-        align-items: center;
-        box-sizing: border-box;
-        column-gap: $space_sm;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        min-width: 100%;
-        padding: $space_xxs $space_sm;
-        width: max-content;
-      }
-
-      .rte-toolbar-left {
-        align-items: center;
-        display: flex;
-        flex: 0 0 auto;
-        flex-wrap: nowrap;
-        gap: $space_xs;
-        min-width: 0;
-        overflow-x: visible;
-      }
-
-      .rte-toolbar-right {
-        align-items: center;
-        display: flex;
-        flex: 0 0 auto;
-        gap: $space_xs;
-      }
-
-      // Align dropdown trigger with icon row (React wraps Popover + SectionSeparator in one flex line).
-      .pb_popover_reference_wrapper {
-        align-items: center;
-        display: inline-flex;
-      }
-
-      // Override master’s fixed-width React trigger: Rails block-style label + icons needs flexible width.
-      .editor-dropdown-button {
-        justify-content: flex-start;
-        letter-spacing: normal;
-        line-height: 1;
-        max-width: 100%;
-        min-height: unset;
-        padding: ($space_xs - 1) $space_xs;
-        text-align: left;
-        width: auto;
-
-        .pb_button_content {
-          align-items: center;
-          display: inline-flex;
-          line-height: 1;
-        }
-
-        .pb_button_content > .pb_flex_kit {
-          align-items: center;
-        }
-
-        .rte-block-style-trigger-inner {
-          align-items: center;
-        }
-
-        .rte-block-style-trigger-icon,
-        .rte-block-style-chevron {
-          display: inline-flex;
-          flex-shrink: 0;
-          line-height: 0;
-
-          .pb_icon_kit {
-            align-items: center;
-            display: flex;
-            line-height: 0;
-          }
-
-          svg {
-            display: block;
-          }
-        }
-
-        .rte-block-style-trigger-label {
-          align-items: center;
-          display: inline-flex;
-          line-height: 1.2;
-        }
-
-        &:focus-visible {
-          box-shadow: unset;
-        }
-      }
-    }
   }
 
-  // TipTap content — match master (prod playbook React tab).
   .ProseMirror {
     background: $white;
     border: 1px solid $input_border_default;
     border-radius: $border_rad_heaviest;
     height: 100%;
-    line-height: $lh_loose;
     padding: 1rem 1.5rem 1.5rem 1.5rem;
+    line-height: $lh_loose;
     @include transition_default;
+    :first-child {
+      margin-top: 0;
+    }
 
     h4,
     h5,
@@ -326,32 +161,9 @@
     ul {
       @include preview_tiptap_ul;
     }
-
-    // After heading mixins: first block should not pick up extra top margin (wins over `p { margin-top: 1rem }`).
-    > :first-child {
-      margin-top: 0;
-    }
-  }
-
-  // Toolbar + editor stack: toolbar keeps its border; editor has no top stroke (classic layout).
-  // Avoid relying on a wrapper-only frame — partial deploys then looked “borderless” because
-  // ProseMirror had been forced to border: none.
-  .pb_rich_text_editor_advanced_container.toolbar-active {
-    .ProseMirror {
-      border-top: none;
-      border-top-left-radius: initial;
-      border-top-right-radius: initial;
-    }
   }
 }
 
-// Rails-only: outer kit sets `data-pb-rte-tiptap` — roomier padding + wrapping for vanilla TipTap in forms/dialogs.
-[data-pb-rte-tiptap="true"] .pb_rich_text_editor_kit .ProseMirror {
-  overflow-wrap: anywhere;
-  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
-  word-break: break-word;
-}
-
 .pb_tiptap_toolbar_dropdown_list_item {
   &.is-active,
   &:active {
@@ -376,51 +188,20 @@
     }
   }
 }
-
-// Rails RTE: block-style menu uses Nav (popover) instead of React NavItem class hook.
-.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_item_link.is-active {
-  background-color: $bg_light;
-  border-radius: unset !important;
-  color: $primary;
-
-  .pb_nav_list_item_text,
-  .pb_nav_list_item_icon_left {
-    color: $primary !important;
-  }
-}
-
-.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_kit_item:hover .pb_nav_list_item_link:not(.is-active) {
-  background-color: $neutral_subtle;
-  border-radius: unset !important;
-
-  .pb_nav_list_item_text,
-  .pb_nav_list_item_icon_left {
-    background-color: unset;
-    color: $text_lt_light !important;
-  }
-}
-
-// No toolbar: ring the whole control.
-.pb_rich_text_editor_advanced_container:not(.toolbar-active) {
+.pb_rich_text_editor_advanced_container {
   transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   &:focus-visible,
   &:focus-within {
-    border-radius: $border_rad_heaviest;
-    box-shadow: 0 0 0 1px $input_border_state;
     outline: unset;
+    box-shadow: 0 0 0 1px $input_border_state;
+    border-radius: $border_rad_heaviest;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
-}
-
-// Toolbar + editor: use border color (not an outer box-shadow) so the bottom isn’t doubled.
-.pb_rich_text_editor_advanced_container.toolbar-active {
-  &:focus-within {
-    .toolbar {
-      border-color: $input_border_state;
-    }
-
-    .ProseMirror {
-      border-color: $input_border_state;
+  &.toolbar-active {
+    .ProseMirror { 
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
     }
   }
 }

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

@@ -1,8 +1,6 @@
 examples:
 
   rails:
-  - rich_text_editor_rails_default: "Rails (TipTap)"
-  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default