playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

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

@@ -5,6 +5,8 @@ export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
 export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
+export { default as TableDark } from './_table_dark.jsx'
+export { default as TableContainerDark } from './_table_container_dark.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -19,16 +19,14 @@ $transition-speed: 0.2s;
             transition: all $transition-speed ease;
           }
 
-          @media (hover:hover) {
-            &:hover {
-              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
+          &:hover {
+            box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
 
-              td {
-                background: $white;
-                border-color: darken($border_light, 10%);
-                border-top-width: 1px;
-                border-top-color: transparent;
-              }
+            td {
+              background: $white;
+              border-color: darken($border_light, 10%);
+              border-top-width: 1px;
+              border-top-color: transparent;
             }
           }
         }
@@ -40,12 +38,11 @@ $transition-speed: 0.2s;
               border-top-color: $border_light;
               border-top-width: 1px;
             }
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-top-width: 1px;
-                  border-top-color: $border_light;
-                }
+
+            &:hover {
+              td {
+                border-top-width: 1px;
+                border-top-color: $border_light;
               }
             }
           }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -91,12 +91,10 @@
           }
         }
       }
-      @media (hover:hover) {
-        &:hover {
-          tbody {
-            tr {
-              box-shadow: 0 0 0 $white !important;
-            }
+      &:hover {
+        tbody {
+          tr {
+            box-shadow: 0 0 0 $white !important;
           }
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -42,12 +42,10 @@ $table-dark-card-bg: $bg_dark;
       &:not(.no-hover) {
         tbody {
           tr {
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-color: $border_dark !important;
-                  background: $bg_dark;
-                }
+            &:hover {
+              td {
+                border-color: $border_dark !important;
+                background: $bg_dark;
               }
             }
           }

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

@@ -12,6 +12,8 @@ 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,
@@ -34,7 +36,7 @@ module Playbook
     private
 
       def dark_class
-        dark ? "table-dark" : nil
+        dark ? "dark" : nil
       end
 
       def data_table_class

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

@@ -14,10 +14,8 @@
       <% end %>
     <% else %>
       <%= tag(:input,
-          autocomplete: object.autocomplete ? nil : "off",
           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,47 +12,41 @@ import {
 type TextInputProps = {
   aria?: object,
   className: string,
+  dark: boolean,
   data?: object,
-  dark?: boolean,
-  disabled?: boolean,
   error?: string,
   id?: string,
   name: string,
   label: string,
   onChange: (String) => void,
   placeholder: string,
-  required?: boolean,
   type: string,
   value: string | number,
   children: Node,
 }
 
-const TextInput = (props: TextInputProps) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    dark = false,
-    disabled,
-    error,
-    id,
-    name,
-    label,
-    onChange = () => {},
-    placeholder,
-    required,
-    type = 'text',
-    value,
-    children = null,
-  } = props
-
+const TextInput = ({
+  aria = {},
+  className,
+  dark = false,
+  data = {},
+  error,
+  id,
+  name,
+  label,
+  onChange = () => {},
+  placeholder,
+  type = 'text',
+  value,
+  children = null,
+  ...props
+}: TextInputProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
-    'pb_text_input_kit',
-    error ? 'error' : null,
-    globalProps(props),
+    `pb_text_input_kit${dark === true ? '_dark' : ''}`,
     className,
+    error ? 'error' : null,
   ])
 
   return (
@@ -66,24 +60,23 @@ const TextInput = (props: TextInputProps) => {
           dark={dark}
           text={label}
       />
-      <div className="text_input_wrapper">
+      <div className={classnames('text_input_wrapper', globalProps(props))}>
         <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

@@ -13,48 +13,39 @@
     margin-bottom: $space_sm;
     display: block;
 
-    input::placeholder,
-    .text_input .placeholder {
+    input::placeholder {
       @include pb_body_light;
     }
 
-    input,
-    .text_input {
+    > input:first-child {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
     }
 
-    input:focus,
-    .text_input:focus,
-    input:-webkit-autofill:focus,
-    .text_input:-webkit-autofill:focus {
+    input:focus, input:-webkit-autofill:focus {
       @include pb_textarea_focus;
       -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
       transition: background-color 5000s ease-in-out 0s;
     }
   }
 
-  &.dark {
+  &[class*=_dark] {
     .text_input_wrapper {
       margin-bottom: 1rem;
 
-      input::placeholder,
-      .text_input .placeholder {
+      input::placeholder {
         @include pb_body_light_dark;
       }
 
-      input, .text_input {
+      > input:first-child {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
         overflow: hidden;
       }
 
-      input:focus,
-      .text_input:focus,
-      input:-webkit-autofill:focus,
-      .text_input:-webkit-autofill:focus {
+      input:focus, input:-webkit-autofill:focus {
         @include pb_textarea_focus_dark;
         -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
         transition: background-color 5000s ease-in-out 0s;
@@ -63,7 +54,7 @@
 
     &.error {
       .text_input_wrapper {
-        input, .text_input {
+        > input:first-child {
           border-color: $error_dark;
         }
       }
@@ -75,7 +66,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input, .text_input {
+      > input:first-child {
         border-color: $error;
       }
     }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address", dark: true }) %>
+<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code", dark: true }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {
+  Caption,
+  TextInput,
+  Title,
+} from '../../'
+
+class TextInputDark extends React.Component {
+    state = {
+      firstName: '',
+    }
+
+    render() {
+      const handleOnChange = ({ target }) => this.setState({ firstName: target.value })
+
+      const {
+        firstName,
+      } = this.state
+
+      return (
+        <div>
+          <TextInput
+              dark
+              label="First Name"
+              placeholder="Enter first name"
+              value="Timothy Wenhold"
+          />
+          <TextInput
+              dark
+              label="Last Name"
+              placeholder="Enter last name"
+          />
+          <TextInput
+              dark
+              label="Phone Number"
+              placeholder="Enter phone number"
+              type="phone"
+          />
+          <TextInput
+              dark
+              label="Email Address"
+              placeholder="Enter email address"
+              type="email"
+          />
+          <TextInput
+              dark
+              label="Zip Code"
+              placeholder="Enter zip code"
+              type="number"
+          />
+
+          <br />
+          <br />
+
+          <Title dark>{'Event Handler Props'}</Title>
+
+          <br />
+          <Caption>{'onChange'}</Caption>
+
+          <br />
+
+          <TextInput
+              dark
+              label="First Name"
+              onChange={handleOnChange}
+              placeholder="Enter first name"
+              value={firstName}
+          />
+
+          <If condition={firstName !== ''}>
+            {`First name is: ${firstName}`}
+          </If>
+        </div>
+      )
+    }
+}
+
+export default TextInputDark

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("text_input", props: {
+  dark: true,
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  type: "email",
+  placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+  dark: true,
+  label: "Confirm Email Address",
+  type: "email",
+  placeholder: "Confirm email address"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {
+  TextInput,
+} from '../..'
+
+const TextInputDarkError = () => (
+  <div>
+    <TextInput
+        dark
+        error="Please enter a valid email address"
+        label="Email Address"
+        placeholder="Enter email address"
+        type="email"
+    />
+  </div>
+)
+
+export default TextInputDarkError

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

@@ -1,11 +1,14 @@
 examples:
   rails:
   - text_input_default: Default
+  - text_input_dark: Dark
   - text_input_error: With Error
+  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
-  - text_input_disabled: Disabled
   react:
   - text_input_default: Default
+  - text_input_dark: Dark
   - text_input_error: With Error
+  - text_input_dark_error: Dark With Error
   - text_input_custom: Custom
-  - text_input_disabled: Disabled
+

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

@@ -1,4 +1,5 @@
 export { default as TextInputDefault } from './_text_input_default.jsx'
+export { default as TextInputDark } from './_text_input_dark.jsx'
+export { default as TextInputDarkError } from './_text_input_dark_error.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
-export { default as TextInputDisabled } from './_text_input_disabled.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -7,8 +7,8 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
-      prop :autocomplete, type: Playbook::Props::Boolean,
-                          default: true
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error
@@ -23,7 +23,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_text_input_kit") + error_class
+        generate_classname("pb_text_input_kit", dark_class) + error_class
       end
 
       def validation_message
@@ -45,6 +45,10 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 end