playbook_ui 12.31.0.pre.alpha.hoverrails951 → 12.31.0.pre.alpha.multilevelnopillsdesigns941
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -2
- data/app/pb_kits/playbook/utilities/_hover.scss +1 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/classnames.rb +0 -2
- data/lib/playbook/kit_base.rb +0 -4
- data/lib/playbook/version.rb +1 -1
- metadata +2 -6
- data/app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb +0 -3
- data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb +0 -25
- data/lib/playbook/border_radius.rb +0 -29
- data/lib/playbook/hover.rb +0 -60
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6338c934943b1c56fef912cfbe032aa415b7288be0d44b23df01b858c4a12c0c
|
|
4
|
+
data.tar.gz: 55f1ac8191a65068030e682e8f7d50e337ce6c74c07ad160c5dd61b795d88bbb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 309bd3c9d0885a98a6a280aa7182bcc7617d83cc7f788a435649c832d1188b972c22c4382530c0e30d02c680daa648ce9d0cfb65ee3b2b510ee42a5492440ded
|
|
7
|
+
data.tar.gz: 1f8e1b6f661fa9554fa85e9c75a2f5145745179361392a86eddbc8c11a1c8c165e82d8a9040b34daca088e0b73155e8b984c78d12d85a9df2fc3fb7beaf2a0bf
|
|
@@ -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=
|
|
364
|
+
placeholder={inputDisplay === "none" && itemsSelectedLength() ? "" : "Start typing..."}
|
|
350
365
|
value={filterItem}
|
|
351
366
|
onClick={() => setIsClosed(false)}
|
|
352
367
|
/>
|
|
@@ -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 ? `
|
|
150
|
+
css += hover.background ? `bg-hover-${hover.background } ` : '';
|
|
151
151
|
css += hover.scale ? `hover_scale_${hover.scale} ` : '';
|
|
152
152
|
return css;
|
|
153
153
|
},
|