playbook_ui 14.7.0.pre.alpha.spacingquickchange4482 → 14.7.0.pre.rc.0

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -63,30 +62,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const renderTitle = (content: string, className: string) => {
-    const titleComponent = (
-      <Title
-          className={className}
-          size={4}
-          text={content}
-          truncate={props.truncate}
-      />
-    )
-    if (props.truncate) {
-      return (
-        <Tooltip
-            interaction
-            placement="top"
-            position="fixed"
-            text={content}
-        >
-          {titleComponent}
-        </Tooltip>
-      )
-    }
-    return titleComponent
-  }
-
   return (
     <div className={css}
         id={id}
@@ -102,7 +77,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -113,7 +93,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -128,10 +113,22 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          {renderTitle(text, "pb_form_pill_tag")}
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+              truncate={props.truncate}
+          />
         </>
       )}
-      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
+      {(!name && !icon && text) && (
+        <Title
+            className="pb_form_pill_tag"
+            size={4}
+            text={text}
+            truncate={props.truncate}
+        />
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -146,5 +143,4 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
-
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,30 +13,7 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Truncation Within Typeahead",
+    label: "Names",
     pills: true,
     truncate: 1,
 }) %>
-
-<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
-<%= pb_rails("card", props: { max_width: "xs" })  do %>
-  <%= pb_rails("form_pill", props: {
-      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      tabindex: 0,
-      truncate: 1,
-      id: "truncation-1"
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      icon: "badge-check",
-      text: "icon and a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-      id: "truncation-2"
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      text: "form pill long tag no tooltip show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Truncation Within Typeahead"
+          label="Names"
           options={names}
           truncate={1}
           {...props}
       />
-      <Caption text="Form Pill Truncation"/>
-      <Card maxWidth="xs">
-        <FormPill
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
-            onClick={() => alert('Click!')}
-            tabIndex={0}
-            truncate={1}
-        />
-        <FormPill
-            icon="badge-check"
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="icon and a very long tag to show truncation"
-            truncate={1}
-        />
-        <FormPill
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="form pill with a very long tag to show truncation"
-            truncate={1}
-        />
-      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -0,0 +1 @@
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,57 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <% if object.truncate %>
-      <div>
-        <%= pb_rails("title", props: { 
-          classname: "pb_form_pill_text truncate_#{object.truncate}",
-          id: object.id,
-          size: 4, 
-          text: object.name,
-        }) %>
-        <% if object.id.present? %>
-          <%= pb_rails("tooltip", props: {
-            position: "top",
-            tooltip_id: "tooltip-#{object.id}",
-            trigger_element_selector: "##{object.id}"
-          }) do %>
-            <%= object.name %>
-          <% end %>
-        <% end %>
-      </div>
-    <% else %>
-      <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
-    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-    <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-    <% end %>
-    <% if object.truncate %>
-      <div>
-        <%= pb_rails("title", props: { 
-          classname: "pb_form_pill_tag truncate_#{object.truncate}",
-          id: object.id,
-          size: 4, 
-          text: object.text,
-        }) %>
-        <% if object.id.present? %>
-          <%= pb_rails("tooltip", props: {
-            position: "top",
-            tooltip_id: "tooltip-#{object.id}",
-            trigger_element_selector: "##{object.id}"
-          }) do %>
-            <%= object.text %>
-          <% end %>
-        <% end %>
-      </div>
-    <% else %>
-      <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
-    <% end %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,24 +10,6 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
-$pb_selectable_space_classes: (
-  xxs: $space_xxs,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-$pb_selectable_paddings: (
-  p: "padding",
-  pr: "padding-right",
-  pl: "padding-left",
-  pt: "padding-top",
-  pb: "padding-bottom",
-  px: ("padding-left", "padding-right"),
-  py: ("padding-top", "padding-bottom")
-);
-
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
 
         position: relative;
         @include pb_card_selected;
-        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
           background-color: $royal;
         }
       }
-
-      // Selected card has 1px more border
-      // Remove 1px so content does not "jump"
-      @each $position_name,
-      $position in $pb_selectable_paddings {
-        @each $space_name,
-        $space in $pb_selectable_space_classes {
-          ~ label.#{$position_name}_#{$space_name} {
-            @if type-of($position)=="list" {
-              @each $coordinate in $position {
-                #{$coordinate}: calc(#{$space} - 1px) !important;
-              }
-            }
-
-            @else {
-              #{$position}: calc(#{$space} - 1px) !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.display_input {
-    input[type="checkbox"],
-    input[type="radio"] {
-      &:checked {
-        ~label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-
-      }
-    }
-
-    > label {
-      outline: 1px solid transparent;
-      padding: $space_sm;
-    }
-
-    &.dark {
-      input[type="checkbox"],
-      input[type="radio"] {
-        &:checked ~ label {
-          border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
-        }
-      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -67,7 +67,6 @@ const SelectableCard = (props: SelectableCardProps) => {
       'disabled': disabled,
       'enabled': !disabled,
     }),
-  variant === 'displayInput' ? 'display_input' : '',
   { error },
   dark ? 'dark' : '',
   className

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,10 +79,6 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
-
-      def display_input_class
-        variant == "display_input" ? " display_input" : ""
-      end
     end
   end
 end

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

@@ -1,15 +1,12 @@
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps"
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 
-import TimelineLabel from './subcomponents/Label'
-import TimelineStep from './subcomponents/Step'
-import TimelineDetail from './subcomponents/Detail'
-
 type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
@@ -20,13 +17,6 @@ type ItemProps = {
   lineStyle?: 'solid' | 'dotted',
 } & GlobalProps
 
-function isElementOfType<P>(
-  element: React.ReactNode,
-  component: React.ComponentType<P>
-): element is React.ReactElement<P> {
-  return React.isValidElement<P>(element) && element.type === component
-}
-
 const TimelineItem = ({
   className,
   children,
@@ -41,57 +31,31 @@ const TimelineItem = ({
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const childrenArray = React.Children.toArray(children)
-
-  const labelChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
-  )
-
-  const stepChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
-  )
-
-  const detailChild = childrenArray.find(
-    (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
-  )
-
-  const otherChildren = childrenArray.filter(
-    (child) =>
-      !isElementOfType(child, TimelineLabel) &&
-      !isElementOfType(child, TimelineStep) &&
-      !isElementOfType(child, TimelineDetail)
-  )
-
   return (
-    <div
+    <div 
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-        {labelChild || (
-          <div className="pb_timeline_item_left_block">
-            {date && (
-              <DateStacked
-                  align="center"
-                  date={date}
-                  size="sm"
-              />
-            )}
-          </div>
-        )}
-        {stepChild || (
-          <div className="pb_timeline_item_step">
-            <IconCircle icon={icon}
-                size="xs"
-                variant={iconColor}
-            />
-            <div className="pb_timeline_item_connector" />
-          </div>
-        )}
-        {detailChild || (
-          <div className="pb_timeline_item_right_block">
-           { otherChildren }
-          </div>
-        )}
+      <div className="pb_timeline_item_left_block">
+        {date &&
+          <DateStacked
+              align="center"
+              date={date}
+              size="sm"
+          />
+        }
+      </div>
+      <div className="pb_timeline_item_step">
+        <IconCircle
+            icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+        <div className="pb_timeline_item_connector" />
+      </div>
+      <div className="pb_timeline_item_right_block">
+        {children}
+      </div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -5,11 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
-import {
-  TimelineStep,
-  TimelineLabel,
-  TimelineDetail,
-} from './subcomponents'
 
 type TimelineProps = {
   aria?: { [key: string]: string },
@@ -52,8 +47,5 @@ const Timeline = ({
 }
 
 Timeline.Item = TimelineItem
-Timeline.Step = TimelineStep
-Timeline.Label = TimelineLabel
-Timeline.Detail = TimelineDetail
 
 export default Timeline

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

@@ -4,11 +4,10 @@ examples:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
   
   
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
+  

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

@@ -1,4 +1,3 @@
 export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
-export { default as TimelineWithChildren } from './_timeline_with_children.jsx'

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

@@ -1,21 +1,25 @@
 <%= pb_content_tag do %>
-  <% if label %>
-    <%= label %>
-  <% else %>
-    <%= pb_rails("timeline/label", props: { date: date }) %>
-  <% end %>
 
-  <% if step %>
-    <%= step %>
-  <% else %>
-    <%= pb_rails("timeline/step", props: { icon: icon, icon_color: icon_color }) %>
-  <% end %>
-
-  <% if detail%>
-    <%= detail%>
-  <% else %>
-    <%= pb_rails("timeline/detail") do %>
-      <%= content %>
+  <div class="pb_timeline_item_left_block">
+    <% if object.date.present? %>
+      <%= pb_rails("date_stacked", props: {
+        date: object.date,
+        size: "sm",
+        align: "center"
+      }) %>
     <% end %>
-  <% end %>
+  </div>
+
+  <div class="pb_timeline_item_step">
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %>
+    <div class="pb_timeline_item_connector"></div>
+  </div>
+
+  <div class="pb_timeline_item_right_block">
+    <%= content.presence %>
+  </div>
 <% end %>

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

@@ -13,10 +13,6 @@ module Playbook
                         values: %w[solid dotted],
                         default: "solid"
 
-      renders_one :label
-      renders_one :step
-      renders_one :detail
-
       def classname
         generate_classname("pb_timeline_item_kit", line_style)
       end