RubyGems - playbook_ui - Versions diffs - 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991 - Mend

playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991

Files changed (54) hide show

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+const SelectInlineShowArrow = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          showArrow
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+export default SelectInlineShowArrow

data/app/pb_kits/playbook/pb_select/docs/example.yml CHANGED Viewed

@@ -10,6 +10,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple

data/app/pb_kits/playbook/pb_select/docs/index.js CHANGED Viewed

@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'

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

@@ -19,10 +19,11 @@ module Playbook
       prop :name
       prop :onchange
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
+      prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
       def classnames
-        classname + inline_class + compact_class
+        classname + inline_class + compact_class + show_arrow_class
       end
       def all_attributes
@@ -49,6 +50,10 @@ module Playbook
         compact ? "compact" : ""
       end
+      def show_arrow_class
+        show_arrow ? "show_arrow" : ""
+      end
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
 }
-const SelectableCardIcon = (props: SelectableCardIconProps) => {
+const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
   const {
     aria = {},
     checkmark = false,
@@ -70,36 +70,37 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       <SelectableCard
-        checked={checked}
-        customIcon={customIcon}
-        dark={dark}
-        disabled={disabled}
-        icon={checkmark}
-        inputId={inputId}
-        multi={multi}
-        name={name}
-        onChange={onChange}
-        value={value}
+          checked={checked}
+          customIcon={customIcon}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
       >
         {
           <>
             <SelectableIcon
-              customIcon={customIcon}
-              icon={icon}
-              inputId={''}
-              inputs="disabled"
-              name={''}
-              text={titleText} />
+                customIcon={customIcon}
+                icon={icon}
+                inputId={''}
+                inputs="disabled"
+                name={''}
+                text={titleText}
+            />
             <Body
-              color="light"
-              dark={dark}
-              text={bodyText}
+                color="light"
+                dark={dark}
+                text={bodyText}
             />
           </>
         }

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx CHANGED Viewed

@@ -6,10 +6,11 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
+  buildHtmlProps
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 type SelectableIconProps = {
   aria?: {[key: string]: string},
@@ -17,7 +18,7 @@ type SelectableIconProps = {
   className?: string,
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
-  data?: Object,
+  data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon: string,
   inputId: string,
@@ -44,7 +45,7 @@ const SelectableIcon = ({
   text,
   value,
   ...props
-}: SelectableIconProps) => {
+}: SelectableIconProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,22 +65,22 @@ const SelectableIcon = ({
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
     >
       {inputs === 'disabled' && (
         <>
           <Icon
-            customIcon={customIcon}
-            icon={icon}
-            size="2x"
+              customIcon={customIcon}
+              icon={icon}
+              size="2x"
           />
           <Title
-            size={4}
-            tag="h4"
-            text={text}
+              size={4}
+              tag="h4"
+              text={text}
           />
         </>
       )}
@@ -87,24 +88,24 @@ const SelectableIcon = ({
       {inputs === 'enabled' && (
         <>
           <input
-            {...props}
-            checked={checked}
-            disabled={disabled}
-            id={inputIdPresent}
-            name={name}
-            type={inputType}
-            value={value}
+              {...props}
+              checked={checked}
+              disabled={disabled}
+              id={inputIdPresent}
+              name={name}
+              type={inputType}
+              value={value}
           />
           <label htmlFor={inputIdPresent}>
             <Icon
-              customIcon={customIcon}
-              icon={icon}
-              size="2x"
+                customIcon={customIcon}
+                icon={icon}
+                size="2x"
             />
             <Title
-              size={4}
-              tag="h4"
-              text={text}
+                size={4}
+                tag="h4"
+                text={text}
             />
           </label>
         </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx CHANGED Viewed

@@ -7,12 +7,13 @@ import { SelectableListItemProps } from './_item.js'
 import List from  '../pb_list/_list'
 import SelectableListItem from './_item'
+import { GenericObject } from '../types'
 type SelectableListProps = {
   aria?: {[key: string]: string },
   children?: React.ReactElement[],
   className?: string,
-  data?: object,
+  data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',

data/app/pb_kits/playbook/pb_source/_source.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ const Source = ({
   source,
   type = 'inbound',
   user = {},
-}: SourceProps) => {
+}: SourceProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
@@ -72,11 +72,11 @@ const Source = ({
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
+        id={id}
     >
       <div className="pb__source_layout">
@@ -84,13 +84,13 @@ const Source = ({
           <>
             {showIcon() &&
               <IconCircle
-                icon={typeIconNames[type]}
-                size="sm"
+                  icon={typeIconNames[type]}
+                  size="sm"
               />
             }
             {!showIcon() &&
               <Avatar
-                {...avatar()}
+                  {...avatar()}
               />
             }
           </>
@@ -98,20 +98,20 @@ const Source = ({
         <div className="pb__source_content">
           <Title
-            size={4}
-            tag="h4"
-            text={source}
+              size={4}
+              tag="h4"
+              text={source}
           />
           <div className="pb__source_value">
             <Body
-              color="light"
-              text={typeText()}
+                color="light"
+                text={typeText()}
             />
             {user.userId &&
               <Caption
-                text={user.userId}
+                  text={user.userId}
               />
             }
           </div>

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

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 [class^="pb_text_input_kit"] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx CHANGED Viewed

@@ -70,15 +70,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const shouldShowAddOn = icon !== null
   const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
   const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
-  const defaultMarginBottom = props.marginBottom ?? "mb_sm"
   const css = classnames([
     'pb_text_input_kit',
     inline ? 'inline' : "",
     error ? 'error' : "",
     globalProps(props),
     className,
-    defaultMarginBottom
   ])
   const addOnIcon = (
     <Icon
@@ -147,7 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
+      {label &&
         <Caption
             className="pb_text_input_kit_label"
             text={label}

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

@@ -25,12 +25,8 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
-      def default_margin_bottom
-        object.margin_bottom.present? ? "" : " mb_sm"
-      end
       def classname
-        generate_classname("pb_text_input_kit") + error_class + inline_class + default_margin_bottom
+        generate_classname("pb_text_input_kit") + error_class + inline_class
       end
       def input_tag