playbook_ui 9.11.0 → 9.14.1.alpha.radio.alignment

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_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_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

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

@@ -7,6 +7,8 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
   react:
@@ -16,4 +18,6 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview

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

@@ -4,4 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
+export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -6,11 +6,16 @@ module Playbook
       prop :focus, type: Playbook::Props::Boolean,
                    default: false
 
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
+
       prop :simple, type: Playbook::Props::Boolean,
                     default: false
 
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
+      prop :toolbar_bottom, type: Playbook::Props::Boolean,
+                            default: false
 
       prop :value
       prop :template
@@ -35,10 +40,12 @@ module Playbook
       def rich_text_options
         {
           id: id,
+          inline: inline,
           className: classname,
           focus: focus,
           simple: simple,
           sticky: sticky,
+          toolbarBottom: toolbar_bottom,
           value: value,
           template: template,
           placeholder: placeholder,