playbook_ui 9.10.0 → 9.14.1

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

@@ -1,12 +1,11 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+}) %>
 
-   }) %>
-
-<br>
-<br>
+<br />
+<br />
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   }) %>
+}) %>

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

@@ -8,18 +8,14 @@ const FormPillDefault = (props) => {
       <FormPill
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
     </div>

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
 
 
   react:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag

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

@@ -1,2 +1,3 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
+export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'

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

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname + object.size_class) do %>
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_url
       prop :name
       prop :text
+      prop :size
 
       def classname
         generate_classname("pb_form_pill_kit", "primary", name, text)
@@ -14,6 +15,10 @@ module Playbook
       def display_text
         name.downcase
       end
+
+      def size_class
+        size == "small" ? " small" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -24,7 +24,6 @@ module Playbook
 
       prop :value, type: Playbook::Props::Numeric
 
-
       def classname
         generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -16,7 +16,7 @@
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     height: $stacked_size;
     width: $stacked_size;
       &.dark {
@@ -41,13 +41,17 @@
       height: $container_size;
     }
   }
-  .second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: 2;
     background: tint($primary, 90%);
     border-radius: $border_rad_mega;
+    padding: 0;
+    span {
+      transform: translateY(0);
+    }
     .avatar_wrapper {
       border: $border_size solid $white;
       height: $stacked_size;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -7,7 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'
-import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+import { Body, Caption, CircleIconButton, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
 
 type PassphraseProps = {
   aria?: object,
@@ -69,6 +69,10 @@ const Passphrase = (props: PassphraseProps) => {
 
   const [showPopover, setShowPopover] = useState(false)
   const toggleShowPopover = () => setShowPopover(!showPopover)
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
   const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
 
@@ -85,7 +89,7 @@ const Passphrase = (props: PassphraseProps) => {
   }, [strength])
 
   const tipClass = classnames(
-    (dark ? 'dark' : null),
+    'passphrase-popover',
     (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
   )
   const dataProps = useMemo(
@@ -94,17 +98,13 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   const popoverReference = (
-    <a
+    <CircleIconButton
         className={tipClass}
+        dark={dark}
+        icon="info-circle"
         onClick={toggleShowPopover}
-    >
-      <Icon
-          dark={dark}
-          icon="info-circle"
-          size="xs"
-          variant="link"
-      />
-    </a>
+        variant="link"
+    />
   )
 
   return (
@@ -122,8 +122,11 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
+                className="passphrase-tips"
+                closeOnClick="outside"
                 placement="right"
                 reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
               <Flex

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -9,20 +9,13 @@
     display: inline;
   }
 
-  a.dark {
-    color: $white;
+  [class*=show-below-] {
+    display: none;
   }
-
-  a {
-
-    &[class*=show-below-] {
-      display: none;
-    }
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &.show-below-#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          display: inline;
-        }
+  @each $breakpoint_name, $breakpoint in $breakpoints {
+    .show-below-#{$breakpoint_name} {
+      @include break_at($breakpoint) {
+        display: inline;
       }
     }
   }
@@ -70,4 +63,16 @@
       visibility: hidden;
     }
   }
+  .passphrase-popover {
+    position: relative;
+    left: -($space_xs * 1.25);
+  }
+  @-moz-document url-prefix() {
+    .passphrase-popover {
+      position: relative;
+      top: $space_sm;
+      left: -($space_xs * 1.5);
+    }
+  }
 }
+

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -40,6 +40,7 @@ const Pill = (props: PillProps) => {
       <Title
           className="pb_pill_text"
           size={4}
+          tag="div"
           text={text}
       />
     </div>

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= pb_rails("title", props: { text: object.display_text, size: 4, classname: "pb_pill_text" }) %>
+  <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -23,11 +23,12 @@ module Playbook
       end
 
       def active_step(step)
-         step <= active ? "_active" : "_inactive"
+        step <= active ? "_active" : "_inactive"
       end
 
       def aria_attributes
         return aria if aria.present?
+
         { hidden: true }
       end
 

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :show_icon, type: Playbook::Props::Boolean,
-                  default: false
+                       default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :icon, required: false, default: "check"
 
       def name_icon
-        icon ? icon : "check"
+        icon || "check"
       end
 
       def classname

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -9,10 +9,12 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type RichTextEditorProps = {
   aria?: object,
+  toolbarBottom?: Boolean,
   className?: string,
   data?: object,
   focus?: boolean,
   id?: string,
+  inline?: boolean,
   name?: string,
   onChange: (string) => void,
   placeholder?: string,
@@ -25,10 +27,12 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    toolbarBottom = false,
     className,
     data = {},
     focus = false,
     id,
+    inline = false,
     name,
     onChange,
     placeholder,
@@ -77,6 +81,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         blockCodeButton.hidden = type == 'inline'
         inlineCodeButton.hidden = type == 'block'
       })
+
+      if (toolbarBottom) editor.element.after(toolbarElement)
     })
 
     trixRef.current.addEventListener('trix-change', (event) => {
@@ -103,6 +109,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''
   const StickyClass = sticky ? 'sticky' : ''
+  const InlineClass = inline ? 'inline' : ''
+  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
   const css = classnames(globalProps(props), className)
 
   return (
@@ -114,6 +122,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         SimpleClass,
         FocusClass,
         StickyClass,
+        InlineClass,
+        ToolbarBottomClass,
         css
       )}
     >

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
+@import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
 
@@ -228,4 +229,64 @@
       color: $white;
     }
   }
+  &.toolbar-bottom {
+    trix-editor {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      &:empty:not(:focus)::before {
+        color: $neutral !important;
+      }
+    }
+    trix-toolbar .trix-button-row {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom: 1px solid $border_light;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+    trix-toolbar {
+      display: grid;
+    }
+    &:focus, &:focus-within {
+      trix-toolbar .trix-button-row {
+        @include transition_default;
+        border-color: $primary;
+      }
+    }
+  }
+  &.inline {
+    &:hover {
+      trix-editor {
+        @include transition_default;
+        border-color: $border_light;
+        background-color: $white;
+        &+ trix-toolbar .trix-button-row {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+    trix-editor {
+      @include transition_default;
+      border-color: transparent;
+      background-color: transparent;
+      &+ trix-toolbar .trix-button-row  {
+        transition: all 0.3s ease-in-out 0s;
+        opacity: 0;
+      }
+      &:focus {
+        @include transition_default;
+        border-color: $primary;
+        background-color: $focus_input_light;
+        &+ trix-toolbar .trix-button-row  {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "inline",
+  inline: true,
+  toolbar_bottom: true,
+  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorInline = (props) => (
+  <div>
+    <RichTextEditor
+        id="inline"
+        inline
+        toolbarBottom
+        value="Try hovering over this text. Then try modifying it or adding more of your own text."
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "toolbar-bottom",
+  toolbar_bottom: true
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorToolbarBottom = (props) => (
+  <div>
+    <RichTextEditor
+        id="bottom-toolbar"
+        toolbarBottom
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorToolbarBottom