playbook_ui 13.11.1.pre.alpha.play900startratingasinput1530 → 13.11.1

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -3,70 +3,29 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <% if layout_option == "number" %>
-      <%= content_tag(:div, class: "number_rails_#{size}") do %>
-        <% case object.size %>
-          <% when "xs", "sm" %>
-          <%= pb_rails("caption", props: { text: object.rating,
-                                           size: "sm",
-                                           dark: dark,
-                                           padding_right: "xxs" }) %>
-          <% when "md" %>
-          <%= pb_rails("body", props: { text: object.rating,
-                                        dark: dark,
-                                        padding_right: "xxs" }) %>
-          <% when "lg" %>
-          <%= pb_rails("title", props: { text: object.rating,
-                                         size: 2,
-                                         dark: dark,
-                                         padding_right: "sm" }) %>
-        <% end %>
-      <% end %>
+    <% if !object.hide_rating %>
+      <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
+
     <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
         <% object.star_count.times do %>
-          <svg width="<%= svg_size %>" height="<%= svg_size %>" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <% case object.color_option %>
-            <% when "yellow"%>
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" fill="#F9BB00"/>
-            <% when "primary", "outline" %>
-              <path fillRule="evenodd" clipRule="evenodd" d="M9.86015 0.4371C9.73527 0.187329 9.4855 0 9.17328 0C8.89229 0 8.64252 0.187329 8.51763 0.4371L6.36335 4.83932L1.58647 5.55742C1.30547 5.58864 1.08692 5.80719 0.99326 6.05696C0.899595 6.33795 0.962038 6.61895 1.18059 6.8375L4.64617 10.2719L3.80319 15.1112C3.77197 15.3922 3.89685 15.7044 4.11541 15.8605C4.36518 16.0166 4.64617 16.0478 4.89594 15.9229L9.17328 13.6126L13.4506 15.9229C13.7004 16.0478 14.0126 16.0166 14.2624 15.8605C14.4809 15.7044 14.6058 15.3922 14.5434 15.1112L13.7316 10.2719L17.1972 6.8375C17.4157 6.61895 17.4782 6.33795 17.3845 6.05696C17.2909 5.80719 17.0723 5.58864 16.7913 5.55742L12.0144 4.83932L9.86015 0.4371Z" fill="#0056CF"/>
-            <% when "subtle"%>
-              <path fill="<%= subtle_star_color %>" fill-rule="evenodd" clip-rule="evenodd" d="M8.90904 0.4371C8.78416 0.187329 8.53438 0 8.22217 0C7.94118 0 7.69141 0.187329 7.56652 0.4371L5.41224 4.83932L0.635357 5.55742C0.354364 5.58864 0.135813 5.80719 0.042149 6.05696C-0.0515154 6.33795 0.0109275 6.61895 0.229478 6.8375L3.69506 10.2719L2.85208 15.1112C2.82086 15.3922 2.94574 15.7044 3.16429 15.8605C3.41407 16.0166 3.69506 16.0478 3.94483 15.9229L8.22217 13.6126L12.4995 15.9229C12.7493 16.0478 13.0615 16.0166 13.3113 15.8605C13.5298 15.7044 13.6547 15.3922 13.5923 15.1112L12.7805 10.2719L16.2461 6.8375C16.4646 6.61895 16.5271 6.33795 16.4334 6.05696C16.3397 5.80719 16.1212 5.58864 15.8402 5.55742L11.0633 4.83932L8.90904 0.4371Z" />
-          <% end %>
-          </svg>
+          <%= pb_rails("icon", props: { icon: "star" }) %>
         <% end %>
-        <% object.empty_stars.times do %>
-          <svg width="<%= svg_size %>" height="<%= svg_size %>" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <% if object.color_option == "outline" %>
-              <path stroke="<%= outline_star_color %>" d="M5.91323 5.33377L6.17269 5.29477L6.28801 5.0591L8.44116 0.659187C8.49971 0.543364 8.59517 0.5 8.64884 0.5C8.74499 0.5 8.83506 0.555009 8.88775 0.659235L11.0409 5.0591L11.1562 5.29477L11.4157 5.33377L16.1925 6.05186L16.2021 6.0533L16.2117 6.05436C16.2359 6.05706 16.2671 6.06847 16.3024 6.09973C16.3374 6.13062 16.3686 6.17476 16.3886 6.22412C16.4186 6.32162 16.401 6.40181 16.3198 6.48332C16.3196 6.48353 16.3194 6.48374 16.3192 6.48394L12.8552 9.91671L12.6712 10.0991L12.7141 10.3546L13.5258 15.1939L13.528 15.2068L13.5308 15.2196C13.5488 15.3004 13.5074 15.402 13.4567 15.4462C13.3391 15.5132 13.2227 15.5096 13.1546 15.4781L8.88646 13.1726L8.64884 13.0443L8.41121 13.1726L4.14274 15.4782C4.07877 15.5083 3.99031 15.5147 3.87267 15.4466C3.82302 15.4033 3.76655 15.2914 3.77463 15.1781L4.61431 10.3577L4.65911 10.1005L4.47368 9.91671L1.0097 6.48394C1.00947 6.48372 1.00925 6.4835 1.00903 6.48327C0.927878 6.40178 0.910311 6.3216 0.94026 6.22412C0.960274 6.17476 0.99154 6.13062 1.02646 6.09973C1.0618 6.06847 1.09296 6.05706 1.11724 6.05436L1.12682 6.0533L1.13635 6.05186L5.91323 5.33377Z" />
-            <% else %>
-              <path  fill="<%= empty_star_color %>" fill-rule="evenodd" clip-rule="evenodd" d="M9.31126 0.4371C9.18638 0.187329 8.93661 0 8.62439 0C8.3434 0 8.09363 0.187329 7.96874 0.4371L5.81446 4.83932L1.03758 5.55742C0.756585 5.58864 0.538035 5.80719 0.444371 6.05696C0.350706 6.33795 0.413149 6.61895 0.631699 6.8375L4.09728 10.2719L3.2543 15.1112C3.22308 15.3922 3.34797 15.7044 3.56652 15.8605C3.81629 16.0166 4.09728 16.0478 4.34705 15.9229L8.62439 13.6126L12.9017 15.9229C13.1515 16.0478 13.4637 16.0166 13.7135 15.8605C13.932 15.7044 14.0569 15.3922 13.9945 15.1112L13.1827 10.2719L16.6483 6.8375C16.8669 6.61895 16.9293 6.33795 16.8356 6.05696C16.742 5.80719 16.5234 5.58864 16.2424 5.55742L11.4655 4.83932L9.31126 0.4371Z" />
-            <% end %>
-          </svg>
+        <% unless object.star_full %>
+          <%= pb_rails("icon", props: { icon: "star-half" }) %>
         <% end %>
       <% end %>
-    <% end %>
-    <% if layout_option == "onestar" %>
-      <%= content_tag(:div, class: "number_rails_#{size}") do %>
-        <% case object.size %>
-          <% when "xs", "sm" %>
-          <%= pb_rails("caption", props: { text: "#{object.rating} of #{object.denominator}",
-                                           size: "xs",
-                                           dark: dark,
-                                           padding_left: "xxs" }) %>
-          <% when "md" %>
-          <%= pb_rails("body", props: { text: "#{object.rating} of #{object.denominator}",
-                                        dark: dark,
-                                        padding_left: "xxs" }) %>
-          <% when "lg" %>
-          <%= pb_rails("title", props: { text: "#{object.rating} of #{object.denominator}",
-                                         size: 2,
-                                         dark: dark,
-                                         padding_left: "sm" }) %>
-        <% end %>
+
+      <%# Grey background stars as base %>
+      <%= content_tag(:div, class: "pb_star_rating_base") do %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
       <% end %>
+
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -3,61 +3,18 @@
 module Playbook
   module PbStarRating
     class StarRating < Playbook::KitBase
+      prop :hide_rating, type: Playbook::Props::Boolean,
+                         default: false
+
       prop :rating, type: Playbook::Props::Numeric,
                     default: 0
 
-      prop :denominator, type: Playbook::Props::Numeric,
-                         default: 5
-
-      prop :layout_option, type: Playbook::Props::Enum,
-                           values: %w[default onestar number],
-                           default: "default"
-
-      prop :color_option, type: Playbook::Props::Enum,
-                          values: %w[yellow primary subtle outline],
-                          default: "yellow"
-
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg],
-                  default: "sm"
-
       def star_count
-        rating.floor > denominator_style ? denominator_style : rating.floor
-      end
-
-      def denominator_style
-        layout_option == "onestar" ? 1 : denominator
-      end
-
-      def empty_stars
-        (denominator_style - rating.floor).negative? ? 0 : denominator_style - rating.floor
-      end
-
-      def empty_star_color
-        dark ? "$border_dark" : "#E4E8F0"
-      end
-
-      def outline_star_color
-        dark ? "$text_dk_lighter" : "#C1CDD6"
-      end
-
-      def subtle_star_color
-        dark ? "$text_dk_default" : "#242B42"
+        rating.floor
       end
 
-      def svg_size
-        case size
-        when "sx"
-          14
-        when "sm"
-          16
-        when "md"
-          24
-        when "lg"
-          48
-        else
-          16
-        end
+      def star_full
+        (rating.to_f % 1).zero?
       end
 
       def classname

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -1,22 +1,24 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
 
-import StarRating from "./_star_rating"
+import StarRating from "./_star_rating";
 
-const testId = "star-rating-kit"
+const testId = "star-rating-kit";
 
 describe("Star Rating Kit", () => {
   test("Expects to have correct classname", () => {
     render(
       <StarRating
           data={{ testid: testId }}
+          rating={2}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    expect(kit.className).toBe("pb_star_rating_kit")
 
-  })
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
 
   test('should render aria-label', () => {
     render(
@@ -25,46 +27,45 @@ describe("Star Rating Kit", () => {
           data={{ testid: testId }}
           rating={2}
       />
-    )
+    );
 
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-  })
+  });
 
-  test("Displays correct denominator", () => {
+  test("Displays two highlighted stars", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          denominator={4}
           rating={2}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".pb_star_rating_wrapper")
-    const stars = highlight.querySelectorAll(".pb_star_sm")
-    const count = stars.length
 
-    expect(count).toBe(4)
-  })
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
 
-  test("Uses correct size", () => {
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          layoutOption="number"
-          rating={2}
-          size="lg"
+          rating={3.5}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".pb_star_rating_wrapper")
-    const title = kit.querySelector(".pb_star_rating_number_lg")
-    const stars = highlight.querySelectorAll(".pb_star_lg")
-    const count = stars.length
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
 
-    expect(title.className).toBe("pb_star_rating_number_lg")
-    expect(count).toBe(5)
-  })
-})
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});

data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -39,10 +39,10 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -1,7 +1,6 @@
 @import "../../tokens/opacity";
 
 $transition-speed: 0.2s;
-$border_hover_color_dark: lighten($border_dark, 5%);
 
 [class^=pb_table] {
   &.table-sm,
@@ -16,9 +15,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
           td {
             border-top-color: transparent;
             border-top-width: 0;
-            transition: all $transition-speed ease;
+            transition: all $transition-speed ease; 
           }
-          @media (hover:hover) {
+          @media (hover:hover) { 
             td {
               position: relative;
               &:after {
@@ -70,29 +69,6 @@ $border_hover_color_dark: lighten($border_dark, 5%);
           }
         }
       }
-
-      &.dark  {
-        tbody {
-          tr {
-            @media (hover:hover) {
-              &:hover {
-                box-shadow: 0 2px 10px 0 $shadow_dark;
-                td {
-                  border-top-width: 0;
-                  border-top-color: transparent;
-                  border-color: $border_hover_color_dark !important;
-                  &:after {
-                    transition: background-color $transition-speed ease, height $transition-speed ease;
-                    background-color: $border_hover_color_dark !important;
-                    height: 1px;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -1,6 +1,6 @@
 @import "../../tokens/screen_sizes";
 
-$table-dark-card-bg: $card_dark;
+$table-dark-card-bg: $bg_dark;
 
 [class^=pb_table] {
   &.table-sm,
@@ -24,6 +24,7 @@ $table-dark-card-bg: $card_dark;
 
           td {
             border-color: $border_dark !important;
+            border-bottom-width: 0 !important;
             color: $white;
 
             &:before {
@@ -38,6 +39,21 @@ $table-dark-card-bg: $card_dark;
         }
       }
 
+      &:not(.no-hover) {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-color: $border_dark !important;
+                  background: $bg_dark;
+                }
+              }
+            }
+          }
+        }
+      }
+
       &.table-card {
         background: $table-dark-card-bg !important;
       }

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,16 +28,15 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_items.each do |sort_item| %>
-            <% item = active_or_first_item(sort_items_for(sort_item)) %>
+          <% object.sort_menu.each_with_index do |item, index| %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: next_link(sort_item: sort_item),
+              link: item[:link],
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item"
+              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
             }) %>
           <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,43 +32,20 @@ module Playbook
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link(sort_item: "")
-        sort_menu_for = if sort_item.blank?
-                          sort_menu
-                        else
-                          sort_items_for(sort_item)
-                        end
-
-        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
+      def next_link
+        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu_for.each_with_index do |item, index|
+        sort_menu.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu_for.length
-            link = sort_menu_for[next_index][:link]
+            next_index = (index + 1) % sort_menu.length
+            link = sort_menu[next_index][:link]
           end
         end
         link
       end
 
-      def sort_items
-        sort_menu.map { |hash| hash[:item] }.uniq
-      end
-
-      def sort_items_for(sort_item)
-        sort_menu.find_all { |hash| hash[:item] == sort_item }
-      end
-
-      def active_or_first_item(items)
-        active_item = items.find { |hash| hash[:active] == true }
-        if active_item.present?
-          active_item
-        else
-          items[0]
-        end
-      end
-
       def sorting_style?
         sort_menu != [{}]
       end

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
+import React, { useRef, useState } from "react"
 
 import {
   arrow, 
@@ -28,10 +28,9 @@ type TooltipProps = {
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
-  showTooltip?: boolean,
 } & GlobalProps
 
-const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
+const Tooltip = (props: TooltipProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -43,7 +42,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
-    showTooltip = true,
     zIndex,
     ...rest
   } = props
@@ -61,9 +59,10 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
 
   const {
     context,
+    floating,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
-    refs,
+    reference,
     strategy,
     x,
     y,
@@ -83,16 +82,12 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     ],
     open,
     onOpenChange(open) {
-      if(!showTooltip) {
-        return
-      } else {
-        setOpen(open)
-      }
+      setOpen(open)
     },
     placement: preferredPlacement
   })
 
-      
+
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -113,16 +108,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     <>
       <div
           className={`pb_tooltip_kit ${css}`}
-          ref={(element) => {
-            refs.setReference(element);
-            if (ref) {
-              if (typeof ref === "function") {
-                ref(element);
-              } else if (typeof ref === "object") {
-                ref.current = element;
-              }
-            }
-          }}
+          ref={reference}
           role="tooltip_trigger"
           style={{ display: "inline-flex" }}
           {...ariaProps}
@@ -134,7 +120,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,
-              ref: refs.setFloating,
+              ref: floating,
               role: "tooltip",
               style: {
                 position: strategy,
@@ -167,8 +153,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       )}
     </>
   )
-})
-
-Tooltip.displayName = "Tooltip"
+}
 
 export default Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
   <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-1'>Hover here (Top)</span>
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -9,10 +9,12 @@ const TooltipDefaultReact = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
+       justifyContent='center'
        wrap
    >
     <FlexItem>
       <Tooltip 
+          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -9,6 +9,7 @@ const TooltipDelay = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
+       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -9,6 +9,7 @@ const TooltipInteraction = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
+       justifyContent='center'
        wrap
    >
     <FlexItem>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -7,6 +7,7 @@ const TooltipMargin = (props) => {
   return (
     <Flex 
         flexDirection='row' 
+        justifyContent='center' 
         wrap
     >
       <Tooltip

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { orientation: "column" }) do %>
+<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
   <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
     <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
   <% end %>

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

@@ -4,7 +4,6 @@ examples:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_show_tooltip: Show Tooltip
 
   react:
   - tooltip_default_react: Default
@@ -12,5 +11,3 @@ examples:
   - tooltip_margin: Margin
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
-  - tooltip_show_tooltip_react: Show Tooltip
-

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

@@ -3,4 +3,3 @@ export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
-export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

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

@@ -54,8 +54,6 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === "false") return
-
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
       modifiers: [
@@ -129,8 +127,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerElementSelector() {
     return this.element.dataset.pbTooltipTriggerElementSelector
   }
-
-  get shouldShowTooltip() {
-    return this.element.dataset.pbTooltipShowTooltip
-  }
 }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -20,8 +20,7 @@ module Playbook
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id,
-          pb_tooltip_show_tooltip: true
+          pb_tooltip_tooltip_id: tooltip_id
         )
       end