playbook_ui 15.4.0.pre.alpha.PLAY1541responsivefloorPOC12370 → 15.4.0.pre.alpha.PLAY2429datepickeropenonscreenstatic12263

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
-
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -29,28 +28,22 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
-  
   const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
   const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
   const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
   const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
   const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
-  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const fixedStyle =
+    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
-
-// Extract style from htmlOptions and remove it
-  const { style: htmlStyle, ...htmlOptionsWithoutStyle } = htmlOptions
-  const htmlStyleObj = htmlStyle && typeof htmlStyle === 'object' ? htmlStyle : {}
-  
-  // Merge all styles
   const combinedStyles = {
-    ...htmlStyleObj,
     ...fixedStyle,
     ...dynamicInlineProps
   }
 
-  const htmlProps = buildHtmlProps(htmlOptionsWithoutStyle)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
 
   return (
     <div
@@ -73,4 +66,4 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   )
 }
 
-export default FlexItem
+export default FlexItem

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -15,7 +15,6 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
-            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -43,7 +43,6 @@ type NavItemProps = {
   marginLeft?: Spacing;
   marginX?: Spacing;
   marginY?: Spacing;
-  disabled?: boolean;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
@@ -90,7 +89,6 @@ const NavItem = (props: NavItemProps) => {
     marginLeft,
     marginX,
     marginY,
-    disabled = false,
   } = props;
 
   const spacingMarginProps = {
@@ -142,12 +140,11 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link && !disabled
+  const isLink = !!link
   const Tag = isLink ? "a" : "div"
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
-  const disabledClass = disabled ? "pb_nav_item_disabled" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
@@ -180,7 +177,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     fontWeightClass,
     tagClasses,
     collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
-    disabledClass,
     className
   );
 
@@ -206,21 +202,12 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
+    if (!isLink && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault()
       onClick?.()
     }
   }
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (disabled) {
-      e.preventDefault()
-      e.stopPropagation()
-      return
-    }
-    onClick?.()
-  }
-
   return (
     <>
       {collapsible ? (
@@ -288,14 +275,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
-            aria-disabled={disabled}
             className={classes}
             href={isLink ? link : undefined}
             id={id}
-            onClick={handleClick}
+            onClick={onClick}
             onKeyDown={!isLink ? handleKeyDown : undefined}
             role={!isLink ? "button" : undefined}
-            tabIndex={disabled ? -1 : (!isLink ? 0 : undefined)}
+            tabIndex={!isLink ? 0 : undefined}
             target={isLink ? target : undefined}
         >
           {imageUrl && (

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -45,18 +45,16 @@
 
   [class*="pb_nav_list_kit_item"],
   [class*="pb_nav_list_item"] {
-    &:hover {
-      cursor: pointer;
-    }
+    &:hover { cursor: pointer; }
   }
 }
 
 .pb_nav_extended_underline {
   position: relative;
-
+  
   // Add full-width border using pseudo-element so as not to break the active item border
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: 0;
     left: 0;
@@ -67,8 +65,8 @@
   }
 
   .pb_nav_list_kit_item_active.pb_nav_list_item_link {
-    position: relative;
-    z-index: 2;
+      position: relative;
+      z-index: 2;
   }
 
   &.dark {
@@ -77,26 +75,3 @@
     }
   }
 }
-
-// Disabled scss
-.pb_nav_item_disabled {
-  cursor: not-allowed !important;
-  .pb_nav_list_item_text, 
-  .pb_nav_list_item_icon_left,
-  .pb_nav_list_item_icon_right,
-  .pb_nav_list_item_icon_section {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-  @media (hover: hover) {
-    &:hover {
-      background-color: unset !important;
-      color: $text_lt_lighter !important;
-      .pb_nav_list_item_text,
-      .pb_nav_list_item_icon_left,
-      .pb_nav_list_item_icon_right {
-        color: $text_lt_lighter !important;
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -5,8 +5,6 @@ import Nav from './_nav'
 import NavItem from './_item'
 
 const navTestId = 'nav'
-const navDisabledTestId = 'nav-disabled'
-const itemDisabledTestId = 'item-disabled'
 const itemTestId = 'item'
 const activeTestBorderlessId = 'activeborderless'
 const activeTestBorderId = 'active'
@@ -107,193 +105,3 @@ test('should have a left icon', () => {
     const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
     expect(icon).toBeInTheDocument()
 })
-
-test('should apply disabled class when disabled (horizontal nav)', () => {
-    [
-     "default",
-     "subtle",
-     "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="horizontal"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(kit).toHaveClass('pb_nav_item_disabled')
-    })
-})
-
-test('should set aria-disabled when disabled (horizontal nav)', () => {
-    [
-        "default",
-        "subtle",
-        "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="horizontal"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(item).toHaveAttribute('aria-disabled', 'true')
-    })
-})
-
-test('should set tabIndex to -1 when disabled (horizontal nav)', () => {
-    [
-        "default",
-        "subtle",
-        "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="horizontal"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(kit).toHaveAttribute('tabIndex', '-1')
-    })
-})
-
-test('should prevent onClick when disabled', () => {
-    const handleClick = jest.fn()
-    render(
-        <NavItem
-            data={{ testid: 'disabled-click-item' }}
-            disabled
-            link="#"
-            onClick={handleClick}
-            text="Disabled Item"
-        />
-    )
-    const kit = screen.getByTestId('disabled-click-item')
-    kit.click()
-    expect(handleClick).not.toHaveBeenCalled()
-})
-
-test('should apply disabled class when disabled (vertical nav)', () => {
-    [
-     "default",
-     "subtle",
-     "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="vertical"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(kit).toHaveClass('pb_nav_item_disabled')
-    })
-})
-
-test('should set aria-disabled when disabled (vertical nav)', () => {
-    [
-        "default",
-        "subtle",
-        "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="vertical"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(item).toHaveAttribute('aria-disabled', 'true')
-    })
-})
-
-test('should set tabIndex to -1 when disabled (vertical nav)', () => {
-    [
-        "default",
-        "subtle",
-        "bold"
-    ].forEach((variant) => {
-        render(
-            <Nav
-                aria={{ label: navDisabledTestId }}
-                className={navClassName}
-                data={{ testid: navDisabledTestId }}
-                orientation="vertical"
-                variant={variant}
-            >
-            <NavItem
-                aria={{ label: `${itemDisabledTestId}-${variant}` }}
-                className={itemClassName}
-                data={{ testid: `${itemDisabledTestId}-${variant}` }}
-                disabled
-                link="#"
-                text="Files"
-            />
-           </Nav>
-        )
-        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
-        expect(kit).toHaveAttribute('tabIndex', '-1')
-    })
-})

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
         @media (hover: hover) {
-          &:hover:not(.pb_nav_item_disabled) {
+          &:hover {
             background-color: rgba($primary, 0.03);
             [class*="_icon"] {
               color: $primary;

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

@@ -18,8 +18,6 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
-  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
-  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -46,8 +44,6 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
-  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
-  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -20,6 +20,4 @@ export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
-export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -24,12 +24,10 @@
     <% end %>
   <% else %>
     <%= pb_content_tag( object.tag,
-        aria: { disabled: object.disabled },
-        href: object.is_link ? object.link : nil,
-        target: object.is_link ? object.target : nil,
-        onclick: object.disabled ? "event.preventDefault(); event.stopPropagation(); return false;" : nil,
-        onkeydown: object.disabled ? nil : (!object.is_link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil),
-        tabindex: object.disabled ? -1 : (object.is_link ? nil : 0),
+        href: object.link && object.link,
+        target: object.link && object.target,
+        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
+        tabindex: object.link ? nil : 0,
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,7 +4,6 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :font_size, type: Playbook::Props::Enum,
                        values: %w[normal small],
                        default: "normal"
@@ -27,7 +26,7 @@ module Playbook
         if collapsible
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
         end
       end
 
@@ -82,11 +81,7 @@ module Playbook
       end
 
       def tag
-        link && !disabled ? "a" : "div"
-      end
-
-      def is_link
-        link && !disabled
+        link ? "a" : "div"
       end
 
       def collapsible_icons
@@ -103,10 +98,6 @@ module Playbook
         active ? "active" : nil
       end
 
-      def disabled_class
-        disabled ? " pb_nav_item_disabled" : nil
-      end
-
       def highlighted_border_class
         !highlighted_border && active ? "highlighted_border_none" : nil
       end

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -1,5 +1,4 @@
-Tooltip options from Highcharts:
-
+Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -1,5 +1,5 @@
 Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
 
-For React, pass the option `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
 
-For Rails, the option `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
+For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -37,7 +37,7 @@
     },
   } %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
 <%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
 
   <% chartOptionsSecond = {

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

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && extensions.length > 0 && (
+              extensions && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>