RubyGems - playbook_ui - Versions diffs - 9.6.1 → 9.9.0.alpha.inline1 - Mend

playbook_ui 9.6.1 → 9.9.0.alpha.inline1

Files changed (82) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ef80e99bb70a0a7346f50ffc0761b136be7db6bbca0dee07ff4a5cb57f3b777
-  data.tar.gz: bb29fb62353081daa6404847ef516d8069f5ea058722002fb1c4b4b392c27e39
+  metadata.gz: aad061e395898f02d246cad01fc3ca3c158c910c058c546fdff62258f99ceced
+  data.tar.gz: fb468e1242133f77abb769f74805a44c6a3caa88fb40dd10cf48791b98683466
 SHA512:
-  metadata.gz: 3358c2044123dbade10b6cf2514091030618459e77cc20e35141b33a10216e660d8a3e30fd033a28c391fae76e125f045d170dc694657cd7c32e8c2d96ee9b9e
-  data.tar.gz: e29867a0cce06fd7c726fb5ae2033287392f94689e1adc7480ad1416e04136e67fd290102f0c712dfc26184fe326c3709dcf266119b1d96ea10d9fcca0d6fb29
+  metadata.gz: e23d91eb54be1797a2cfb44c35941b3c0302d7bb02cb880ee61a21710a540014a0c4a0bc9b82c3b09d47d38d0b030a702f33a2d3b54fdf0ceec805d674958545
+  data.tar.gz: e04139cbbbf7a5e9b93e47ec464583715fae88a10463047c08da99ffae60986832117ae533c880de82cf54989bfe2914191dc1d87cf37763f8426c2bca571662

data/app/pb_kits/playbook/pb_badge/_badge.jsx CHANGED Viewed

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        {text}
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED Viewed

@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
         <Else />
         <>
           <If condition={showIcon}>
-            <Body
+            <Caption
                 className="pb_icon_kit_container"
-                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
+                  size="xs"
               />
-            </Body>
+            </Caption>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

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

@@ -39,11 +39,10 @@
     <!-- icon -->
     <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
+      <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb CHANGED Viewed

@@ -1,4 +1,12 @@
 <div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    size: "sm"
+  }) %>
+  <br>
   <%= pb_rails("date", props: {
     date: DateTime.now,
   }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
 const DateVariants = (props) => {
   return (
     <div>
+      <FormattedDate
+          showIcon
+          size="sm"
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
       <FormattedDate
           value="1995-12-25"
           {...props}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx CHANGED Viewed

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js CHANGED Viewed

@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
+  // Fix event bubbling bug on wrapper
+  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 export default datePickerHelper

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb CHANGED Viewed

@@ -1,31 +1,30 @@
 # frozen_string_literal: true
 module Playbook
-    module PbDialog
-      class DialogHeader
-        include Playbook::Props
-        partial "pb_dialog/child_kits/dialog_header"
+  module PbDialog
+    class DialogHeader
+      include Playbook::Props
-        prop :closeable, type: Playbook::Props::Boolean, default: true
-        prop :padding
-        prop :separator, type: Playbook::Props::Boolean, default: true
-        prop :spacing
-        prop :text
-        prop :title
-        def dialog_header_options
-          {
-            id: id,
-            closeable: closeable,
-            padding: padding,
-            separator: separator,
-            spacing: spacing,
-            text: text,
-            title: title,
-          }
-        end
+      partial "pb_dialog/child_kits/dialog_header"
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :padding
+      prop :separator, type: Playbook::Props::Boolean, default: true
+      prop :spacing
+      prop :text
+      prop :title
+      def dialog_header_options
+        {
+          id: id,
+          closeable: closeable,
+          padding: padding,
+          separator: separator,
+          spacing: spacing,
+          text: text,
+          title: title,
+        }
       end
     end
   end
+end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED Viewed

@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
   closeable?: boolean,
   data?: string,
   id?: string,
-  status?: "success" | "error" | "neutral" | "tip",
+  multiLine?: boolean,
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
 }
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, status = 'neutral', text } = props
+  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
+    { '_multi_line': multiLine },
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss CHANGED Viewed

@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
       .pb_icon {
         color: $white;
       }
+      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb CHANGED Viewed

@@ -1,4 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx CHANGED Viewed

@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
+          multiLine
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text="Scan to Assign Selected Items. Click here to generate report"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md CHANGED Viewed

@@ -1,2 +1,2 @@
-Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb CHANGED Viewed

@@ -7,6 +7,8 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :multi_line, type: Playbook::Props::Boolean,
+                       default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
@@ -18,6 +20,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
+      def multi_line_class
+        multi_line.present? ? "multi_line" : nil
+      end
       def icon_value
         case status
         when "success"
@@ -32,7 +38,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx CHANGED Viewed

@@ -10,6 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
+  fullWidth?: boolean,
   id?: string,
 }
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
     aria = {},
     className,
     data = {},
+    fullWidth = false,
     id,
     children,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
   return (
     <div

data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED Viewed

@@ -4,6 +4,14 @@
   align-items: flex-end;
   justify-content: flex-start;
+  &[class*=_full] {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+    }
+  }
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.