playbook_ui 9.13.0 → 9.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 454a36effc86e9d19eeb9e613a961a581d16ff491c2933cacffe0732669327f7
-  data.tar.gz: b3656b823c07b3f5b2653205d1a7a42165a86a9a429759b65ddc0e05a213850b
+  metadata.gz: 4f73f96d383b621029f03705eda9526b792525c8aea168dcaf9e5ec3170c7f50
+  data.tar.gz: 6546b6a6bcd6aa85f201911ec9b9172ec80fc074bf3ac08a5c56b7eba7e6b74f
 SHA512:
-  metadata.gz: 6d9eed8e5c343aae96350758b62eed4ddcf68f92c9df97909b6743eb74b66e9afbb0625642968f19335066a27ee38593be6e191e97ff5277ca33a690f3f2c4cf
-  data.tar.gz: 7c45e5fa6c94dbb0e3c7cdc36de9e2d9655511122309f46e2b45294697fe84d7b8af213adbb88e2bc45713319a1c4988cd8996df894c73341dd0de696427a513
+  metadata.gz: 114f54c49b9f01c16dc7391d592adb19b879ff941761948cfde8ec7e1b84ac04af269f785f26f4ac767d758a66d4fc10b2a5d85806d0ac22d79ffbacde83c0a3
+  data.tar.gz: 29ad7779088f7d8c3bb0f85accc2f136b3da76aeee2c634c9ad94bbd0be6b0256c2ab7eb9def98b5dd3df7a10d27a8d78181463f7721e5690404e54fe2a2d90a

data/app/pb_kits/playbook/data/menu.yml

@@ -1,6 +1,10 @@
 kits:
-  - avatar
-  - avatar_action_button
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
   - background
   - bread_crumbs
   - buttons:
@@ -19,7 +23,6 @@ kits:
   - dialog
   - filter
   - fixed_confirmation_toast
-  - flex
   - forms:
     - checkbox
     - date_picker
@@ -37,19 +40,19 @@ kits:
     - selectable_list
     - text_input
     - textarea
-    - typeahead
     - toggle
+    - typeahead
   - highlight
   - icon
   - icon_circle
   - icon_stat_value
   - icon_value
   - image
-  - layout
+  - layouts:
+    - flex
+    - layout
   - list
   - loading_inline
-  - multiple_users
-  - multiple_users_stacked
   - nav
   - tags:
     - badge
@@ -61,11 +64,22 @@ kits:
     - progress_simple
     - progress_step
   - section_separator
-  - source
   - star_rating
-  - stat_change
   - 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
@@ -75,26 +89,15 @@ kits:
     - contact
     - currency
     - dashboard_value
-    - date
-    - date_range_inline
-    - date_range_stacked
-    - date_stacked
-    - date_time
-    - date_time_stacked
-    - date_year_stacked
     - home_address_street
     - label_pill
     - label_value
     - message
     - person
     - person_contact
+    - source
+    - stat_change
     - stat_value
-    - time
-    - time_stacked
-    - timestamp
-    - time_range_inline
     - title_count
     - title_detail
-    - weekday_stacked
-  - user
   - user_badge

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -15,9 +15,9 @@
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
+  white-space: nowrap;
 
   span {
-    transform: translateY(1px);
     display: inline-block;
     font-size: $font_smaller - 1;
     font-weight: $bolder;

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

@@ -122,6 +122,7 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
+                className="passphrase-tips"
                 closeOnClick="outside"
                 placement="right"
                 reference={popoverReference}

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_radio/_radio.jsx

@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
   aria?: object,
+  alignment?: String,
   checked?: Boolean,
   children?: Node,
   className?: String,
@@ -25,6 +26,7 @@ type RadioProps = {
 
 const Radio = ({
   aria = {},
+  alignment = '',
   children,
   className,
   dark = false,
@@ -40,7 +42,7 @@ const Radio = ({
 }: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
+  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
 
   return (
     <label

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -38,6 +38,16 @@
       }
     }
   }
+
+  &.vertical {
+    flex-direction: column;
+    align-items: center;
+    .pb_radio_button {
+      margin-right: 0px;
+      margin-bottom: $space_xs;
+    }
+  }
+
   &.dark {
     .pb_radio_button {
       border-color: $border_dark;

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Power",
+    input_options: {
+      tabindex: 0
+    },
+    margin_right: "sm",
+    name: "group 1",
+    value: "Power"
+  }) %>
+
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Nitro",
+    margin_right: "sm",
+    name: "group 1",
+    value: "Nitro"
+  }) %>
+
+  <%= pb_rails("radio", props: {
+    alignment: "vertical",
+    text: "Google",
+    name: "group 1",
+    value: "Google"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Flex, Radio } from '../../'
+
+const RadioAlignment = () => {
+  return (
+    <Flex>
+      <Radio
+          alignment="vertical"
+          label="Power"
+          marginRight="sm"
+          name="Group2"
+          tabIndex={0}
+          value="Power"
+      />
+      <br />
+      <Radio
+          alignment="vertical"
+          defaultChecked={false}
+          label="Nitro"
+          marginRight="sm"
+          name="Group2"
+          value="Nitro"
+      />
+      <br />
+      <Radio
+          alignment="vertical"
+          defaultChecked={false}
+          label="Google"
+          name="Group2"
+          value="Google"
+      />
+    </Flex>
+  )
+}
+
+export default RadioAlignment

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

@@ -5,8 +5,10 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_options: With Options
+  - radio_alignment: Alignment
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
+  - radio_alignment: Alignment

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

@@ -1,3 +1,4 @@
 export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
+export { default as RadioAlignment } from './_radio_alignment.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -5,6 +5,8 @@ require "action_view"
 module Playbook
   module PbRadio
     class Radio < Playbook::KitBase
+      prop :alignment, type: Playbook::Props::String,
+                       default: ""
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :error, type: Playbook::Props::Boolean,
@@ -19,7 +21,7 @@ module Playbook
                    default: "radio_text"
 
       def classname
-        generate_classname("pb_radio_kit") + error_class
+        generate_classname("pb_radio_kit") + error_class + alignment_class
       end
 
       def selected
@@ -35,6 +37,10 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def alignment_class
+        alignment == "vertical" ? " vertical" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -126,17 +126,17 @@ const Select = ({
             {optionsList}
           </select>
         </If>
+        <Icon
+            className="pb_select_kit_caret"
+            fixedWidth
+            icon="angle-down"
+        />
         <If condition={error}>
           <Body
               status="negative"
               text={error}
           />
         </If>
-        <Icon
-            className="pb_select_kit_caret"
-            fixedWidth
-            icon="angle-down"
-        />
       </label>
     </div>
   )

data/lib/playbook/version.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.13.0"
+  PREVIOUS_VERSION = "9.14.1"
+  VERSION = "9.15.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.13.0
+  version: 9.15.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-10 00:00:00.000000000 Z
+date: 2021-05-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1536,6 +1536,8 @@ files:
 - app/pb_kits/playbook/pb_radio/_radio.scss
 - app/pb_kits/playbook/pb_radio/docs/_description.md
 - app/pb_kits/playbook/pb_radio/docs/_footer.md
+- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
+- app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb