playbook_ui 13.15.0.pre.alpha.PLAY10851907 → 13.15.0.pre.alpha.play1141iconkitusinglibrary1956

Sign up to get free protection for your applications and to get access to all the features.
@@ -36,6 +36,7 @@ type SelectProps = {
36
36
  onChange: InputCallback<HTMLSelectElement>,
37
37
  options: SelectOption[],
38
38
  required?: boolean,
39
+ showArrow?: boolean,
39
40
  value?: string,
40
41
  } & GlobalProps
41
42
 
@@ -66,6 +67,7 @@ const Select = ({
66
67
  onChange = () => undefined,
67
68
  options = [],
68
69
  required = false,
70
+ showArrow = false,
69
71
  value,
70
72
  ...props
71
73
  }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -77,15 +79,16 @@ const Select = ({
77
79
  const inlineClass = inline ? 'inline' : null
78
80
  const compactClass = compact ? 'compact' : null
79
81
  const classes = classnames(
80
- buildCss('pb_select'),
82
+ buildCss("pb_select"),
81
83
  globalProps({
82
84
  ...props,
83
- marginBottom: props.marginBottom || props.margin || 'sm',
85
+ marginBottom: props.marginBottom || props.margin || "sm",
84
86
  }),
85
87
  className,
86
88
  inlineClass,
89
+ { show_arrow: showArrow },
87
90
  compactClass
88
- )
91
+ );
89
92
 
90
93
  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
91
94
  const selectBody =(() =>{
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("select", props: {
2
+ label: "Favorite Food",
3
+ name: "food",
4
+ inline: true,
5
+ options: [
6
+ {
7
+ value: "1",
8
+ value_text: "Burgers",
9
+ },
10
+ {
11
+ value: "2",
12
+ value_text: "Pizza",
13
+ },
14
+ {
15
+ value: "3",
16
+ value_text: "Tacos",
17
+ },
18
+ {
19
+ value: "4",
20
+ value_text: "BBQ",
21
+ },
22
+ ],
23
+ show_arrow: true
24
+ }) %>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { Body, Select } from '../..'
3
+
4
+ const SelectInlineShowArrow = (props) => {
5
+ const options = [
6
+ {
7
+ value: '1',
8
+ text: 'Burgers',
9
+ },
10
+ {
11
+ value: '2',
12
+ text: 'Pizza',
13
+ },
14
+ {
15
+ value: '3',
16
+ text: 'Tacos',
17
+ },
18
+ ]
19
+
20
+ return (
21
+ <div>
22
+ <Select
23
+ inline
24
+ label="Favorite Food"
25
+ name="food"
26
+ options={options}
27
+ showArrow
28
+ {...props}
29
+ />
30
+ <Body
31
+ status="negative"
32
+ {...props}
33
+ />
34
+ </div>
35
+ )
36
+ }
37
+
38
+ export default SelectInlineShowArrow
@@ -10,6 +10,7 @@ examples:
10
10
  - select_custom_select: Custom Select
11
11
  - select_error: Select w/ Error
12
12
  - select_inline: Select Inline
13
+ - select_inline_show_arrow: Select Inline (Always Show Arrow)
13
14
  - select_inline_compact: Select Inline Compact
14
15
  - select_attributes: Select W/ Attributes
15
16
  - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
26
27
  - select_custom_select: Custom Select
27
28
  - select_error: Select w/ Error
28
29
  - select_inline: Select Inline
30
+ - select_inline_show_arrow: Select Inline (Always Show Arrow)
29
31
  - select_inline_compact: Select Inline Compact
30
32
  - select_multiple: Select Multiple
31
33
 
@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
7
7
  export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
8
8
  export { default as SelectError } from './_select_error.jsx'
9
9
  export { default as SelectInline } from './_select_inline.jsx'
10
+ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
10
11
  export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
11
12
  export { default as SelectMultiple } from './_select_multiple.jsx'
@@ -19,10 +19,11 @@ module Playbook
19
19
  prop :name
20
20
  prop :onchange
21
21
  prop :options, type: Playbook::Props::HashArray, required: false, default: []
22
+ prop :show_arrow, type: Playbook::Props::Boolean, default: false
22
23
  prop :required, type: Playbook::Props::Boolean, default: false
23
24
 
24
25
  def classnames
25
- classname + inline_class + compact_class
26
+ classname + inline_class + compact_class + show_arrow_class
26
27
  end
27
28
 
28
29
  def all_attributes
@@ -49,6 +50,10 @@ module Playbook
49
50
  compact ? "compact" : ""
50
51
  end
51
52
 
53
+ def show_arrow_class
54
+ show_arrow ? "show_arrow" : ""
55
+ end
56
+
52
57
  def select_wrapper_class
53
58
  "pb_select_kit_wrapper" + error_class
54
59
  end