playbook_ui 8.2.1.pre.alpha2 → 8.3.0.alpha.select.pre.margin

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -5,7 +5,7 @@ import {
   RichTextEditor,
 } from '../../'
 
-const RichTextEditorPreview = () => {
+const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
   const [previewText, setPreviewText] = useState(<div />)
 
@@ -19,6 +19,7 @@ const RichTextEditorPreview = () => {
       <RichTextEditor
           id="content-preview-editor"
           onChange={handleChange}
+          {...props}
       />
       <If condition={showPreview}>
         <Card marginTop="md">

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

@@ -37,6 +37,8 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   label?: string,
+  margin: string,
+  marginBottom: string,
   multiple?: boolean,
   name?: string,
   required?: boolean,
@@ -74,7 +76,14 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
-  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
+  const classes = classnames(
+    buildCss('pb_select'),
+    globalProps({
+      ...props,
+      marginBottom: props.marginBottom || props.margin || 'sm',
+    }),
+    className)
+
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
 
   return (

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

@@ -4,10 +4,11 @@
 @import "../tokens/colors";
 
 [class^=pb_select] {
-  margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
-    @include pb_title_4;
+    @include pb_body_light;
+    background: none;
+    background-color: $white;
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
@@ -17,11 +18,16 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    max-height: 45px;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;
       }
     }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
@@ -58,35 +64,36 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &.dark {
-    select {
-      @include pb_textarea_dark;
-      @include pb_title_4;
-      @include pb_title_dark;
-      background: $focus_input_dark;
-      box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      text-shadow: 0 0 0 $text_dk_default;
-      padding-right: $space_xl;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @media (hover:hover) {
-        &:hover, &:active, &:focus {
-          background-color: tint($focus_input_dark, 5%);
-        }
+}
+
+[class^=pb_select].dark {
+  select {
+    @include pb_textarea_dark;
+    @include pb_body_light_dark;
+    background: none;
+    background-color: rgba($white,.10);
+    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+    text-shadow: 0 0 0 $text_dk_default;
+    padding-right: $space_xl;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($white,.05);
       }
     }
-    .pb_select_kit_caret {
-      color: $white;
-    }
-    .pb_select_kit_wrapper {
-      &.error {
-        .pb_select_kit_wrapper {
-          > select:first-child {
-            border-color: $error_dark;
-          }
+  }
+  .pb_select_kit_caret {
+    color: $white;
+  }
+  .pb_select_kit_wrapper {
+    &.error {
+      .pb_select_kit_wrapper {
+        > select:first-child {
+          border-color: $error_dark;
         }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -4,7 +4,10 @@ import { Select } from '../../'
 const SelectCustomSelect = (props) => {
   return (
     <div>
-      <Select label="Favorite Holiday">
+      <Select
+          label="Favorite Holiday"
+          {...props}
+      >
         <select
             id="holiday"
             name="holiday"

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

@@ -17,13 +17,17 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select")
+        generate_classname("pb_select", select_margin_bottom, separator: " ")
       end
 
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end
 
+      def select_margin_bottom
+        margin.present? || margin_bottom.present? ? nil : "mb_sm"
+      end
+
       def options_to_array
         options.map { |option| [option[:value_text] || option[:value], option[:value]] }
       end

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

@@ -111,7 +111,7 @@ $pb_selectable_card_border: 2px;
     }
 
     .separator {
-      background: $bg_dark;
+      background: rgba($white,.1);
     }
 
     &.error {

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx

@@ -1,158 +1,168 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Body,
   SelectableCard,
   Title,
 } from '../../'
 
-class SelectableCardInput extends React.Component {
-  state = {
+const SelectableCardInput = (props) => {
+  const [state, setState] = useState({
     firstCheckbox: true,
     secondCheckbox: true,
     thirdCheckbox: false,
     forthCheckbox: false,
     radioSelected: 'first',
-  }
+  })
 
-  handleSelect = (event) => {
-    this.setState({
+  const handleSelect = (event) => {
+    setState({ ...state,
       [event.target.name]: event.target.checked,
     })
   }
 
-  handleRadioSelect = (event) => {
-    this.setState({
+  const handleRadioSelect = (event) => {
+    setState({
+      ...state,
       radioSelected: event.target.value,
     })
   }
 
-  render() {
-    return (
-      <>
-        <Title
-            size={3}
-            text="What programming languages do you know?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.firstCheckbox}
-            inputId="firstCheckbox"
-            name="firstCheckbox"
-            onChange={this.handleSelect}
-            value="firstCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Ruby'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.secondCheckbox}
-            inputId="secondCheckbox"
-            name="secondCheckbox"
-            onChange={this.handleSelect}
-            value="secondCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'JavaScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.thirdCheckbox}
-            inputId="thirdCheckbox"
-            name="thirdCheckbox"
-            onChange={this.handleSelect}
-            value="thirdCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'TypeScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.fourthCheckbox}
-            inputId="fourthCheckbox"
-            name="fourthCheckbox"
-            onChange={this.handleSelect}
-            value="fourthCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Swift'}</Body>
-        </SelectableCard>
-
-        <br />
-
-        <Title
-            size={3}
-            text="How likely are you to recommend Playbook to a friend?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'first'}
-            inputId="radio-1"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="first"
-            variant="displayInput"
-        >
-          <Body>{'5'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'second'}
-            inputId="radio-2"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="second"
-            variant="displayInput"
-        >
-          <Body>
-            {'4'}
-          </Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'third'}
-            inputId="radio-3"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="third"
-            variant="displayInput"
-        >
-          <Body>{'3'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fourth'}
-            inputId="radio-4"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fourth"
-            variant="displayInput"
-        >
-          <Body>{'2'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fifth'}
-            inputId="radio-5"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fifth"
-            variant="displayInput"
-        >
-          <Body>{'1'}</Body>
-        </SelectableCard>
-      </>
-    )
-  }
+  return (
+    <>
+      <Title
+          size={3}
+          text="What programming languages do you know?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.firstCheckbox}
+          inputId="firstCheckbox"
+          name="firstCheckbox"
+          onChange={handleSelect}
+          value="firstCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Ruby'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.secondCheckbox}
+          inputId="secondCheckbox"
+          name="secondCheckbox"
+          onChange={handleSelect}
+          value="secondCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'JavaScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.thirdCheckbox}
+          inputId="thirdCheckbox"
+          name="thirdCheckbox"
+          onChange={handleSelect}
+          value="thirdCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'TypeScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.fourthCheckbox}
+          inputId="fourthCheckbox"
+          name="fourthCheckbox"
+          onChange={handleSelect}
+          value="fourthCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Swift'}</Body>
+      </SelectableCard>
+
+      <br />
+
+      <Title
+          size={3}
+          text="How likely are you to recommend Playbook to a friend?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.radioSelected === 'first'}
+          inputId="radio-1"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="first"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'5'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'second'}
+          inputId="radio-2"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="second"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>
+          {'4'}
+        </Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'third'}
+          inputId="radio-3"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="third"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'3'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fourth'}
+          inputId="radio-4"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fourth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'2'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fifth'}
+          inputId="radio-5"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fifth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'1'}</Body>
+      </SelectableCard>
+    </>
+  )
 }
 
 export default SelectableCardInput