playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

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

@@ -5,19 +5,21 @@ const RadioDefault = () => {
   return (
     <div>
       <Radio
+          defaultChecked
           label="Power"
           name="Group2"
           value="Power"
       />
       <br />
       <Radio
-          checked
+          defaultChecked={false}
           label="Nitro"
           name="Group2"
           value="Nitro"
       />
       <br />
       <Radio
+          defaultChecked={false}
           label="Google"
           name="Group2"
           value="Google"

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

@@ -13,8 +13,6 @@ module Playbook
 
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
       prop :name, type: Playbook::Props::String,
@@ -23,9 +21,9 @@ module Playbook
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
-      prop :object
+
       def classname
-        generate_classname("pb_radio_kit", dark_class) + error_class
+        generate_classname("pb_radio_kit") + error_class
       end
 
       def input
@@ -45,10 +43,6 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_select/_select.html.erb

@@ -4,13 +4,13 @@
   class: object.classname) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark, }) %>
+      <%= pb_rails("caption", props: { text: object.label }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(
         object.name,
@@ -28,7 +28,7 @@
         include_blank: object.include_blank,
       )
       %>
-      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
     <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
   </label>

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

@@ -29,7 +29,6 @@ type SelectProps = {
   blankSelection?: string,
   children?: React.Node,
   className?: string,
-  dark?: boolean,
   data?: object,
   disabled?: boolean,
   error?: string,
@@ -58,7 +57,7 @@ const Select = ({
   aria = {},
   blankSelection,
   children,
-  dark = false,
+  className,
   data = {},
   disabled = false,
   error,
@@ -71,17 +70,18 @@ const Select = ({
   value,
   ...props
 }: SelectProps) => {
-  const errorClass = error ? ' error' : ''
-  const css = classnames(buildCss('pb_select', { dark }) + errorClass, globalProps(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
+  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
+  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classes}
     >
       <If condition={label}>
         <label
@@ -89,13 +89,12 @@ const Select = ({
             htmlFor={name}
         >
           <Caption
-              dark={dark}
               text={label}
           />
         </label>
       </If>
       <label
-          className="pb_select_kit_wrapper"
+          className={selectWrapperClass}
           htmlFor={name}
       >
         <If condition={children}>
@@ -119,7 +118,6 @@ const Select = ({
         </If>
         <If condition={error}>
           <Body
-              dark={dark}
               status="negative"
               text={error}
           />

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

@@ -53,7 +53,7 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &[class*=_dark] {
+  &.dark {
     select {
       @include pb_textarea_dark;
       @include pb_title_4;

data/app/pb_kits/playbook/pb_select/select.rb

@@ -12,7 +12,6 @@ module Playbook
       partial "pb_select/select"
 
       prop :blank_selection
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error
       prop :include_blank
@@ -24,7 +23,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select", dark_class)
+        generate_classname("pb_select")
       end
 
       def select_wrapper_class
@@ -58,10 +57,6 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
-
-      def dark_class
-        dark ? "dark" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -54,8 +54,8 @@ const SelectableCard = ({
   const classes = classnames(buildCss('pb_selectable_card_kit',
     { 'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled },
-    className), globalProps(props))
+      'enabled': !disabled }),
+  globalProps(props), className)
 
   const displayIcon = () => {
     if (icon === true) {

data/app/pb_kits/playbook/pb_table/_table.html.erb

@@ -1,8 +1,9 @@
 <%= content_tag(:div) do %>
   <%= content_tag(:table,
-      id: object.id,
+      aria: object.aria,
+      class: object.classname,
       data: object.data,
-      class: object.classname) do %>
+      id: object.id) do %>
     <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -2,15 +2,19 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableProps = {
+  aria?: object,
   children: array<Node> | Node,
   className: string,
   container: boolean,
-  dark: boolean,
+  dark?: boolean,
+  data?: object,
   dataTable: boolean,
   disableHover: boolean,
+  id?: string,
   responsive: "collapse" | "scroll" | "none",
   singleLine: boolean,
   size: "sm" | "md" | "lg",
@@ -18,19 +22,27 @@ type TableProps = {
 
 const Table = (props: TableProps) => {
   const {
+    aria = {},
     children,
     className,
     container = true,
-    dark = false,
+    dark,
+    data = {},
     dataTable = false,
     disableHover = false,
+    id,
     responsive = 'collapse',
     singleLine = false,
     size = 'sm',
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
   return (
     <table
+        {...ariaProps}
+        {...dataProps}
         className={classnames(
         className,
         'pb_table',
@@ -45,6 +57,7 @@ const Table = (props: TableProps) => {
         },
         globalProps(props)
       )}
+        id={id}
     >
       {children}
     </table>

data/app/pb_kits/playbook/pb_table/_table_row.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:tr,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -1,23 +1,41 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TableRowPropTypes = {
+  aria?: object,
   children: array<React.ReactNode> | React.ReactNode,
   className: string,
+  data?: object,
+  id?: string,
   sideHighlightColor: string,
 }
 
 const TableRow = (props: TableRowPropTypes) => {
-  const { children, className, sideHighlightColor = 'windows' } = props
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+    sideHighlightColor = 'windows',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const sideHighlightClass =
     sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
-  const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
+  const classes = classnames(buildCss('pb_table_row_kit', sideHighlightClass), globalProps(props), className)
 
   return (
-    <tr className={classnames(tableRowCss, className, globalProps(props))}>
+    <tr
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       {children}
     </tr>
   )

data/app/pb_kits/playbook/pb_table/table.rb

@@ -12,8 +12,6 @@ module Playbook
                   default: "md"
       prop :single_line, type: Playbook::Props::Boolean,
                          default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
       prop :disable_hover, type: Playbook::Props::Boolean,
                            default: false
       prop :data_table, type: Playbook::Props::Boolean,
@@ -35,9 +33,9 @@ module Playbook
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
+      def dark_class	
+        dark ? "table-dark" : nil	
+      end	
 
       def data_table_class
         data_table ? "data_table" : nil

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb

@@ -16,6 +16,7 @@
       <%= tag(:input,
           class: "text_input",
           data: object.validation_data,
+          disabled: object.disabled,
           id: object.id,
           name: object.name,
           pattern: object.validation_pattern,

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -12,14 +12,15 @@ import {
 type TextInputProps = {
   aria?: object,
   className: string,
-  dark: boolean,
   data?: object,
+  disabled?: boolean,
   error?: string,
   id?: string,
   name: string,
   label: string,
   onChange: (String) => void,
   placeholder: string,
+  required?: boolean,
   type: string,
   value: string | number,
   children: Node,
@@ -28,14 +29,15 @@ type TextInputProps = {
 const TextInput = ({
   aria = {},
   className,
-  dark = false,
   data = {},
+  disabled,
   error,
   id,
   name,
   label,
   onChange = () => {},
   placeholder,
+  required,
   type = 'text',
   value,
   children = null,
@@ -44,9 +46,10 @@ const TextInput = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
-    `pb_text_input_kit${dark === true ? '_dark' : ''}`,
+    'pb_text_input_kit',
     className,
     error ? 'error' : null,
+    globalProps(props),
   ])
 
   return (
@@ -57,26 +60,26 @@ const TextInput = ({
     >
       <Caption
           className="pb_text_input_kit_label"
-          dark={dark}
           text={label}
       />
-      <div className={classnames('text_input_wrapper', globalProps(props))}>
+      <div className="text_input_wrapper">
         <If condition={children}>
           {children}
           <Else />
           <input
               {...props}
               className="text_input"
+              disabled={disabled}
               id={id}
               name={name}
               onChange={onChange}
               placeholder={placeholder}
+              required={required}
               type={type}
               value={value}
           />
           <If condition={error}>
             <Body
-                dark={dark}
                 status="negative"
                 text={error}
             />

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -17,7 +17,7 @@
       @include pb_body_light;
     }
 
-    > input:first-child {
+    input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
@@ -30,7 +30,7 @@
     }
   }
 
-  &[class*=_dark] {
+  &.dark {
     .text_input_wrapper {
       margin-bottom: 1rem;
 
@@ -38,7 +38,7 @@
         @include pb_body_light_dark;
       }
 
-      > input:first-child {
+      input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
@@ -54,7 +54,7 @@
 
     &.error {
       .text_input_wrapper {
-        > input:first-child {
+        input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +66,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      > input:first-child {
+      input {
         border-color: $error;
       }
     }