playbook_ui 13.10.0 → 13.11.1.pre.alpha.play900startratingasinput1530

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

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
+<%= pb_rails("flex", props: { gap: "md", 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,12 +9,10 @@ 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,7 +9,6 @@ const TooltipDelay = (props) => {
    <Flex 
        flexDirection='row'
        gap='md'
-       justifyContent='center'
        wrap
    >
     <FlexItem>

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

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

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

@@ -7,7 +7,6 @@ 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: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("flex", props: { 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/_tooltip_show_tooltip.html.erb

@@ -0,0 +1,39 @@
+
+<%= pb_rails("flex", props: { orientation: "column", gap: "md" }) do %>
+  <%= pb_rails("button", props: {text: "Toggle state", id: "toggle-tooltip-button"}) %>
+  <%= pb_rails("body") do %>
+      Tooltip is: <code id="show-tooltip-state">enabled</code>
+  <% end %>
+  <%= pb_rails("flex/flex_item") do %>
+    <span id="truncated-tooltip-1">Hover me</span>
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#truncated-tooltip-1",
+      tooltip_id: "truncated-1",
+      position: "right",
+    }) do %>
+        Tooltip is enabled
+    <% end %>
+  <% end %>
+<% end %>
+
+
+<script>
+const toggleTooltipButton = document.getElementById("toggle-tooltip-button");
+const showTooltipStateText = document.getElementById("show-tooltip-state");
+
+function hideTooltipIfNotTruncated(tooltipId) {
+  const tooltipElement = document.querySelector(
+    `[data-pb-tooltip-tooltip-id="${tooltipId}"]`
+  );
+
+  tooltipElement.dataset.pbTooltipShowTooltip =
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "true" : "false";
+
+  showTooltipStateText.innerText = 
+    tooltipElement.dataset.pbTooltipShowTooltip == "false" ? "disabled" : "enabled";
+}
+
+toggleTooltipButton.addEventListener("click", () => {
+  hideTooltipIfNotTruncated("truncated-1");
+});
+</script>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md

@@ -0,0 +1,5 @@
+You can build your own logic to control whether to show or hide the tooltip. 
+
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.
+
+Each Tooltip has a `dataset` with the `pbTooltipShowTooltip` property set to true by default. To update it, access the `pbTooltipShowTooltip` in the dataset of your tooltip element: `yourTooltip.dataset.pbTooltipShowTooltip = 'false'`

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

@@ -0,0 +1,45 @@
+// @flow
+
+import React, { useState } from 'react'
+import {  Button, Body, Flex, FlexItem, Tooltip } from '../..'
+
+const TooltipShowTooltipReact = (props) => {
+  const [showTooltip, setShowTooltip] = useState(true);
+
+  return (
+   <Flex 
+       flexDirection='column'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Button 
+          onClick={()=> setShowTooltip(!showTooltip)}
+          text="Toggle state"
+      />
+    </FlexItem>
+    <FlexItem>
+      <Body >
+        <p>
+          {'Tooltip is: '}
+          <code>{showTooltip ? "enabled" : "disabled"}</code>
+        </p>
+      </Body>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip 
+          placement='right'
+          showTooltip={showTooltip}
+          text='Tooltip is enabled'
+          zIndex={10}
+          {...props}
+      >
+        {'Hover me.'}
+      </Tooltip>
+    </FlexItem>
+
+   </Flex>
+  )
+}
+
+export default TooltipShowTooltipReact

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md

@@ -0,0 +1,3 @@
+You can build your own logic to control whether to show the tooltip using the `showTooltip` prop. Its default value is `true`.
+
+Click on the `Toggle state` button to change the state of the component and hover over the 'hover me' text to see it in action.

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

@@ -4,6 +4,7 @@ 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
@@ -11,3 +12,5 @@ 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,3 +3,4 @@ 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,6 +54,8 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
+    if (this.shouldShowTooltip === "false") return
+
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
       modifiers: [
@@ -127,4 +129,8 @@ 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,7 +20,8 @@ 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_tooltip_id: tooltip_id,
+          pb_tooltip_show_tooltip: true
         )
       end
 

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -92,5 +92,39 @@ test("has position fixed", async () => {
     cleanup();
   })
 
+  cleanup();
+});
+
+test("display tooltip with showTooltip set to true", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+    cleanup();
+  })
+
+  cleanup();
+});
+
+test("doesn't display tooltip with showTooltip set to false", async () => {
+  render(
+    <Tooltip
+        data={{ testid: "fixed-position-test" }}
+        showTooltip={false}
+    />
+  );
+
+  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
+  await waitFor(() => {
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    cleanup();
+  })
+
   cleanup();
 });

data/app/pb_kits/playbook/playbook-doc.js

@@ -104,7 +104,7 @@ import * as UserBadge from 'pb_user_badge/docs'
 import * as Walkthrough from 'pb_walkthrough/docs'
 import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
-WebpackerReact.setup({
+WebpackerReact.registerComponents({
   ...Avatar,
   ...AvatarActionButton,
   ...Background,

data/dist/menu.yml

@@ -1,111 +1,285 @@
+web: &web ["rails", "react"]
+all: &all ["rails", "react", "swift"]
+rails_swift: &rails_swift ["rails", "swift"]
+react_swift: &react_swift ["swift", "react"]
+rails_only: &rails_only ["rails"]
+react_only: &react_only ["react"]
+swift_only: &swift_only ["swift"]
+
 kits:
-  - avatars:
-    - avatar
-    - avatar_action_button
-    - multiple_users
-    - multiple_users_stacked
-    - user
-  - background
-  - bread_crumbs
-  - buttons:
-    - button
-    - button_toolbar
-    - circle_icon_button
-  - card
-  - collapsible
-  - charts_and_graphs:
-    - bar_graph
-    - circle_chart
-    - distribution_bar
-    - gauge
-    - legend
-    - line_graph
-    - treemap_chart
-  - dialog
-  - filter
-  - fixed_confirmation_toast
-  - forms:
-    - checkbox
-    - date_picker
-    - file_upload
-    - form
-    - form_group
-    - form_pill
-    - multi_level_select
-    - passphrase
-    - phone_number_input
-    - radio
-    - rich_text_editor
-    - select
-    - selectable_card
-    - selectable_card_icon
-    - selectable_icon
-    - selectable_list
-    - text_input
-    - textarea
-    - toggle
-    - typeahead
-  - highlight
-  - icon
-  - icon_circle
-  - icon_stat_value
-  - icon_value
-  - image
-  - layouts:
-    - flex
-    - layout
-  - lightbox
-  - list
-  - loading_inline
-  - map
-  - nav
-  - tags:
-    - badge
-    - hashtag
-    - pill
-  - pagination
-  - popover
-  - progress:
-    - progress_pills
-    - progress_simple
-    - progress_step
-  - section_separator
-  - star_rating
-  - table
-  - timeline
-  - time_and_date:
-    - date
-    - date_range_inline
-    - date_range_stacked
-    - date_stacked
-    - date_time
-    - date_time_stacked
-    - date_year_stacked
-    - time
-    - time_range_inline
-    - time_stacked
-    - timestamp
-    - weekday_stacked
-  - tooltip
-  - typography:
-    - body
-    - caption
-    - detail
-    - title
-  - typography_patterns:
-    - contact
-    - currency
-    - dashboard_value
-    - home_address_street
-    - label_pill
-    - label_value
-    - message
-    - person
-    - person_contact
-    - source
-    - stat_change
-    - stat_value
-    - title_count
-    - title_detail
-  - user_badge
-  - walkthrough
+  - name: "avatars"
+    components:
+      - name: "avatar"
+        platforms: *all
+      - name: "avatar_action_button"
+        platforms: *web
+      - name: "multiple_users"
+        platforms: *web
+      - name: "multiple_users_stacked"
+        platforms: *web
+      - name: "user"
+        platforms: *web
+  - name: "background"
+    components:
+      - name: "background"
+        platforms: *web
+  - name: "bread_crumbs"
+    components:
+      - name: "bread_crumbs"
+        platforms: *web
+  - name: "buttons"
+    components:
+      - name: "button"
+        platforms: *web
+      - name: "button_toolbar"
+        platforms: *web
+      - name: "circle_icon_button"
+        platforms: *web
+  - name: "card"
+    components:
+      - name: "card"
+        platforms: *all
+  - name: "collapsible"
+    components:
+      - name: "collapsible"
+        platforms: *web
+  - name: "charts_and_graphs"
+    components:
+      - name: "bar_graph"
+        platforms: *web
+      - name: "circle_chart"
+        platforms: *web
+      - name: "distribution_bar"
+        platforms: *web
+      - name: "gauge"
+        platforms: *web
+      - name: "legend"
+        platforms: *web
+      - name: "line_graph"
+        platforms: *web
+      - name: "treemap_chart"
+        platforms: *web
+  - name: "dialog"
+    components:
+      - name: "dialog"
+        platforms: *web
+  - name: "filter"
+    components:
+      - name: "filter"
+        platforms: *web
+  - name: "fixed_confirmation_toast"
+    components:
+      - name: "fixed_confirmation_toast"
+        platforms: *web
+  - name: "forms"
+    components:
+      - name: "checkbox"
+        platforms: *web
+      - name: "date_picker"
+        platforms: *web
+      - name: "file_upload"
+        platforms: *web
+      - name: "form"
+        platforms: *rails_only
+      - name: "form_group"
+        platforms: *web
+      - name: "form_pill"
+        platforms: *web
+      - name: "multi_level_select"
+        platforms: *web
+      - name: "passphrase"
+        platforms: *web
+      - name: "phone_number_input"
+        platforms: *web
+      - name: "radio"
+        platforms: *all
+      - name: "rich_text_editor"
+        platforms: *web
+      - name: "select"
+        platforms: *web
+      - name: "selectable_card"
+        platforms: *web
+      - name: "selectable_card_icon"
+        platforms: *web
+      - name: "selectable_icon"
+        platforms: *web
+      - name: "selectable_list"
+        platforms: *web
+      - name: "text_input"
+        platforms: *web
+      - name: "textarea"
+        platforms: *web
+      - name: "toggle"
+        platforms: *web
+      - name: "typeahead"
+        platforms: *web
+  - name: "highlight"
+    components:
+      - name: "highlight"
+        platforms: *web
+  - name: "icon"
+    components:
+      - name: "icon"
+        platforms: *web
+  - name: "icon_circle"
+    components:
+      - name: "icon_circle"
+        platforms: *web
+  - name: "icon_stat_value"
+    components:
+      - name: "icon_stat_value"
+        platforms: *web
+  - name: "icon_value"
+    components:
+      - name: "icon_value"
+        platforms: *web
+  - name: "image"
+    components:
+      - name: "image"
+        platforms: *web
+  - name: "layouts"
+    components:
+      - name: "flex"
+        platforms: *web
+      - name: "layout"
+        platforms: *web
+  - name: "lightbox"
+    components:
+      - name: "lightbox"
+        platforms: *react_only
+  - name: "list"
+    components:
+      - name: "list"
+        platforms: *web
+  - name: "loading_inline"
+    components:
+      - name: "loading_inline"
+        platforms: *web
+  - name: "map"
+    components:
+      - name: "map"
+        platforms: *react_only
+  - name: "nav"
+    components:
+      - name: "nav"
+        platforms: *web
+  - name: "pagination"
+    components:
+      - name: "pagination"
+        platforms: *rails_only
+  - name: "popover"
+    components:
+      - name: "popover"
+        platforms: *web
+  - name: "progress"
+    components:
+      - name: "progress_pills"
+        platforms: *web
+      - name: "progress_simple"
+        platforms: *web
+      - name: "progress_step"
+        platforms: *web
+  - name: "section_separator"
+    components:
+      - name: "section_separator"
+        platforms: *web
+  - name: "star_rating"
+    components:
+      - name: "star_rating"
+        platforms: *web
+  - name: "table"
+    components:
+      - name: "table"
+        platforms: *web
+  - name: "tags"
+    components:
+      - name: "tags"
+        platforms: *web
+      - name: "badge"
+        platforms: *web
+      - name: "hashtag"
+        platforms: *web
+      - name: "pill"
+        platforms: *all
+  - name: "timeline"
+    components:
+      - name: "timeline"
+        platforms: *web
+  - name: "time_and_date"
+    components:
+      - name: "date"
+        platforms: *web
+      - name: "date_range_inline"
+        platforms: *web
+      - name: "date_range_stacked"
+        platforms: *web
+      - name: "date_stacked"
+        platforms: *web
+      - name: "date_time"
+        platforms: *web
+      - name: "date_time_stacked"
+        platforms: *web
+      - name: "date_year_stacked"
+        platforms: *web
+      - name: "time"
+        platforms: *web
+      - name: "time_range_inline"
+        platforms: *web
+      - name: "time_stacked"
+        platforms: *web
+      - name: "timestamp"
+        platforms: *all
+      - name: "weekday_stacked"
+        platforms: *web
+  - name: "tooltip"
+    components:
+      - name: "tooltip"
+        platforms: *web
+  - name: "typography"
+    components:
+      - name: "body"
+        platforms: *web
+      - name: "caption"
+        platforms: *web
+      - name: "detail"
+        platforms: *web
+      - name: "title"
+        platforms: *web
+  - name: "typography_patterns"
+    components:
+      - name: "contact"
+        platforms: *web
+      - name: "currency"
+        platforms: *web
+      - name: "dashboard_value"
+        platforms: *web
+      - name: "home_address_street"
+        platforms: *web
+      - name: "label_pill"
+        platforms: *web
+      - name: "label_value"
+        platforms: *web
+      - name: "message"
+        platforms: *web
+      - name: "person"
+        platforms: *web
+      - name: "person_contact"
+        platforms: *web
+      - name: "source"
+        platforms: *web
+      - name: "stat_change"
+        platforms: *web
+      - name: "stat_value"
+        platforms: *web
+      - name: "title_count"
+        platforms: *web
+      - name: "title_detail"
+        platforms: *web
+  - name: "user_badge"
+    components:
+      - name: "user_badge"
+        platforms: *web
+  - name: "walkthrough"
+    components:
+      - name: "walkthrough"
+        platforms: *web