playbook_ui 12.31.0.pre.alpha.hoverrails951 → 12.31.0.pre.alpha.multilevelnopillsdesigns941

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.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
  3. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  4. data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -1
  5. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -0
  6. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -2
  7. data/app/pb_kits/playbook/utilities/_hover.scss +1 -1
  8. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  9. data/dist/playbook-rails.js +2 -2
  10. data/lib/playbook/classnames.rb +0 -2
  11. data/lib/playbook/kit_base.rb +0 -4
  12. data/lib/playbook/version.rb +1 -1
  13. metadata +2 -6
  14. data/app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb +0 -3
  15. data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb +0 -25
  16. data/lib/playbook/border_radius.rb +0 -29
  17. data/lib/playbook/hover.rb +0 -60
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3126e0971e1092c47d8dfa988f36a2dca2ac152bd0ef7f5437d44ef25696931e
4
- data.tar.gz: e25f1f5019db99a6b314df9c6eda14cdd4a63ac544b160c0d8d044418b25c6ff
3
+ metadata.gz: 6338c934943b1c56fef912cfbe032aa415b7288be0d44b23df01b858c4a12c0c
4
+ data.tar.gz: 55f1ac8191a65068030e682e8f7d50e337ce6c74c07ad160c5dd61b795d88bbb
5
5
  SHA512:
6
- metadata.gz: 8a3838e0866216c40824eb2fa6e314a4e80c5b3c189b1e15402f7e326dcfb5246580504684a09691e9ebdbdb7d91aaca1fe5824f6c69b95cd85d5e1241b2f10b
7
- data.tar.gz: d69a65e9e3b64dcef3a777a63d20e2bded1768d791dd1b48117d026a7f1b7ce59d4ead07c4ce523644847bc39957f207fad0eb2470d5c13e10c34d01ad18323a
6
+ metadata.gz: 309bd3c9d0885a98a6a280aa7182bcc7617d83cc7f788a435649c832d1188b972c22c4382530c0e30d02c680daa648ce9d0cfb65ee3b2b510ee42a5492440ded
7
+ data.tar.gz: 1f8e1b6f661fa9554fa85e9c75a2f5145745179361392a86eddbc8c11a1c8c165e82d8a9040b34daca088e0b73155e8b984c78d12d85a9df2fc3fb7beaf2a0bf
data/app/pb_kits/playbook/pb_button/docs/example.yml CHANGED
@@ -10,7 +10,6 @@ examples:
10
10
  - button_options: Button Additional Options
11
11
  - button_size: Button Size
12
12
  - button_form: Button Form Attribute
13
-
14
13
  react:
15
14
  - button_default: Button Variants
16
15
  - button_full_width: Button Full Width
data/app/pb_kits/playbook/pb_card/_card_mixin.scss CHANGED
@@ -53,7 +53,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
53
53
  };
54
54
 
55
55
  @each $name, $shadow in $box_shadows {
56
- &[class^=_#{$name}] {
56
+ &[class*=_#{$name}] {
57
57
  box-shadow: $shadow;
58
58
  }
59
59
  }
data/app/pb_kits/playbook/pb_message/docs/example.yml CHANGED
@@ -3,7 +3,6 @@ examples:
3
3
  rails:
4
4
  - message_default: Default
5
5
  - message_timestamp: With Timestamp Hover
6
- - message_hover: Hover
7
6
 
8
7
 
9
8
  react:
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED
@@ -36,6 +36,7 @@
36
36
  input {
37
37
  border: none;
38
38
  font-family: $font_family_base;
39
+ font-size: $font_base;
39
40
  &:focus {
40
41
  outline: none;
41
42
  }
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -6,6 +6,7 @@ import Checkbox from "../pb_checkbox/_checkbox"
6
6
  import Icon from "../pb_icon/_icon"
7
7
  import FormPill from "../pb_form_pill/_form_pill"
8
8
  import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
9
+ import Body from "../pb_body/_body"
9
10
  import { cloneDeep } from "lodash"
10
11
 
11
12
  import {
@@ -250,6 +251,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
250
251
  }
251
252
  }
252
253
 
254
+ const itemsSelectedLength = () => {
255
+ let items
256
+ if (returnAllSelected && returnedArray && returnedArray.length) {
257
+ items = returnedArray.length
258
+ } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
259
+ items = defaultReturn.length
260
+ }
261
+ return items
262
+ }
253
263
  //rendering formattedData to UI based on typeahead
254
264
  const renderNestedOptions = (items: { [key: string]: any }[]) => {
255
265
  return (
@@ -310,7 +320,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
310
320
  <div {...ariaProps} {...dataProps} className={classes} id={id}>
311
321
  <div ref={dropdownRef} className='wrapper'>
312
322
  <div className='input_wrapper' onClick={handleInputWrapperClick}>
313
- <div className='input_inner_container'>
323
+ <div className='input_inner_container' style={{display: `${inputDisplay === "none" && "flex"}`}}>
314
324
  {returnedArray.length !== 0 && returnAllSelected
315
325
  ? returnedArray.map((item) => (
316
326
  <input type='hidden' name={`${name}[]`} value={item.id} />
@@ -339,6 +349,11 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
339
349
  ))
340
350
  : null
341
351
  }
352
+ {
353
+ inputDisplay === "none" && itemsSelectedLength() && (
354
+ <Body paddingRight="xs">{`${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`}</Body>
355
+ )
356
+ }
342
357
  {returnedArray.length !== 0 && returnAllSelected && inputDisplay === "pills" && <br />}
343
358
  {defaultReturn.length !== 0 && !returnAllSelected && inputDisplay === "pills" && <br />}
344
359
  <input
@@ -346,7 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
346
361
  onChange={(e) => {
347
362
  setFilterItem(e.target.value)
348
363
  }}
349
- placeholder='Start typing...'
364
+ placeholder={inputDisplay === "none" && itemsSelectedLength() ? "" : "Start typing..."}
350
365
  value={filterItem}
351
366
  onClick={() => setIsClosed(false)}
352
367
  />
data/app/pb_kits/playbook/utilities/_hover.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @mixin hover-color-classes($colors-list) {
4
4
  @each $name, $color in $colors-list {
5
- .hover_background_#{$name}:hover {
5
+ .bg-hover-#{$name}:hover {
6
6
  background-color: $color !important;
7
7
  transition: background-color $transition-speed ease;
8
8
  }
data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED
@@ -147,7 +147,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
147
147
  let css = '';
148
148
  if (!hover) return css;
149
149
  css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
150
- css += hover.background ? `hover_background_${hover.background } ` : '';
150
+ css += hover.background ? `bg-hover-${hover.background } ` : '';
151
151
  css += hover.scale ? `hover_scale_${hover.scale} ` : '';
152
152
  return css;
153
153
  },