playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4305 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4316

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 31ad89e3fa840597a7d38316aea7fcdd57bf7c4c1352e762d2845fc689346231
4
- data.tar.gz: 519831d474fdc0187abeadbdc328f4653fdaf566195596ca5f5c600be3214d1d
3
+ metadata.gz: 845eb3cdd33a7fef9c5af145bcf680907b6c74d5126bba69805acf33f3ff6a48
4
+ data.tar.gz: 18d01e30a45050069d838577a03df29a892c7ebe042ca8a252ed68b665fd7c56
5
5
  SHA512:
6
- metadata.gz: a0538a8f59b5c77c623501feb8f0b75a5cb39aa3238debd67ca27ec09f3ddbd59bb4562c14fd54edd6bf3fdd3ca86a570ecf4d71a998bcc68e6b7992be2731e7
7
- data.tar.gz: 9f7217f4ef982eb0e30e0f96687e8dfd0f281267397698e576d5a3af4462b07c2bab5a11877057936d8f829c3df83e6f6d60ea903ecdf13c416d4d56a552aeb2
6
+ metadata.gz: 06afa342868f031819a728684e905aaeb09445e855ac28938e3b746deb93e37bc0b0ff22f6d133d9b80f005c420cb3e500b3081f12e688844238658ba8ded457
7
+ data.tar.gz: '08f62a0749684bc633d09aed01b768aae32d2569fa0ee13224647bce0152ccce9016931104990822e12218c46e955cee0b81baafec0897c710407a979b7007b1'
@@ -28,8 +28,7 @@ $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;
32
- outline: 1px solid $border_color;
31
+ border-width: $pb_card_border_width * 2;
33
32
  }
34
33
 
35
34
  @mixin pb_card_selected_dark {
@@ -47,7 +47,7 @@ interface DropdownComponent
47
47
  Container: typeof DropdownContainer;
48
48
  }
49
49
 
50
- const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
50
+ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
51
51
  const {
52
52
  aria = {},
53
53
  autocomplete = false,
@@ -260,8 +260,7 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
260
260
  <DropdownContainer>
261
261
  {optionsWithBlankSelection &&
262
262
  optionsWithBlankSelection?.map((option: GenericObject) => (
263
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
264
- <ForwardedDropdown.Option key={option.id}
263
+ <DropdownOption key={option.id}
265
264
  option={option}
266
265
  />
267
266
  ))}
@@ -281,10 +280,10 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
281
280
  )
282
281
  }
283
282
 
284
- const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
285
- ForwardedDropdown.displayName = "Dropdown";
286
- ForwardedDropdown.Option = DropdownOption;
287
- ForwardedDropdown.Trigger = DropdownTrigger;
288
- ForwardedDropdown.Container = DropdownContainer;
283
+ Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
284
+ (Dropdown as DropdownComponent).displayName = "Dropdown";
285
+ (Dropdown as DropdownComponent).Option = DropdownOption;
286
+ (Dropdown as DropdownComponent).Trigger = DropdownTrigger;
287
+ (Dropdown as DropdownComponent).Container = DropdownContainer;
289
288
 
290
- export default ForwardedDropdown;
289
+ export default Dropdown;
@@ -10,6 +10,24 @@
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
+
13
31
  [class^=pb_selectable_card_kit] {
14
32
  display: block;
15
33
  margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
28
46
  padding: $space_sm;
29
47
  margin-bottom: $space_sm;
30
48
  cursor: pointer;
31
- outline: 1px solid transparent;
32
49
 
33
50
  @media (hover:hover) {
34
51
  &:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
74
91
 
75
92
  position: relative;
76
93
  @include pb_card_selected;
94
+ padding: calc(#{$space_sm} - 1px);
77
95
  transition-property: none;
78
96
  transition-duration: 0s;
79
97
 
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
88
106
  background-color: $royal;
89
107
  }
90
108
  }
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
+ &.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
+ }
91
157
  }
92
158
  }
93
159
 
@@ -67,6 +67,7 @@ const SelectableCard = (props: SelectableCardProps) => {
67
67
  'disabled': disabled,
68
68
  'enabled': !disabled,
69
69
  }),
70
+ variant === 'displayInput' ? 'display_input' : '',
70
71
  { error },
71
72
  dark ? 'dark' : '',
72
73
  className
@@ -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 }) do %>
28
+ <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) 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),
28
+ generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
29
29
  error_class,
30
30
  dark_props,
31
31
  ].compact.join(" ")
@@ -79,6 +79,10 @@ 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" : ""
85
+ end
82
86
  end
83
87
  end
84
88
  end