feat(richtext-lexical)!: improve floating select menu Dropdown classN…

…ames (#4444) Breaking: Dropdown component has a new mandatory sectionKey prop
payloadcms · Dec 11, 2023 · 9331204 · 9331204
1 parent 9babf68
commit 9331204
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/...text-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/DropDown.tsx b/...text-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/DropDown.tsx
@@ -277,7 +277,7 @@ export function DropDown({
         type="button"
       >
         <Icon />
-        <i className={`${buttonClassName}-caret`} />
+        <i className="floating-select-toolbar-popup__dropdown-caret" />
       </button>
 
       {showDropDown &&

diff --git a/...ichtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.tsx b/...ichtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/index.tsx
@@ -67,18 +67,23 @@ export const ToolbarDropdown = ({
   classNames,
   editor,
   entries,
+  sectionKey,
 }: {
   Icon?: React.FC
   anchorElem: HTMLElement
   classNames?: string[]
   editor: LexicalEditor
   entries: FloatingToolbarSectionEntry[]
+  sectionKey: string
 }) => {
   return (
     <DropDown
       Icon={Icon}
-      buttonAriaLabel="Formatting options"
-      buttonClassName={[baseClass, ...(classNames || [])].filter(Boolean).join(' ')}
+      buttonAriaLabel={`${sectionKey} dropdown`}
+      buttonClassName={[baseClass, `${baseClass}-${sectionKey}`, ...(classNames || [])]
+        .filter(Boolean)
+        .join(' ')}
+      key={sectionKey}
     >
       {entries.length &&
         entries.map((entry) => {

diff --git a/packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx b/packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx
@@ -110,10 +110,16 @@ function ToolbarSection({
               anchorElem={anchorElem}
               editor={editor}
               entries={section.entries}
+              sectionKey={section.key}
             />
           </React.Suspense>
         ) : (
-          <ToolbarDropdown anchorElem={anchorElem} editor={editor} entries={section.entries} />
+          <ToolbarDropdown
+            anchorElem={anchorElem}
+            editor={editor}
+            entries={section.entries}
+            sectionKey={section.key}
+          />
         ))}
       {section.type === 'buttons' &&
         section.entries.length &&