RubyGems - playbook_ui - Versions diffs - 7.11.1 → 7.14.0.pre.alpha1 - Mend

playbook_ui 7.11.1 → 7.14.0.pre.alpha1

Files changed (466) hide show

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md ADDED Viewed

@@ -0,0 +1,7 @@
+##### Prop
+*ATTENTION* - the spacing prop will be deprecated & renamed in the future.
+* **Deprecated Prop**: `spacing` | **Type**: String | **Values**: none | around | evenly | between
+* **New Prop**: `justify` | **Type**: String | **Values**: none | around | evenly | between

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx CHANGED Viewed

@@ -1,21 +1,24 @@
 import React from 'react'
 import { Body, Flex, FlexItem, Title } from  '../..'
-const FlexWrap = () => {
+const FlexWrap = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Body
             text="Resize your browser"
+            {...props}
         />
         <Title
             size={4}
             text="Wrap"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             wrap
+            {...props}
         >
           <FlexItem fixedSize="300px">
             {'1'}
@@ -53,9 +56,10 @@ const FlexWrap = () => {
         <Title
             size={4}
             text="No Wrap"
+            {...props}
         />
         <br />
-        <Flex className="bg_light wide">
+        <Flex className="bg_light">
           <FlexItem fixedSize="300px">
             {'1'}
           </FlexItem>

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md ADDED Viewed

@@ -0,0 +1,5 @@
+##### Prop
+* `wrap` | **Type**: Boolean
+- When set to `true` this prop will move the next item in flex container to a new line if there is no more room.

data/app/pb_kits/playbook/pb_flex/docs/example.yml CHANGED Viewed

@@ -6,8 +6,11 @@ examples:
   - flex_reverse: Reverse
   - flex_wrap: Wrap
   - flex_spacing: Spacing
-  - flex_horizontal: Horizontal Alignment
-  - flex_vertical: Vertical Alignment
+  - flex_justify: Justify
+  - flex_align: Align
+  - flex_gap: Gap
+  - flex_item: Flex Item
   react:
@@ -16,5 +19,7 @@ examples:
   - flex_reverse: Reverse
   - flex_wrap: Wrap
   - flex_spacing: Spacing
-  - flex_horizontal: Horizontal Alignment
-  - flex_vertical: Vertical Alignment
+  - flex_justify: Justify
+  - flex_align: Align
+  - flex_gap: Gap
+  - flex_item_example: Flex Item

data/app/pb_kits/playbook/pb_flex/docs/index.js CHANGED Viewed

@@ -3,5 +3,7 @@ export { default as FlexInline } from './_flex_inline.jsx'
 export { default as FlexReverse } from './_flex_reverse.jsx'
 export { default as FlexWrap } from './_flex_wrap.jsx'
 export { default as FlexSpacing } from './_flex_spacing.jsx'
-export { default as FlexHorizontal } from './_flex_horizontal.jsx'
-export { default as FlexVertical } from './_flex_vertical.jsx'
+export { default as FlexJustify } from './_flex_justify.jsx'
+export { default as FlexAlign } from './_flex_align.jsx'
+export { default as FlexGap } from './_flex_gap.jsx'
+export { default as FlexItemExample } from './_flex_item_example.jsx'

data/app/pb_kits/playbook/pb_flex/flex.rb CHANGED Viewed

@@ -8,8 +8,13 @@ module Playbook
       partial "pb_flex/flex"
       prop :horizontal, type: Playbook::Props::Enum,
-                        values: %w[left center right stretch],
-                        default: "left"
+                        values: %w[left center right stretch none],
+                        default: "left",
+                        deprecated: true
+      prop :justify, type: Playbook::Props::Enum,
+                     values: %w[start center end stretch around between evenly none],
+                     default: "none"
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -20,14 +25,32 @@ module Playbook
       prop :spacing, type: Playbook::Props::Enum,
                      values: %w[around between evenly none],
+                     default: "none",
+                     deprecated: true
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg xl none],
+                 default: "none"
+      prop :row_gap, type: Playbook::Props::Enum,
+                     values: %w[xs sm md lg xl none],
                      default: "none"
+      prop :column_gap, type: Playbook::Props::Enum,
+                        values: %w[xs sm md lg xl none],
+                        default: "none"
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
       prop :vertical, type: Playbook::Props::Enum,
-                      values: %w[top center bottom stretch baseline],
-                      default: "top"
+                      values: %w[top center bottom stretch baseline none],
+                      default: "top",
+                      deprecated: true
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[start center end stretch baseline none],
+                   default: "none"
       prop :wrap, type: Playbook::Props::Boolean,
                   default: false
@@ -35,24 +58,36 @@ module Playbook
       def classname
         generate_classname("pb_flex_kit",
                            orientation_class,
-                           horizontal_class,
-                           vertical_class,
+                           justify_class,
+                           align_class,
                            inline_class,
+                           reverse_class,
                            wrap_class,
-                           spacing_class)
+                           spacing_class,
+                           gap_class,
+                           row_gap_class,
+                           column_gap_class)
       end
     private
       def orientation_class
-        "orientation_#{orientation}#{reverse_class}"
+        "orientation_#{orientation}"
       end
       def horizontal_class
         if orientation == "row"
-          "justify_content_#{horizontal}#{reverse_class}"
+          "justify_content_#{horizontal}"
         else
-          "align_items_#{horizontal}"
+          "align_items_#{horizontal}" if align == "none"
+        end
+      end
+      def justify_class
+        if justify == "none"
+          horizontal_class
+        else
+          "justify_content_#{justify}"
         end
       end
@@ -65,20 +100,52 @@ module Playbook
       end
       def reverse_class
-        reverse ? "_reverse" : nil
+        reverse ? "reverse" : nil
       end
       def vertical_class
         if orientation == "row"
           "align_items_#{vertical}"
         else
-          "justify_content_#{vertical}_#{reverse_class}"
+          "justify_content_#{vertical}" if justify == "none"
+        end
+      end
+      def align_class
+        if align == "none"
+          vertical_class
+        else
+          "align_items_#{align}"
         end
       end
       def wrap_class
         wrap ? "wrap" : nil
       end
+      def gap_class
+        if gap == "none"
+          nil
+        else
+          "gap_#{gap}"
+        end
+      end
+      def row_gap_class
+        if row_gap == "none"
+          nil
+        else
+          "rowGap_#{row_gap}"
+        end
+      end
+      def column_gap_class
+        if column_gap == "none"
+          nil
+        else
+          "columnGap_#{column_gap}"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_flex/flex_item.rb CHANGED Viewed

@@ -10,9 +10,14 @@ module Playbook
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false
+      prop :shrink, type: Playbook::Props::Boolean,
+                    default: false
+      prop :flex, type: Playbook::Props::Enum,
+                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
+                  default: "none"
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class)
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class)
       end
       def style_value
@@ -28,6 +33,18 @@ module Playbook
       def grow_class
         grow ? "grow" : nil
       end
+      def shrink_class
+        shrink ? "shrink" : nil
+      end
+      def flex_class
+        if flex == "none"
+          nil
+        else
+          "flex_#{flex}"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx CHANGED Viewed

@@ -14,9 +14,14 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl } = props
+  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
@@ -46,6 +51,7 @@ const FormPill = (props: FormPillProps) => {
       <div
           className="pb_form_pill_close"
           onClick={onClick}
+          {...closeProps}
       >
         <Icon
             fixedWidth

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED Viewed

@@ -18,6 +18,8 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  margin-bottom: 2px;
+  margin-top: 2px;
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import FormPill from '../_form_pill.jsx'
-const FormPillDefault = () => {
+const FormPillDefault = (props) => {
   return (
     <div>
       <FormPill
@@ -9,6 +9,7 @@ const FormPillDefault = () => {
 alert('Click!')
 }}
           text="this is a tag"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import FormPill from '../_form_pill.jsx'
-const FormPillDefault = () => {
+const FormPillDefault = (props) => {
   return (
     <div>
@@ -9,16 +9,18 @@ const FormPillDefault = () => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => {
-alert('Click!')
+ alert('Click!')
 }}
+          {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
           onClick={() => {
-alert('Click!')
+ alert('Click!')
 }}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx CHANGED Viewed

@@ -5,11 +5,12 @@ const data = [
   { name: 'Name', value: 45 },
 ]
-const GaugeDefault = () => (
+const GaugeDefault = (props) => (
   <div>
     <Gauge
         chartData={data}
         id="gauge-default"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx CHANGED Viewed

@@ -5,12 +5,13 @@ const data = [
   { name: 'Participants', value: 84 },
 ]
-const GaugeDisableAnimation = () => (
+const GaugeDisableAnimation = (props) => (
   <div>
     <Gauge
         chartData={data}
         disableAnimation
         id="gauge-disable-animation"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ const data = [
   { name: 'Capacity', value: 75 },
 ]
-const GaugeFullCircle = () => (
+const GaugeFullCircle = (props) => (
   <div>
     <Gauge
         chartData={data}
@@ -13,6 +13,7 @@ const GaugeFullCircle = () => (
         id="gauge-full-circle"
         suffix="%"
         title="Seating Capacity"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Gauge } from '../../'
-const GaugeHeight = () => (
+const GaugeHeight = (props) => (
   <div>
     <Gauge
         chartData={[ { name: 'Pixels', value: 400 } ]}
@@ -9,6 +9,7 @@ const GaugeHeight = () => (
         id="gauge-height-px"
         suffix="px"
         title="Fixed Height in Pixels"
+        {...props}
     />
     <Gauge
         chartData={[ { name: 'Percentage', value: 45 } ]}
@@ -16,6 +17,7 @@ const GaugeHeight = () => (
         id="gauge-height-percent"
         suffix="%"
         title="Height as Percentage of Width"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, Gauge } from '../../'
-const GaugeLiveData = () => {
+const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
@@ -24,14 +24,17 @@ const GaugeLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <Button
           onClick={updateName}
           text="Update Name"
+          {...props}
       />
       <Gauge
           chartData={[{ name: name, value: value }]}
           id="gauge-live-data"
+          {...props}
       />
     </div>
   )