playbook_ui 9.14.1.alpha.highcharts9 → 9.14.1.alpha.radio.alignment

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 302b8076ceb084d02f4d81d43be02e350a68ccf8778631b7fc8c400225ec22e4
-  data.tar.gz: 4391b64b9bab485e4cba1337b71a39af28bfab57c36b962284f80efc4de2850e
+  metadata.gz: 5e08eae10f004ec81d07fd357b310852d1dc8de8de4c0732836b9df38437fb20
+  data.tar.gz: 74d7d8c6ec38282118b1d0bc2894b1fe09e75dc3dddf86df41a479b440069958
 SHA512:
-  metadata.gz: b380585499868dc1a5bc1a99d2ec6884c66e6de4ff565562eb955a82e24ea976658efd5333f60e51681275882c5cf9106ba972d7af8e7721353bbe67f2bdde85
-  data.tar.gz: aa300d2ed023130ecb4da83bf87ce3e72f3ec26ee29006adf190e2ec8127fce98dbe87fb69591e287961b3814981cd1e3091caafdc51ffa5bb1a9bfdb92d2e7d
+  metadata.gz: 59b7d3d14fd1f7f705793552ff6484f8726e0e0fbc70b0caeae9c78886856e84ddb701bebf8ef05f2f87762c7461fdb0e49690e226504971f81ff289c075f9f1
+  data.tar.gz: d50354e9536aba0c40f449c5b6dd3b1bd50d27da181c961ecfc6fb074690a6740dd89d25c9a7fc903969f369a174dc43b066d224cdff637b040d96d94d1a3f33

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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "9.14.1"
-  VERSION = "9.14.1.alpha.highcharts9"
+  PREVIOUS_VERSION = "9.13.0"
+  VERSION = "9.14.1.alpha.radio.alignment"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.14.1.alpha.highcharts9
+  version: 9.14.1.alpha.radio.alignment
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-13 00:00:00.000000000 Z
+date: 2021-05-17 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
@@ -2172,8 +2174,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Playbook Design System