playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +26 -0
  6. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +99 -95
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +44 -1
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +34 -2
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb +8 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx +18 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
  15. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +161 -0
  16. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +4 -3
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss +75 -0
  18. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  19. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  20. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  22. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +3 -0
  23. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
  24. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
  26. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
  27. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  28. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
  29. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
  30. data/app/pb_kits/playbook/pb_nav/_item.tsx +7 -7
  31. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  32. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +1 -1
  33. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  34. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  35. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  36. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  37. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  38. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  39. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  40. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  41. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  42. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  43. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  44. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  45. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  46. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  47. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  48. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  49. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  51. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  52. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  53. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  54. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  55. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  56. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  57. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  58. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  59. data/lib/playbook/markdown/helper.rb +50 -71
  60. data/lib/playbook/markdown.rb +0 -1
  61. data/lib/playbook/number_spacing.rb +10 -10
  62. data/lib/playbook/position.rb +10 -10
  63. data/lib/playbook/spacing.rb +10 -10
  64. data/lib/playbook/version.rb +2 -2
  65. data/lib/playbook/z_index.rb +10 -10
  66. metadata +29 -14
  67. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  68. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  70. data/lib/playbook/markdown/template_handler.rb +0 -47
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import type { InputCallback } from '../types'
@@ -10,20 +8,20 @@ import {
10
8
  buildDataProps,
11
9
  } from '../utilities/props'
12
10
 
13
- import { globalProps } from '../utilities/globalProps'
11
+ import { GlobalProps, globalProps } from '../utilities/globalProps'
14
12
 
15
13
  type Props = {
16
- aria?: object,
14
+ aria?: { [key: string]: string },
17
15
  checked?: boolean,
18
- children?: React.Node,
16
+ children?: React.ReactNode | React.ReactNode[],
19
17
  className?: string,
20
- data?: object,
18
+ data?: { [key: string]: string },
21
19
  id?: string,
22
20
  name?: string,
23
21
  onChange?: InputCallback<HTMLInputElement>,
24
22
  size?: "sm" | "md",
25
23
  value?: string,
26
- }
24
+ } & GlobalProps
27
25
 
28
26
  const Toggle = ({
29
27
  aria = {},
@@ -33,7 +31,7 @@ const Toggle = ({
33
31
  data = {},
34
32
  id,
35
33
  name,
36
- onChange = () => {},
34
+ onChange = () => { },
37
35
  size = 'sm',
38
36
  value,
39
37
  ...props
@@ -51,24 +49,24 @@ const Toggle = ({
51
49
 
52
50
  return (
53
51
  <div
54
- {...ariaProps}
55
- {...dataProps}
56
- className={classnames(css, globalProps(props), className)}
57
- id={id}
52
+ {...ariaProps}
53
+ {...dataProps}
54
+ className={classnames(css, globalProps(props), className)}
55
+ id={id}
58
56
  >
59
57
  <label className="pb_toggle_wrapper">
60
- <If condition={children}>
61
- {children}
62
- <Else />
58
+ {children && children}
59
+
60
+ {!children &&
63
61
  <input
64
- {...props}
65
- defaultChecked={checked}
66
- name={name}
67
- onChange={onChange}
68
- type="checkbox"
69
- value={value}
62
+ {...props}
63
+ defaultChecked={checked}
64
+ name={name}
65
+ onChange={onChange}
66
+ type="checkbox"
67
+ value={value}
70
68
  />
71
- </If>
69
+ }
72
70
  <div className="pb_toggle_control" />
73
71
  </label>
74
72
  </div>
@@ -0,0 +1,67 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import Toggle from './_toggle'
5
+
6
+ const testId = 'toggle'
7
+ const className = 'custom-class-name'
8
+
9
+ const ToggleDefault = (props) => (
10
+ <>
11
+ <Toggle
12
+ aria={{ label: testId }}
13
+ className={className}
14
+ data={{ testid: testId }}
15
+ id={testId}
16
+ {...props}
17
+ />
18
+ </>
19
+ )
20
+
21
+ test('should pass data prop', () => {
22
+ render(<ToggleDefault />)
23
+ const kit = screen.getByTestId(testId)
24
+ expect(kit).toBeInTheDocument()
25
+ })
26
+
27
+ test('should pass className prop', () => {
28
+ render(<ToggleDefault />)
29
+ const kit = screen.getByTestId(testId)
30
+ expect(kit).toHaveClass(className)
31
+ })
32
+
33
+ test('should pass aria prop', () => {
34
+ render(<ToggleDefault />)
35
+ const kit = screen.getByTestId(testId)
36
+ expect(kit).toHaveAttribute('aria-label', testId)
37
+ })
38
+
39
+ test('should pass id prop', () => {
40
+ render(<ToggleDefault />)
41
+ const kit = screen.getByTestId(testId)
42
+ expect(kit).toHaveProperty('id', testId)
43
+ })
44
+
45
+ test('should not be checked by default', () => {
46
+ render(<ToggleDefault />)
47
+ const kit = screen.getByTestId(testId)
48
+ expect(kit).toHaveClass('pb_toggle_kit_sm_off')
49
+ })
50
+
51
+ test('should pass checked prop', () => {
52
+ render(<ToggleDefault checked />)
53
+ const kit = screen.getByTestId(testId)
54
+ expect(kit).toHaveClass('pb_toggle_kit_sm_on')
55
+ })
56
+
57
+ test('should have sm size by default', () => {
58
+ render(<ToggleDefault />)
59
+ const kit = screen.getByTestId(testId)
60
+ expect(kit).toHaveClass('pb_toggle_kit_sm_off')
61
+ })
62
+
63
+ test('should pass size prop', () => {
64
+ render(<ToggleDefault size='md' />)
65
+ const kit = screen.getByTestId(testId)
66
+ expect(kit).toHaveClass('pb_toggle_kit_md_off')
67
+ })
@@ -88,13 +88,18 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
88
88
  &.show {
89
89
  opacity: 1;
90
90
  margin-bottom: $space_sm;
91
- background-color: $white;
91
+ color: $white;
92
+ background-color: rgba($black, $opacity_9);
92
93
  &.fade_out {
93
94
  animation-name: fadeOut;
94
95
  animation-duration: 150ms;
95
96
  animation-timing-function: linear;
96
97
  animation-fill-mode: forwards;
97
98
  }
99
+ .arrow {
100
+ border-color: $black transparent transparent transparent;
101
+ opacity: $opacity_9;
102
+ }
98
103
  }
99
104
  }
100
105
 
@@ -109,12 +114,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
109
114
  }
110
115
  //rails
111
116
  &.show {
112
- color: $white;
113
- background-color: rgba($black, $opacity_9);
117
+ color: $charcoal;
118
+ background-color: $white;
114
119
  }
115
- .arrow {
116
- border-color: $black transparent transparent transparent;
117
- opacity: $opacity_9;
120
+ .arrow {
121
+ border-color: $white transparent transparent transparent;
122
+ opacity: $opacity_10;
118
123
  }
119
124
  // react arrow
120
125
  .arrow_bg {
@@ -1,4 +1,4 @@
1
- <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
1
+ <%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
2
2
  <%= pb_rails("flex/flex_item") do %>
3
3
  <span id='regular-tooltip-1'>Hover here (Top)</span>
4
4
 
@@ -11,7 +11,7 @@
11
11
  <% end %>
12
12
  <% end %>
13
13
 
14
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
14
+ <%= pb_rails("flex/flex_item") do %>
15
15
  <span id='regular-tooltip-2'>Hover here (Bottom)</span>
16
16
  <%= pb_rails("tooltip", props: {
17
17
  trigger_element_selector: "#regular-tooltip-2",
@@ -22,7 +22,7 @@
22
22
  <% end %>
23
23
  <% end %>
24
24
 
25
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
25
+ <%= pb_rails("flex/flex_item") do %>
26
26
  <span id='regular-tooltip-3'>Hover here (Right)</span>
27
27
  <%= pb_rails("tooltip", props: {
28
28
  trigger_element_selector: "#regular-tooltip-3",
@@ -33,7 +33,7 @@
33
33
  <% end %>
34
34
  <% end %>
35
35
 
36
- <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
36
+ <%= pb_rails("flex/flex_item") do %>
37
37
  <span id='regular-tooltip-4'>Hover here (Left)</span>
38
38
  <%= pb_rails("tooltip", props: {
39
39
  trigger_element_selector: "#regular-tooltip-4",
@@ -3,8 +3,7 @@
3
3
  <%= pb_rails("tooltip", props: {
4
4
  trigger_element_id: "result-1-sample-email-link",
5
5
  tooltip_id: "sample-email-tooltip-result-1",
6
- position: "top",
7
- dark: true
6
+ position: "top"
8
7
  }) do %>
9
8
  Send Email
10
9
  <% end %>
@@ -3,7 +3,6 @@ examples:
3
3
  rails:
4
4
  - tooltip_default: Default
5
5
  - tooltip_selectors: Using Common Selectors
6
- - tooltip_white: White
7
6
  - tooltip_with_icon_circle: Icon Circle Tooltip
8
7
 
9
8
  react:
@@ -49,7 +49,7 @@ const User = (props: UserProps) => {
49
49
  const classes = classnames(
50
50
  buildCss('pb_user_kit', align, orientation, size),
51
51
  globalProps(props),
52
- className,
52
+ className
53
53
  )
54
54
 
55
55
  const avatarPresent = avatar || avatarUrl
@@ -8,7 +8,17 @@ require "action_view"
8
8
  module Playbook
9
9
  module Markdown
10
10
  module Helper
11
- def markdown(text)
11
+ def self.call(template, _source)
12
+ markdown(template.source)
13
+ end
14
+
15
+ def render_markdown(text)
16
+ # rubocop:disable Security/Eval
17
+ eval(Playbook::Markdown::Helper.markdown(text))
18
+ # rubocop:enable Security/Eval
19
+ end
20
+
21
+ def self.markdown(text)
12
22
  options = {
13
23
  filter_html: false,
14
24
  hard_wrap: true,
@@ -20,6 +30,8 @@ module Playbook
20
30
  }
21
31
 
22
32
  extensions = {
33
+ lax_spacing: true,
34
+ no_intra_emphasis: true,
23
35
  autolink: true,
24
36
  superscript: true,
25
37
  fenced_code_blocks: true,
@@ -33,9 +45,11 @@ module Playbook
33
45
  }
34
46
 
35
47
  renderer = HTMLBlockCode.new(options)
48
+ # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
49
+ # @TOC = Redcarpet::Markdown.new(toc_renderer)
50
+ # puts "TOC: #{@TOC.inspect}"
36
51
  markdown = Redcarpet::Markdown.new(renderer, extensions)
37
-
38
- markdown.render(text).html_safe
52
+ "#{markdown.render(text).inspect}.html_safe;"
39
53
  end
40
54
 
41
55
  def rouge(text, language)
@@ -44,6 +58,10 @@ module Playbook
44
58
  formatter.format(lexer.lex(text))
45
59
  end
46
60
 
61
+ class HTML < Redcarpet::Render::HTML
62
+ include Rouge::Plugins::Redcarpet
63
+ end
64
+
47
65
  def rouge_markdown(text)
48
66
  render_options = {
49
67
  filter_html: true,
@@ -65,88 +83,49 @@ module Playbook
65
83
  end
66
84
  end
67
85
 
86
+ class HTMLWithPants < Redcarpet::Render::HTML
87
+ include Redcarpet::Render::SmartyPants
88
+ end
89
+
68
90
  class HTML < Redcarpet::Render::HTML
69
91
  include Rouge::Plugins::Redcarpet
70
92
  end
71
93
 
72
94
  class HTMLBlockCode < Redcarpet::Render::HTML
73
95
  include ActionView::Helpers::AssetTagHelper
74
- def header(title, level)
75
- if level == 7
76
- @headers ||= []
77
- permalink = title.gsub(/\W+/, "-")
78
- if @headers.include?(permalink)
79
- permalink += "_1"
80
- loop do
81
- break unless @headers.include?(permalink)
82
-
83
- permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
84
- end
85
- end
86
- @headers << permalink
87
- %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
88
- else
89
- %(\n<h#{level}>#{title}</h#{level}>\n)
90
- end
91
- end
92
96
 
93
- def image(link, title, alt_text)
94
- image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
95
- end
96
-
97
- def preprocess(full_document)
98
- full_document.gsub(/\[component (.*)\]/) do
99
- @string = Regexp.last_match(1)
100
- @default_height = "160"
101
- @attr = ["", @default_height]
97
+ # def block_code(code, language)
98
+ # "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
99
+ # end
102
100
 
103
- # Set src from attributes
104
- @string.gsub(/src="(.*?)"/) do
105
- @attr[0] = Regexp.last_match(1)
106
- end
101
+ def table(header, body)
102
+ "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
103
+ "<thead>#{header}</thead>" \
104
+ "<tbody>#{body}</tbody>" \
105
+ "</table>"
106
+ end
107
107
 
108
- # Set height from attributes
109
- @string.gsub(/height="(.*?)"/) do
110
- @attr[1] = (Regexp.last_match(1) || @default_height)
108
+ def header(title, level)
109
+ @headers ||= []
110
+ permalink = title.gsub(/\W+/, "-")
111
+ if @headers.include?(permalink)
112
+ permalink += "_1"
113
+ loop do
114
+ break unless @headers.include?(permalink)
115
+
116
+ permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
111
117
  end
112
-
113
- %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
114
118
  end
119
+ @headers << permalink
120
+ permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
121
+ permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
122
+ %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
115
123
  end
116
124
 
117
- def list(contents, _list_type)
118
- @contents = contents
119
- @list_items = contents.split("\n")
120
-
121
- if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
122
- @element_items = []
123
- @list_items.each do |item, _index|
124
- item.gsub(%r{<li>(.*)</li>}) do
125
- @element_items.push(Regexp.last_match(1))
126
- end
127
- end
128
-
129
- # Doing both because we could have either/both
130
- # clean up
131
- @dont_items, @trash_items_dont = @element_items.partition { |x, _i| x.include? "[dont]" }
132
- @do_items, @trash_items_do = @element_items.partition { |x, _i| x.include? "[do]" }
133
-
134
- @do_list = []
135
- @do_items.each do |item, _index|
136
- @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
137
- end
138
- @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join('')}</ul>"
139
-
140
- @dont_list = []
141
- @dont_items.each do |item, _index|
142
- @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
143
- end
144
- @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join('')}</ul>"
125
+ def image(link, title, alt_text)
126
+ return nil if link.nil?
145
127
 
146
- "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
147
- else
148
- @contents
149
- end
128
+ %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
150
129
  end
151
130
  end
152
131
  end
@@ -1,4 +1,3 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- require "playbook/markdown/template_handler"
4
3
  require "playbook/markdown/helper"
@@ -6,6 +6,16 @@ module Playbook
6
6
  base.prop :number_spacing
7
7
  end
8
8
 
9
+ def number_spacing_values
10
+ %w[tabular]
11
+ end
12
+
13
+ def number_spacing_options
14
+ {
15
+ number_spacing: "ns",
16
+ }
17
+ end
18
+
9
19
  private
10
20
 
11
21
  def number_spacing_props
@@ -17,15 +27,5 @@ module Playbook
17
27
  "ns_#{index_value}" if number_spacing_values.include? index_value
18
28
  end.compact.join(" ")
19
29
  end
20
-
21
- def number_spacing_options
22
- {
23
- number_spacing: "ns",
24
- }
25
- end
26
-
27
- def number_spacing_values
28
- %w[tabular]
29
- end
30
30
  end
31
31
  end
@@ -6,6 +6,16 @@ module Playbook
6
6
  base.prop :position
7
7
  end
8
8
 
9
+ def position_values
10
+ %w[relative absolute fixed sticky]
11
+ end
12
+
13
+ def position_options
14
+ {
15
+ position: "position",
16
+ }
17
+ end
18
+
9
19
  private
10
20
 
11
21
  def position_props
@@ -19,15 +29,5 @@ module Playbook
19
29
  "position_#{value}"
20
30
  end.compact.join(" ")
21
31
  end
22
-
23
- def position_options
24
- {
25
- position: "position",
26
- }
27
- end
28
-
29
- def position_values
30
- %w[relative absolute fixed sticky]
31
- end
32
32
  end
33
33
  end
@@ -20,6 +20,16 @@ module Playbook
20
20
  base.prop :padding_y
21
21
  end
22
22
 
23
+ def max_width_options
24
+ {
25
+ max_width: "mw",
26
+ }
27
+ end
28
+
29
+ def max_width_values
30
+ %w[xs sm md lg xl 0 none]
31
+ end
32
+
23
33
  def spacing_options
24
34
  {
25
35
  margin: "m",
@@ -62,15 +72,5 @@ module Playbook
62
72
  "max_width_#{width_value}" if max_width_values.include? width_value
63
73
  end.compact.join(" ")
64
74
  end
65
-
66
- def max_width_options
67
- {
68
- max_width: "mw",
69
- }
70
- end
71
-
72
- def max_width_values
73
- %w[xs sm md lg xl 0 none]
74
- end
75
75
  end
76
76
  end
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.16.0"
5
- VERSION = "12.17.0"
4
+ PREVIOUS_VERSION = "12.18.0"
5
+ VERSION = "12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617"
6
6
  end
@@ -6,6 +6,16 @@ module Playbook
6
6
  base.prop :z_index
7
7
  end
8
8
 
9
+ def z_index_values
10
+ %w[1 2 3 4 5 6 7 8 9 10]
11
+ end
12
+
13
+ def z_index_options
14
+ {
15
+ z_index: "z-index",
16
+ }
17
+ end
18
+
9
19
  private
10
20
 
11
21
  def z_index_props
@@ -17,15 +27,5 @@ module Playbook
17
27
  "z_index_#{index_value}" if z_index_values.include? index_value
18
28
  end.compact.join(" ")
19
29
  end
20
-
21
- def z_index_options
22
- {
23
- z_index: "z-index",
24
- }
25
- end
26
-
27
- def z_index_values
28
- %w[1 2 3 4 5 6 7 8 9 10]
29
- end
30
30
  end
31
31
  end