playbook_ui 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -45,9 +45,6 @@
   }
 
   &[class*=dark] {
-    a {
-      color: $active_dark;
-    }
     @include pb_body_dark();
     @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
       &[class*=_#{$dark_color_name}][class*=dark]{

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
-  link:           $active_dark,
+  link:           $primary_action_dark,
   error:          $error,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,7 +28,6 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
-  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
@@ -198,16 +197,16 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button_variant($transparent, $active_dark);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($active_dark, $opacity_6)
+      color: rgba($white, $opacity_6)
     }
     &:active {
       transition: none;
-      @include pb_button_variant($transparent, $active_dark);
+      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,7 +13,7 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $active_dark,
+  link:           $primary,
   success:        $text_dk_success_sm,
   error:          $error,
 );

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -81,4 +81,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -17,11 +17,6 @@ $additional_colors: (
   "light": $bg_light,
   "white": $white,
   "none": none,
-  "success_subtle": $success_subtle,
-  "warning_subtle": $warning_subtle,
-  "error_subtle": $error_subtle,
-  "info_subtle": $info_subtle,
-  "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
                         default: "none"
 
       def classname

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -42,23 +42,3 @@
     dark: true
   }) %>
 <% end %>
-
-<%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Success Subtle"
-  }) %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Warning Subtle"
-  }) %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" })  do %>
-  <%= pb_rails("body", props: {
-    text: "Info Subtle"
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -90,47 +90,7 @@ const CardBackground = (props) => {
         />
       </Card>
 
-
-      <Title
-          {...props}
-          marginBottom="sm"
-          size={4}
-          tag="h4"
-          text="Subtle Status Colors"
-      />
-
-      <Card
-          background="success_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Success Subtle"
-            {...props}  
-        />
-      </Card>
-
-      <Card
-          background="warning_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Warning Subtle"
-            {...props}
-        />
-      </Card>
-
-      <Card
-          background="info_subtle"
-          marginBottom="sm"
-          {...props}
-      >
-        <Body
-            text="Info Subtle"
-            {...props}
-        />
-      </Card>
+      
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -9,7 +9,6 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
-import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
 
 type CollapsibleProps = {
@@ -53,15 +52,12 @@ const Collapsible = ({
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-  const FirstChild = CollapsibleParent[0]
-  const SecondChild = CollapsibleParent[1]
 
-  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
-  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
+  const Main = CollapsibleParent[0]
+  const Content = CollapsibleParent[1]
 
-
-  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
-  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
+  const { children: mainChildren, ...mainProps } = Main.props
+  const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -79,19 +75,13 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        {Main ? (
-          <CollapsibleMain {...mainProps}>
-            {mainChildren}
-          </CollapsibleMain>
-        ) : (
-          FirstChild
-        )}
+        <CollapsibleMain {...mainProps}>
+          {mainChildren}
+        </CollapsibleMain>
 
-        {Content && (
-          <CollapsibleContent {...contentProps}>
-            {contentChildren}
-          </CollapsibleContent>
-        )}
+        <CollapsibleContent {...contentProps}>
+          {contentChildren}
+        </CollapsibleContent>
       </div>
     </CollapsibleContext.Provider>
   )
@@ -99,6 +89,5 @@ const Collapsible = ({
 
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
-Collapsible.Icon = CollapsibleIcon
 
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,9 +7,27 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import { IconSizes } from "../../pb_icon/_icon"
+import Icon, { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-import CollapsibleIcon from './CollapsibleIcon'
+
+
+type colorMap = {
+  default: string,
+  light: string,
+  lighter: string,
+  link: string,
+  error: string,
+  success: string
+}
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+}
 
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -20,6 +38,60 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
+type IconProps = {
+  collapsed: boolean | (()=> void)
+  icon?: string[] | string
+  iconColor?: IconColors
+  iconSize?: IconSizes
+  onIconClick?: ()=> void
+}
+
+const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
+  const color = colorMap[iconColor]
+
+  const showIcon = (icon: string |string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon]
+    }
+    return icon
+  }
+
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+    e.stopPropagation();
+    onIconClick()
+    }
+  }
+
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
 const CollapsibleMain = ({
   children,
   className,
@@ -48,7 +120,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <CollapsibleIcon
+            <ToggleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>

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

@@ -7,9 +7,6 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main_rails: Custom Main Section
-  - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
-
 
   react:
   - collapsible_default: Default
@@ -17,10 +14,6 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main Section
-  - collapsible_custom_main_with_icon: Custom Main Section With Icon
-
-
 
   swift:
   - collapsible_default_swift: Default

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

@@ -2,6 +2,4 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export { default as CollapsibleState } from './_collapsible_state.jsx'
-export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
-export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'
+export {default as CollapsibleState } from './_collapsible_state.jsx'

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

@@ -75,23 +75,13 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.displayUpArrow()
   }
 
-  toggleArrows(showDownArrow) {
-    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
-    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
-  
-    if (downArrow) {
-      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
-    }
-    if (upArrow) {
-      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
-    }
-  }
-  
   displayDownArrow() {
-    this.toggleArrows(true);
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
   }
-  
+
   displayUpArrow() {
-    this.toggleArrows(false);
-  }
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+   }
 }

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("caption", props: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <% if object.unstyled %>
     <!-- icon -->

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <div class="pb_date_range_inline_wrapper">
     <% if object.icon == true %>
       <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>

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

@@ -6,7 +6,4 @@ examples:
   
   react:
   - date_range_inline_default: Default
-
-  swift:
-  - date_range_inline_default_swift: Default
-  - date_range_inline_props_swift: ""
+  

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {vertical: "center"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <% if object.bold == false %>
 

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

@@ -15,10 +15,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold
-
-  swift:
-  - date_stacked_default_swift: Default
-  - date_stacked_not_current_year_swift: Not Current Year
-  - date_stacked_reversed_swift: Day & Month Reverse
-  - date_stacked_bold_swift: Bold
-  - date_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("flex", props: {
       orientation: "row",

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

@@ -9,9 +9,3 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-
-  swift:
-  - date_time_default_swift: Default
-  - date_time_alignment_swift: Alignment
-  - date_time_size_swift: Size
-  - date_time_props_swift: ""

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

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

@@ -5,7 +5,3 @@ examples:
 
   react:
   - date_year_stacked_default: Default
-
- swift:
-  - date_year_stacked_default_swift: Default
-  - date_year_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_detail_colors: (
   light:          $text_dk_light,
   default:        $text_dk_default,
   lighter:        $text_dk_lighter,
-  link:           $active_dark,
+  link:           $primary,
   error:          $error_dark,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -23,11 +23,11 @@
         <ul>
           <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
             </li>
           <li>
-            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>