playbook_ui 13.32.0.pre.alpha.PLAY14143255 → 13.32.0.pre.alpha.PLAY14143260

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +123 -0
  3. data/app/pb_kits/playbook/_reset.scss +42 -0
  4. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +3 -3
  5. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -2
  6. data/app/pb_kits/playbook/pb_badge/_badge.scss +2 -2
  7. data/app/pb_kits/playbook/pb_body/_body.scss +1 -1
  8. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +0 -2
  9. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +1 -1
  10. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +0 -2
  11. data/app/pb_kits/playbook/pb_card/_card.scss +1 -1
  12. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +3 -3
  13. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +2 -4
  15. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +4 -4
  16. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -4
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +0 -2
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +0 -1
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +0 -1
  20. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -1
  21. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +0 -1
  22. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +0 -1
  23. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +0 -1
  24. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +0 -1
  25. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +0 -1
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -5
  27. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +0 -1
  28. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
  29. data/app/pb_kits/playbook/pb_label_value/_label_value.scss +1 -1
  30. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +0 -2
  31. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +0 -2
  32. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +0 -1
  33. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +0 -1
  34. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +0 -1
  35. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +0 -1
  36. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +0 -1
  37. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +0 -1
  38. data/app/pb_kits/playbook/pb_message/_message.tsx +0 -2
  39. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +1 -1
  40. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +1 -1
  41. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +0 -2
  42. data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +3 -3
  43. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +0 -2
  44. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +2 -1
  45. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +0 -1
  46. data/app/pb_kits/playbook/pb_pill/_pill.scss +2 -2
  47. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +2 -2
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +2 -2
  49. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  50. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  51. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +0 -2
  52. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +0 -1
  53. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
  54. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +1 -1
  55. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +4 -4
  56. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +2 -2
  57. data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +0 -1
  58. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +5 -5
  59. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +0 -2
  60. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +0 -2
  61. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +0 -2
  62. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +0 -2
  63. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +0 -2
  64. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +0 -2
  65. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +0 -2
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +0 -2
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +0 -2
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +0 -2
  69. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +0 -2
  70. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +0 -2
  71. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +0 -2
  72. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +0 -2
  73. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +0 -2
  74. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +0 -2
  75. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +0 -2
  76. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +0 -1
  77. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -2
  78. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +0 -2
  79. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +0 -2
  80. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -2
  81. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -3
  82. data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +1 -1
  83. data/app/pb_kits/playbook/utilities/_hover.scss +4 -4
  84. data/dist/playbook.css +1291 -0
  85. data/lib/playbook/version.rb +1 -1
  86. metadata +4 -2
@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
21
21
  [class^=pb_progress_simple_kit] {
22
22
  width: 100%;
23
23
  height: $pb_progress_simple_height;
24
- border-radius: $pb_progress_simple_height/2;
24
+ border-radius: calc($pb_progress_simple_height/2);
25
25
  background: rgba($primary, $opacity-1);
26
26
  &[class*=_positive] {
27
27
  .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
42
42
  [class^=progress_simple_value] {
43
43
  width: 0%;
44
44
  height: 100%;
45
- border-radius: $pb_progress_simple_height/2;
45
+ border-radius: calc($pb_progress_simple_height/2);
46
46
  background: $primary;
47
47
  }
48
48
 
@@ -106,7 +106,7 @@
106
106
  .trix-button--icon {
107
107
  height: $space_lg;
108
108
  width: $space_lg;
109
- margin: $space_xs / 2;
109
+ margin: calc($space_xs / 2);
110
110
  border-radius: $border_rad_heavier;
111
111
  &::before {
112
112
  background-size: auto;
@@ -116,7 +116,7 @@
116
116
  background: $white;
117
117
  border: 1px solid #E4E8F0;
118
118
  border-bottom: none;
119
- padding: $space_xs / 2;
119
+ padding: calc($space_xs / 2);
120
120
  border-top-left-radius: $border_rad_heavier;
121
121
  border-top-right-radius: $border_rad_heavier;
122
122
  .trix-button-group {
@@ -81,7 +81,7 @@
81
81
  display: block;
82
82
  &.error {
83
83
  [class*=pb_body_kit] {
84
- margin-top: $space_xs / 2;
84
+ margin-top: calc($space_xs / 2);
85
85
  }
86
86
  > select:first-child {
87
87
  border-color: $error;
@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
28
28
  padding: $space_sm;
29
29
  margin-bottom: $space_sm;
30
30
  cursor: pointer;
31
- outline: 1px solid transparent;
31
+ outline: 1px solid transparent;
32
32
 
33
33
  @media (hover:hover) {
34
34
  &:hover {
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
43
43
  align-items: center;
44
44
  height: $pb_selectable_card_indicator_size;
45
45
  width: $pb_selectable_card_indicator_size;
46
- border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
46
+ border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
47
47
  border-width: $pb_selectable_card_border;
48
48
  border-style: solid;
49
49
  border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
52
52
  font-size: $font_smaller;
53
53
  text-align: center;
54
54
  position: absolute;
55
- top: -($pb_selectable_card_indicator_size/2);
56
- right: -($pb_selectable_card_indicator_size/2);
55
+ top: -(calc($pb_selectable_card_indicator_size/2));
56
+ right: -(calc($pb_selectable_card_indicator_size/2));
57
57
  opacity: 0;
58
58
  }
59
59
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, {useRef} from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
  import { globalProps } from '../utilities/globalProps'
@@ -101,7 +101,7 @@
101
101
  &.error {
102
102
  .text_input_wrapper {
103
103
  [class*="pb_body_kit"] {
104
- margin-top: $space_xs / 2;
104
+ margin-top: calc($space_xs / 2);
105
105
  }
106
106
  input,
107
107
  .text_input {
@@ -60,7 +60,7 @@
60
60
 
61
61
  &.error {
62
62
  [class*=pb_body_kit] {
63
- margin-top: $space_xs / 2;
63
+ margin-top: calc($space_xs / 2);
64
64
  }
65
65
  textarea {
66
66
  border-color: $error;
@@ -22,14 +22,14 @@
22
22
  display: flex;
23
23
  align-items: center;
24
24
  [class*=pb_time_range_inline_arrow] {
25
- margin-left: $space_xs/2;
26
- margin-right: $space_xs/2;
25
+ margin-left: calc($space_xs/2);
26
+ margin-right: calc($space_xs/2);
27
27
  }
28
28
  [class*=pb_time_range_inline_timezone] {
29
- margin-left: $space_xs/2;
29
+ margin-left: calc($space_xs/2);
30
30
  }
31
31
  [class*=pb_time_range_inline_icon] {
32
- margin-right: $space_xs/2;
32
+ margin-right: calc($space_xs/2);
33
33
  }
34
34
  }
35
35
  }
@@ -4,9 +4,9 @@
4
4
  @import "../tokens/typography";
5
5
 
6
6
  $connector_width: 2px;
7
- $icon_margin: $space_xs/2;
7
+ $icon_margin: calc($space_xs/2);
8
8
  $icon_height: 28px;
9
- $height_from_top: $icon_height/2 - $connector_width/2;
9
+ $height_from_top: calc($icon_height/2) - calc($connector_width/2);
10
10
 
11
11
  @mixin pb_timeline_line_solid($width, $height, $margin) {
12
12
  width: $width;
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
 
3
2
  import React from 'react'
4
3
  import classnames from 'classnames'
@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
8
8
  [class^=pb_toggle_kit] {
9
9
  position: relative;
10
10
  $width: 44px;
11
- $height: $width / 2;
11
+ $height: calc($width / 2);
12
12
  $border_success: 3px solid $color_checkbox_success;
13
13
  $border_default: 3px solid $color_checkbox_default;
14
14
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
27
27
  &:after {
28
28
  transition: $transition;
29
29
  content: "";
30
- width: $width / 2 - 4px;
30
+ width: calc($width / 2) - 4px;
31
31
  height: $height - 4px;
32
32
  background-color: $color_checkbox_default;
33
33
  border-radius: 50%;
@@ -50,7 +50,7 @@ $transition: .2s ease-in-out;
50
50
 
51
51
  &:disabled + .pb_toggle_control {
52
52
  cursor: not-allowed;
53
- opacity: 0.5;
53
+ opacity: 0.5;
54
54
  border: 3px solid $border_light;
55
55
  background-color: $border_light;
56
56
 
@@ -68,14 +68,14 @@ $transition: .2s ease-in-out;
68
68
  background-color: $color_checkbox_success;
69
69
 
70
70
  &:after {
71
- left: $width / 2 + 2px;
71
+ left: calc($width / 2) + 2px;
72
72
  background-color: $white;
73
73
  }
74
74
  }
75
75
 
76
76
  &:disabled + .pb_toggle_control {
77
77
  cursor: not-allowed;
78
- opacity: 0.5;
78
+ opacity: 0.5;
79
79
  border: 3px solid $text_lt_light;
80
80
  background-color: $text_lt_light;
81
81
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { Toggle } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { Caption, Title, Toggle } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Toggle } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Toggle } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { Caption, Title, Toggle } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Tooltip, Flex, FlexItem } from 'playbook-ui';
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Tooltip, Button, Flex } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Typeahead } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
  import { Typeahead } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import Typeahead from '../_typeahead'
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React, { useState, useEffect } from 'react'
4
2
 
5
3
  import Typeahead from '../_typeahead'
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import Typeahead from '../_typeahead'
@@ -1,5 +1,3 @@
1
- // @flow
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import Typeahead from '../_typeahead'
@@ -1,6 +1,5 @@
1
1
  /* eslint-disable react/no-danger */
2
2
  /* eslint-disable react/no-multi-comp */
3
- /* @flow */
4
3
 
5
4
  import React, { useState } from 'react'
6
5
  import { components } from 'react-select'
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { Typeahead } from 'playbook-ui'
5
3
 
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useState } from 'react'
4
2
 
5
3
  import {
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useState } from 'react'
4
2
 
5
3
  import {
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useState } from 'react'
4
2
 
5
3
  import {
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { globalProps } from '../utilities/globalProps'
@@ -8,13 +6,14 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
8
6
  import Caption from '../pb_caption/_caption'
9
7
  import Title from '../pb_title/_title'
10
8
  import DateTime from '../pb_kit/dateTime';
9
+ import { GenericObject } from '../types'
11
10
 
12
11
  type WeekdayStackedProps = {
13
12
  align?: "left" | "center" | "right",
14
13
  aria?: {[key:string]:string },
15
14
  className?: string,
16
15
  dark?: boolean,
17
- data?: object,
16
+ data?: GenericObject,
18
17
  date: Date,
19
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
20
19
  id?: string,
@@ -3,7 +3,7 @@
3
3
  :export {
4
4
  @mixin export-colors($colors-list) {
5
5
  @each $name, $color in $colors-list {
6
- #{$name}: $color;
6
+ #{"" + $name}: $color;
7
7
  }
8
8
  }
9
9
  @include export-colors($product_colors);
@@ -2,11 +2,11 @@
2
2
 
3
3
  @mixin hover-color-classes($colors-list) {
4
4
  @each $name, $color in $colors-list {
5
- .hover_background_#{$name}:hover {
5
+ .hover_background_#{"" + $name}:hover {
6
6
  background-color: $color !important;
7
7
  transition: background-color $transition-speed ease;
8
8
  }
9
- .hover_color_#{$name}:hover {
9
+ .hover_color_#{"" + $name}:hover {
10
10
  color: $color !important;
11
11
  transition: color $transition-speed ease;
12
12
  }
@@ -15,7 +15,7 @@
15
15
 
16
16
  @mixin hover-shadow-classes($shadows-list) {
17
17
  @each $name, $shadow in $shadows-list {
18
- .hover_#{$name}:hover {
18
+ .hover_#{"" + $name}:hover {
19
19
  box-shadow: $shadow;
20
20
  transition: box-shadow $transition-speed ease;
21
21
  }
@@ -24,7 +24,7 @@
24
24
 
25
25
  @mixin hover-scale-classes($scales-list) {
26
26
  @each $name, $scale in $scales-list {
27
- .hover_#{$name}:hover {
27
+ .hover_#{"" + $name}:hover {
28
28
  transform: $scale;
29
29
  transition: transform $transition-speed ease;
30
30
  }