playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -4
  3. data/app/pb_kits/playbook/_playbook.scss +1 -0
  4. data/app/pb_kits/playbook/data/menu.yml +1 -0
  5. data/app/pb_kits/playbook/index.js +3 -0
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +1 -0
  7. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +3 -7
  9. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +3 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +2 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +2 -0
  12. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +2 -1
  13. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  14. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  15. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  16. data/app/pb_kits/playbook/pb_date/date.rb +10 -18
  17. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +17 -2
  18. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  19. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -5
  20. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  21. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +39 -0
  22. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +149 -0
  23. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +33 -0
  24. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +85 -0
  25. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +165 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md +1 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb +4 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx +13 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb +37 -0
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx +37 -0
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +1 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +32 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +9 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +17 -0
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md +1 -0
  53. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  54. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  55. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  56. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  57. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb +7 -0
  58. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx +16 -0
  59. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md +1 -0
  60. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +7 -0
  61. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +35 -0
  62. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +14 -0
  63. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +33 -0
  64. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss +53 -0
  65. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +785 -0
  66. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +108 -0
  67. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +44 -0
  68. data/app/pb_kits/playbook/pb_filter/_filter.scss +1 -1
  69. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  70. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -0
  72. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -0
  73. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  74. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +20 -0
  75. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  76. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +0 -1
  77. data/app/pb_kits/playbook/pb_table/table.rb +3 -3
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +1 -0
  79. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +21 -17
  80. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -8
  81. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
  82. data/app/pb_kits/playbook/pb_time/_time.html.erb +23 -17
  83. data/app/pb_kits/playbook/pb_time/_time.jsx +20 -11
  84. data/app/pb_kits/playbook/pb_time/_time.scss +16 -8
  85. data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb +18 -0
  86. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +3 -3
  87. data/app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb +70 -0
  88. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +1 -6
  89. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +47 -3
  90. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +33 -4
  91. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb +11 -0
  92. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +19 -0
  93. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +0 -7
  95. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +42 -0
  96. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +12 -14
  97. data/app/pb_kits/playbook/pb_time/docs/example.yml +7 -2
  98. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_time/time.rb +14 -2
  100. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +60 -0
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +20 -3
  102. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +30 -0
  103. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx +13 -0
  104. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx +12 -0
  105. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +51 -0
  106. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +34 -0
  107. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +13 -0
  108. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx +13 -0
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +22 -0
  110. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +29 -0
  111. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +84 -0
  112. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
  113. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +101 -0
  114. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
  115. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +8 -2
  116. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +4 -0
  117. data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
  118. data/app/pb_kits/playbook/vendor.js +6 -0
  119. data/lib/playbook/version.rb +1 -1
  120. metadata +71 -8
  121. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  122. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  123. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  124. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  125. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  126. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
@@ -0,0 +1,108 @@
1
+ @import "../../pb_title/title_mixin";
2
+ // Header Styles
3
+ .flatpickr-months {
4
+ border-bottom: solid 1px $border_light;
5
+ }
6
+ .flatpickr-month {
7
+ height: $space_xl;
8
+ }
9
+ .flatpickr-current-month {
10
+ left: $space_xs;
11
+ display: flex;
12
+ padding-top: 0;
13
+ }
14
+ .flatpickr-monthDropdown-months {
15
+ appearance: none;
16
+ @include pb_title_4;
17
+ height: $space_xl;
18
+ width: $space_xs * 12;
19
+ padding-left: 0;
20
+ padding-right: $space_xs;
21
+ margin-left: $space_sm;
22
+ margin-top: 0;
23
+ margin-bottom: 0;
24
+ @media (hover: hover) {
25
+ &:hover {
26
+ background-color: transparent;
27
+ }
28
+ }
29
+ }
30
+ .numInputWrapper {
31
+ display: contents;
32
+ .numInput {
33
+ @include pb_title_4;
34
+ border: 0;
35
+ appearance: none;
36
+ background-color: transparent;
37
+ border-left: solid 1px $border_light;
38
+ padding-left: $space_md - 1.5;
39
+ padding-right: $space_sm;
40
+ margin-left: $space_xs;
41
+ height: $space_xl;
42
+ &:focus {
43
+ outline: none;
44
+ }
45
+ @media (hover: hover) {
46
+ &:hover {
47
+ cursor: pointer;
48
+ }
49
+ }
50
+ }
51
+ }
52
+ // Icon for Select Tags
53
+ .month-dropdown-icon {
54
+ align-self: center;
55
+ margin-top: $space_xs - 3;
56
+ width: $space_xs + 2;
57
+ position: relative;
58
+ right: $space_xs + 2;
59
+ pointer-events: none;
60
+ color: $text_lt_light;
61
+ }
62
+ .year-dropdown-icon {
63
+ align-self: center;
64
+ margin-top: $space_xs - 3;
65
+ width: $space_xs + 2;
66
+ position: relative;
67
+ right: $space_xs + 4;
68
+ pointer-events: none;
69
+ color: $text_lt_light;
70
+ }
71
+
72
+ // Left - Right Arrow Styling
73
+ .flatpickr-prev-month {
74
+ display: flex;
75
+ flex-direction: column;
76
+ justify-content: center;
77
+ left: $space_xs * 29.25 !important;
78
+ padding-right: $space_sm;
79
+ border-left: solid 1px $border_light;
80
+ height: $space_xl;
81
+ svg path {
82
+ fill: $text_lt_light;
83
+ }
84
+ @media (hover: hover) {
85
+ &:hover {
86
+ svg {
87
+ fill: inherit;
88
+ }
89
+ }
90
+ }
91
+ }
92
+ .flatpickr-next-month {
93
+ display: flex;
94
+ flex-direction: column;
95
+ justify-content: center;
96
+ padding-left: $space_sm;
97
+ height: $space_xl;
98
+ svg path {
99
+ fill: $text_lt_light;
100
+ }
101
+ @media (hover: hover) {
102
+ &:hover{
103
+ svg {
104
+ fill: inherit;
105
+ }
106
+ }
107
+ }
108
+ }
@@ -0,0 +1,44 @@
1
+ @media (min-width: 500px) {
2
+ .flatpickr-calendar {
3
+ padding: $space_xs;
4
+ width: 323.88px
5
+ }
6
+ .dayContainer {
7
+ width: 315.88px
8
+ }
9
+ .flatpickr-months {
10
+ margin-left: -$space_xs;
11
+ margin-top: -$space_xs;
12
+ width: 323.88px;
13
+ }
14
+ }
15
+ @media (max-width: 499px) {
16
+ .numInput.cur-year {
17
+ padding-left: $space_sm;
18
+ }
19
+ .flatpickr-prev-month {
20
+ left: $space_xs * 27.5 !important;
21
+ }
22
+ }
23
+ // Firefox Header Adjustments
24
+ @supports (-moz-appearance:none) {
25
+ select.flatpickr-monthDropdown-months {
26
+ width: 97px !important;
27
+ margin-left: $space_xs + 3;
28
+ }
29
+ select.numInput {
30
+ padding-left: $space_sm + 1.5 !important;
31
+ margin-left: $space_xs !important;
32
+ }
33
+ }
34
+ // Direct Overrides
35
+ .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
36
+ .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
37
+ cursor: not-allowed;
38
+ }
39
+ .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
40
+ .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
41
+ .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
42
+ -webkit-box-shadow: none;
43
+ box-shadow: none;
44
+ }
@@ -49,7 +49,7 @@
49
49
  display: flex;
50
50
  flex-shrink: 1;
51
51
  flex-wrap: nowrap;
52
- overflow-x: scroll;
52
+ overflow-x: auto;
53
53
  padding-right: 80px;
54
54
  padding-top: $space_md;
55
55
  padding-bottom: $space_md;
@@ -25,6 +25,7 @@
25
25
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
26
26
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
27
27
  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
28
+ <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
28
29
 
29
30
  <%= form.actions do |action| %>
30
31
  <%= action.submit %>
@@ -28,6 +28,7 @@
28
28
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
29
29
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
30
30
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
31
+ <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
31
32
 
32
33
  <%= form.actions do |action| %>
33
34
  <%= action.submit %>
@@ -15,6 +15,7 @@
15
15
  :example_select_field,
16
16
  :example_collection_select_field,
17
17
  :example_checkbox_field
18
+ :example_date_picker_field1
18
19
 
19
20
 
20
21
  def self.model_name
@@ -51,6 +52,7 @@
51
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
52
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
53
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
55
+ <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
54
56
 
55
57
  <%= form.actions do |action| %>
56
58
  <%= action.submit %>
@@ -15,6 +15,7 @@
15
15
  :example_select_field,
16
16
  :example_collection_select_field,
17
17
  :example_checkbox_field
18
+ :example_date_picker_field2
18
19
 
19
20
 
20
21
  def self.model_name
@@ -51,6 +52,7 @@
51
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
52
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
53
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
55
+ <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
54
56
 
55
57
  <%= form.actions do |action| %>
56
58
  <%= action.submit %>
@@ -18,6 +18,7 @@ module Playbook
18
18
  prepend(SelectField)
19
19
  prepend(CollectionSelectField)
20
20
  prepend(CheckboxField)
21
+ prepend(DatePickerField)
21
22
 
22
23
  def actions(&block)
23
24
  ActionArea.new(self).wrapper(&block)
@@ -0,0 +1,20 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbForm
5
+ module FormBuilder
6
+ module DatePickerField
7
+ def date_picker(name, props: {})
8
+ prefix = @object_name
9
+ html_attribute_name = "#{prefix}[#{name}]"
10
+ html_id = "#{prefix}_#{name}"
11
+
12
+ props[:name] = html_attribute_name
13
+ props[:picker_id] = html_id
14
+
15
+ @template.pb_rails("date_picker", props: props)
16
+ end
17
+ end
18
+ end
19
+ end
20
+ end
@@ -13,8 +13,8 @@ module Playbook
13
13
  prop :icon, type: Playbook::Props::Boolean,
14
14
  default: false
15
15
  prop :variant, type: Playbook::Props::Enum,
16
- values: %w[default tracker],
17
- default: "default"
16
+ values: %w[default tracker],
17
+ default: "default"
18
18
  def classname
19
19
  generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
20
20
  end
@@ -14,7 +14,6 @@ module Playbook
14
14
  def classname
15
15
  generate_classname("pb_progress_step_item", status)
16
16
  end
17
-
18
17
  end
19
18
  end
20
19
  end
@@ -33,9 +33,9 @@ module Playbook
33
33
 
34
34
  private
35
35
 
36
- def dark_class
37
- dark ? "table-dark" : nil
38
- end
36
+ def dark_class
37
+ dark ? "table-dark" : nil
38
+ end
39
39
 
40
40
  def data_table_class
41
41
  data_table ? "data_table" : nil
@@ -14,6 +14,7 @@
14
14
  <% end %>
15
15
  <% else %>
16
16
  <%= tag(:input,
17
+ autocomplete: object.autocomplete ? nil : "off",
17
18
  class: "text_input",
18
19
  data: object.validation_data,
19
20
  disabled: object.disabled,
@@ -13,6 +13,7 @@ type TextInputProps = {
13
13
  aria?: object,
14
14
  className: string,
15
15
  data?: object,
16
+ dark?: boolean,
16
17
  disabled?: boolean,
17
18
  error?: string,
18
19
  id?: string,
@@ -26,23 +27,25 @@ type TextInputProps = {
26
27
  children: Node,
27
28
  }
28
29
 
29
- const TextInput = ({
30
- aria = {},
31
- className,
32
- data = {},
33
- disabled,
34
- error,
35
- id,
36
- name,
37
- label,
38
- onChange = () => {},
39
- placeholder,
40
- required,
41
- type = 'text',
42
- value,
43
- children = null,
44
- ...props
45
- }: TextInputProps) => {
30
+ const TextInput = (props: TextInputProps) => {
31
+ const {
32
+ aria = {},
33
+ className,
34
+ data = {},
35
+ dark = false,
36
+ disabled,
37
+ error,
38
+ id,
39
+ name,
40
+ label,
41
+ onChange = () => {},
42
+ placeholder,
43
+ required,
44
+ type = 'text',
45
+ value,
46
+ children = null,
47
+ } = props
48
+
46
49
  const ariaProps = buildAriaProps(aria)
47
50
  const dataProps = buildDataProps(data)
48
51
  const css = classnames([
@@ -60,6 +63,7 @@ const TextInput = ({
60
63
  >
61
64
  <Caption
62
65
  className="pb_text_input_kit_label"
66
+ dark={dark}
63
67
  text={label}
64
68
  />
65
69
  <div className="text_input_wrapper">
@@ -13,17 +13,22 @@
13
13
  margin-bottom: $space_sm;
14
14
  display: block;
15
15
 
16
- input::placeholder {
16
+ input::placeholder,
17
+ .text_input .placeholder {
17
18
  @include pb_body_light;
18
19
  }
19
20
 
20
- input {
21
+ input,
22
+ .text_input {
21
23
  @include pb_textarea_light;
22
24
  @include pb_title_4;
23
25
  overflow: hidden;
24
26
  }
25
27
 
26
- input:focus, input:-webkit-autofill:focus {
28
+ input:focus,
29
+ .text_input:focus,
30
+ input:-webkit-autofill:focus,
31
+ .text_input:-webkit-autofill:focus {
27
32
  @include pb_textarea_focus;
28
33
  -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
29
34
  transition: background-color 5000s ease-in-out 0s;
@@ -34,18 +39,22 @@
34
39
  .text_input_wrapper {
35
40
  margin-bottom: 1rem;
36
41
 
37
- input::placeholder {
42
+ input::placeholder,
43
+ .text_input .placeholder {
38
44
  @include pb_body_light_dark;
39
45
  }
40
46
 
41
- input {
47
+ input, .text_input {
42
48
  @include pb_textarea_dark;
43
49
  @include pb_title_4;
44
50
  @include pb_title_dark;
45
51
  overflow: hidden;
46
52
  }
47
53
 
48
- input:focus, input:-webkit-autofill:focus {
54
+ input:focus,
55
+ .text_input:focus,
56
+ input:-webkit-autofill:focus,
57
+ .text_input:-webkit-autofill:focus {
49
58
  @include pb_textarea_focus_dark;
50
59
  -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
51
60
  transition: background-color 5000s ease-in-out 0s;
@@ -54,7 +63,7 @@
54
63
 
55
64
  &.error {
56
65
  .text_input_wrapper {
57
- input {
66
+ input, .text_input {
58
67
  border-color: $error_dark;
59
68
  }
60
69
  }
@@ -66,7 +75,7 @@
66
75
  [class*=pb_body_kit] {
67
76
  margin-top: $space_xs / 2;
68
77
  }
69
- input {
78
+ input, .text_input {
70
79
  border-color: $error;
71
80
  }
72
81
  }
@@ -7,6 +7,8 @@ module Playbook
7
7
 
8
8
  partial "pb_text_input/text_input"
9
9
 
10
+ prop :autocomplete, type: Playbook::Props::Boolean,
11
+ default: true
10
12
  prop :disabled, type: Playbook::Props::Boolean,
11
13
  default: false
12
14
  prop :error
@@ -2,32 +2,38 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
- <% if object.size == "lg" %>
6
- <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
7
- <%= content_tag(:span) do %>
5
+ <%
6
+ # convert deprecated prop values
7
+ size = object.size
8
+ size = "sm" if object.size == "xs"
9
+ size = "md" if object.size == "lg"
10
+ %>
11
+ <% if size == "md" %>
12
+ <% if object.show_icon %>
13
+ <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
14
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
15
+ <% end %>
16
+ <% end %>
17
+ <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
18
+ <% if object.show_timezone %>
8
19
  <%= content_tag(:span, class: "pb_time_timezone") do %>
9
20
  <%= object.pb_date_time.to_timezone.upcase %>
10
21
  <% end %>
11
22
  <% end %>
12
- <% elsif object.size == "sm" %>
13
- <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
14
- <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
15
- <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
16
- <%= content_tag(:span) do %>
17
- <%= object.format_time_string %>
18
- <%= content_tag(:span, class: "pb_time_timezone") do %>
19
- <%= object.pb_date_time.to_timezone.upcase %>
20
- <% end %>
21
- <% end %>
23
+ <% else %>
24
+ <% if object.show_icon %>
25
+ <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
26
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
22
27
  <% end %>
23
28
  <% end %>
24
- <% else %>
25
- <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
29
+ <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
26
30
  <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
27
31
  <%= content_tag(:span) do %>
28
32
  <%= object.format_time_string %>
29
- <%= content_tag(:span, class: "pb_time_timezone") do %>
30
- <%= object.pb_date_time.to_timezone.upcase %>
33
+ <% if object.show_timezone %>
34
+ <%= content_tag(:span, class: "pb_time_timezone") do %>
35
+ <%= object.pb_date_time.to_timezone.upcase %>
36
+ <% end %>
31
37
  <% end %>
32
38
  <% end %>
33
39
  <% end %>