playbook_ui 14.6.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4222 → 14.6.0.pre.alpha.dropdownclassfix4224

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d63cd70fa0e0f14b032f5ecf9797821a9d220c73c30daa8b3c930835621e4375
4
- data.tar.gz: '0983801b52c3b009e241a4bacf55ae0184d7a50e4ce54279bae09ba8bee19414'
3
+ metadata.gz: 2e7c742a82f9119f7c8e916e4388b5a87f0e7431177be7231df60646ce5a59bf
4
+ data.tar.gz: 81bcbb4679a6e6a9ed7c208c21675b13843c41a7b054e30bd33cbcd6b45b2f17
5
5
  SHA512:
6
- metadata.gz: 3c179daad11db77a567d9964a4ff9cdb90efab24cdb88b7b8059579ef9592146d0deaa03e02765cd817e5730527e280796387f516974325ee80e644ae29f04da
7
- data.tar.gz: 8e2b6701b47d392cda459d528dfbde3ff3c0703a6a5152fe73b77506013b5055d5f6e95c0bf41617b4b0dd8b03fbf666292573e99f4624386aff58deb6971ec8
6
+ metadata.gz: a7bb3a7149a85030b1b7539917f1044127f68b928d008a8f1701bcfb7ddfd64ad01ea43498a10e90d758932adeb94c79751113cd6b2af7bc20d924a5200a43bf
7
+ data.tar.gz: dd64a6e5791947eb1f3965be88fc881646bd4bf3569e153ab8b2d226ebb374d653401667ad8650fe5146c8f5bd31e70001b3e68b6c74de2e59c33135137dc986
@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
28
28
 
29
29
  @mixin pb_card_selected($border_color: $primary) {
30
30
  border-color: $border_color;
31
- border-width: $pb_card_border_width * 2;
31
+ border-width: $pb_card_border_width;
32
+ outline: 1px solid $border_color;
32
33
  }
33
34
 
34
35
  @mixin pb_card_selected_dark {
@@ -9,7 +9,7 @@
9
9
 
10
10
  @import "./scss_partials/dropdown_animation";
11
11
 
12
- .pb_dropdown {
12
+ [class*="pb_dropdown"] {
13
13
  .dropdown_wrapper {
14
14
  [class*="dropdown_trigger_wrapper"] {
15
15
  @include pb_body;
@@ -131,7 +131,7 @@
131
131
  }
132
132
  }
133
133
 
134
- &.separators_hidden {
134
+ &[class*="separators_hidden"] {
135
135
  .dropdown_wrapper {
136
136
  .pb_dropdown_container {
137
137
 
@@ -142,7 +142,7 @@
142
142
  }
143
143
  }
144
144
 
145
- &.subtle {
145
+ &[class*="subtle"] {
146
146
  .dropdown_wrapper {
147
147
  .pb_dropdown_container {
148
148
 
@@ -178,7 +178,7 @@
178
178
  }
179
179
  }
180
180
 
181
- &.separators_hidden {
181
+ &[class*="separators_hidden"] {
182
182
  .dropdown_wrapper {
183
183
  .pb_dropdown_container {
184
184
  [class*="pb_dropdown_option"]:first-child {
@@ -74,10 +74,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
74
74
  const htmlProps = buildHtmlProps(htmlOptions);
75
75
  const separatorsClass = separators ? '' : 'separators_hidden'
76
76
  const classes = classnames(
77
- buildCss("pb_dropdown"),
77
+ buildCss("pb_dropdown", variant, separatorsClass),
78
78
  globalProps(props),
79
- variant,
80
- separatorsClass,
81
79
  className
82
80
  );
83
81
 
@@ -24,7 +24,7 @@ module Playbook
24
24
  end
25
25
 
26
26
  def classname
27
- generate_classname("pb_dropdown", variant, separators_class, separator: " ")
27
+ generate_classname("pb_dropdown", variant, separators_class)
28
28
  end
29
29
 
30
30
  private
@@ -38,7 +38,7 @@ module Playbook
38
38
  end
39
39
 
40
40
  def separators_class
41
- separators ? "" : "separators_hidden"
41
+ separators ? nil : "separators_hidden"
42
42
  end
43
43
 
44
44
  def options_with_blank
@@ -10,24 +10,6 @@
10
10
  $pb_selectable_card_indicator_size: 22px;
11
11
  $pb_selectable_card_border: 2px;
12
12
 
13
- $pb_selectable_space_classes: (
14
- xxs: $space_xxs,
15
- xs: $space_xs,
16
- sm: $space_sm,
17
- md: $space_md,
18
- lg: $space_lg,
19
- xl: $space_xl,
20
- );
21
- $pb_selectable_paddings: (
22
- p: "padding",
23
- pr: "padding-right",
24
- pl: "padding-left",
25
- pt: "padding-top",
26
- pb: "padding-bottom",
27
- px: ("padding-left", "padding-right"),
28
- py: ("padding-top", "padding-bottom")
29
- );
30
-
31
13
  [class^=pb_selectable_card_kit] {
32
14
  display: block;
33
15
  margin-bottom: 0;
@@ -46,6 +28,7 @@ $pb_selectable_paddings: (
46
28
  padding: $space_sm;
47
29
  margin-bottom: $space_sm;
48
30
  cursor: pointer;
31
+ outline: 1px solid transparent;
49
32
 
50
33
  @media (hover:hover) {
51
34
  &:hover {
@@ -91,7 +74,6 @@ $pb_selectable_paddings: (
91
74
 
92
75
  position: relative;
93
76
  @include pb_card_selected;
94
- padding: calc(#{$space_sm} - 1px);
95
77
  transition-property: none;
96
78
  transition-duration: 0s;
97
79
 
@@ -106,54 +88,6 @@ $pb_selectable_paddings: (
106
88
  background-color: $royal;
107
89
  }
108
90
  }
109
-
110
- // Selected card has 1px more border
111
- // Remove 1px so content does not "jump"
112
- @each $position_name,
113
- $position in $pb_selectable_paddings {
114
- @each $space_name,
115
- $space in $pb_selectable_space_classes {
116
- ~ label.#{$position_name}_#{$space_name} {
117
- @if type-of($position)=="list" {
118
- @each $coordinate in $position {
119
- #{$coordinate}: calc(#{$space} - 1px) !important;
120
- }
121
- }
122
-
123
- @else {
124
- #{$position}: calc(#{$space} - 1px) !important;
125
- }
126
- }
127
- }
128
- }
129
- }
130
- }
131
-
132
- &[class*=_display_input] {
133
- input[type="checkbox"],
134
- input[type="radio"] {
135
- &:checked {
136
- ~label {
137
- border-width: $pb_card_border_width;
138
- outline: 1px solid $primary;
139
- }
140
-
141
- }
142
- }
143
-
144
- > label {
145
- outline: 1px solid transparent;
146
- padding: $space_sm;
147
- }
148
-
149
- &.dark {
150
- input[type="checkbox"],
151
- input[type="radio"] {
152
- &:checked ~ label {
153
- border-width: $pb_card_border_width;
154
- outline: 1px solid $primary;
155
- }
156
- }
157
91
  }
158
92
  }
159
93
 
@@ -66,7 +66,6 @@ const SelectableCard = (props: SelectableCardProps) => {
66
66
  'checked': checked,
67
67
  'disabled': disabled,
68
68
  'enabled': !disabled,
69
- 'display_input': variant === 'displayInput',
70
69
  }),
71
70
  { error },
72
71
  dark ? 'dark' : '',
@@ -25,7 +25,7 @@
25
25
  <% end %>
26
26
  <div class="separator"></div>
27
27
  <div class="psuedo_separator"></div>
28
- <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
28
+ <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
29
29
  <% if content.nil? %>
30
30
  <%= pb_rails("body", props: { text: object.text }) %>
31
31
  <% else %>
@@ -25,7 +25,7 @@ module Playbook
25
25
 
26
26
  def classname
27
27
  [
28
- generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
28
+ generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
29
29
  error_class,
30
30
  dark_props,
31
31
  ].compact.join(" ")
@@ -79,10 +79,6 @@ module Playbook
79
79
  def error_class
80
80
  error ? "error" : nil
81
81
  end
82
-
83
- def display_input_class
84
- variant == "display_input" ? "display_input" : nil
85
- end
86
82
  end
87
83
  end
88
84
  end