playbook_ui 14.6.0 → 14.6.2
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_card/_card.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +4 -4
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +2 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
- data/dist/chunks/_typeahead-BV_n6U5W.js +22 -0
- data/dist/chunks/{_weekday_stacked-C_QAqbqJ.js → _weekday_stacked-Cy__g00H.js} +2 -2
- data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +1 -21
- data/lib/playbook/version.rb +2 -2
- metadata +5 -5
- data/dist/chunks/_typeahead-BhHnXJjy.js +0 -22
- data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 38967efe7f613ebe395182885e76a479a253d06b235e8bd97deb65a729280db2
|
4
|
+
data.tar.gz: ae918779c2270c3d255938c190d2458499b53cc96420e9697d517fa92fd87cac
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f499509bb88d4ee1c130a23b40c9254b655bda121da66a084c48c7601b63b4c63113e1e35da272d92c20650a7e2ab27a65825a629c3c3082714d0a0662fffb3e
|
7
|
+
data.tar.gz: fa958023dcce99662705e2c3e108778cfd35ad051a03217e9d06725af4e267c8f9b4bb9884d81304df234d0316ca6f088384a9a171f2f7397972e11b3bbc83e8
|
@@ -5,7 +5,7 @@ import { get } from 'lodash'
|
|
5
5
|
import classnames from 'classnames'
|
6
6
|
|
7
7
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
8
|
-
import { GlobalProps, globalProps
|
8
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
9
9
|
import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
|
10
10
|
|
11
11
|
import Icon from '../pb_icon/_icon'
|
@@ -49,7 +49,6 @@ type CardBodyProps = {
|
|
49
49
|
padding?: string,
|
50
50
|
} & GlobalProps
|
51
51
|
|
52
|
-
|
53
52
|
// Header component
|
54
53
|
const Header = (props: CardHeaderProps) => {
|
55
54
|
const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
|
@@ -108,7 +107,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
108
107
|
|
109
108
|
// coerce to array
|
110
109
|
const cardChildren = React.Children.toArray(children)
|
111
|
-
const dynamicInlineProps = globalInlineProps(props);
|
112
110
|
|
113
111
|
const subComponentTags = (tagName: string) => {
|
114
112
|
return cardChildren.filter((c: string) => (
|
@@ -137,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
137
135
|
{...dataProps}
|
138
136
|
{...htmlProps}
|
139
137
|
className={classnames(cardCss, globalProps(props), className)}
|
140
|
-
style={dynamicInlineProps}
|
141
138
|
>
|
142
139
|
{subComponentTags('Header')}
|
143
140
|
{
|
@@ -166,7 +163,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
166
163
|
{...dataProps}
|
167
164
|
{...htmlProps}
|
168
165
|
className={classnames(cardCss, globalProps(props), className)}
|
169
|
-
style={dynamicInlineProps}
|
170
166
|
>
|
171
167
|
{subComponentTags('Header')}
|
172
168
|
{nonHeaderChildren}
|
@@ -6,7 +6,7 @@ import classnames from "classnames";
|
|
6
6
|
import Modal from "react-modal";
|
7
7
|
|
8
8
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
9
|
-
import { globalProps
|
9
|
+
import { globalProps } from "../utilities/globalProps";
|
10
10
|
|
11
11
|
import Body from "../pb_body/_body";
|
12
12
|
import Button from "../pb_button/_button";
|
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
91
91
|
beforeClose: "pb_dialog_overlay_before_close",
|
92
92
|
};
|
93
93
|
|
94
|
-
const dynamicInlineProps = globalInlineProps(props);
|
95
|
-
|
96
94
|
const classes = classnames(
|
97
95
|
buildCss("pb_dialog_wrapper"),
|
98
96
|
globalProps(props),
|
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
186
184
|
overlayClassName={overlayClassNames}
|
187
185
|
portalClassName={portalClassName}
|
188
186
|
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
|
189
|
-
style={{ content: dynamicInlineProps }}
|
190
187
|
>
|
191
188
|
<>
|
192
189
|
{title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
|
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
195
192
|
<Dialog.Body
|
196
193
|
className="dialog_status_text_align"
|
197
194
|
padding="md"
|
198
|
-
|
199
195
|
>
|
200
196
|
<Flex align="center"
|
201
197
|
orientation="column"
|
@@ -9,7 +9,7 @@
|
|
9
9
|
|
10
10
|
@import "./scss_partials/dropdown_animation";
|
11
11
|
|
12
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
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 ?
|
41
|
+
separators ? nil : "separators_hidden"
|
42
42
|
end
|
43
43
|
|
44
44
|
def options_with_blank
|
@@ -50,7 +50,7 @@ test('generated default kit and classname', () => {
|
|
50
50
|
|
51
51
|
const kit = screen.getByTestId(testId)
|
52
52
|
expect(kit).toBeInTheDocument()
|
53
|
-
expect(kit).toHaveClass('
|
53
|
+
expect(kit).toHaveClass('pb_dropdown_default')
|
54
54
|
})
|
55
55
|
|
56
56
|
test('generated default Trigger and Container when none passed in', () => {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { GlobalProps, globalProps
|
4
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
import { GenericObject, Sizes } from '../types'
|
6
6
|
|
7
7
|
type FlexProps = {
|
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
61
61
|
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
62
62
|
const dataProps = buildDataProps(data)
|
63
63
|
const htmlProps = buildHtmlProps(htmlOptions)
|
64
|
-
const dynamicInlineProps = globalInlineProps(props)
|
65
64
|
|
66
65
|
|
67
66
|
return (
|
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
84
83
|
globalProps(props),
|
85
84
|
className
|
86
85
|
)}
|
87
|
-
style={dynamicInlineProps}
|
88
86
|
{...dataProps}
|
89
87
|
{...htmlProps}
|
90
88
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { globalProps, GlobalProps
|
4
|
+
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
5
|
type FlexItemPropTypes = {
|
6
6
|
children: React.ReactNode[] | React.ReactNode,
|
7
7
|
fixedSize?: string,
|
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
35
35
|
const fixedStyle =
|
36
36
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
37
37
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
38
|
-
const dynamicInlineProps = globalInlineProps(props)
|
39
|
-
const combinedStyles = {
|
40
|
-
...fixedStyle,
|
41
|
-
...dynamicInlineProps
|
42
|
-
}
|
43
38
|
|
44
39
|
const htmlProps = buildHtmlProps(htmlOptions)
|
45
40
|
|
46
|
-
|
47
41
|
return (
|
48
42
|
<div
|
49
43
|
{...htmlProps}
|
50
44
|
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
51
|
-
style={
|
45
|
+
style={fixedStyle}
|
52
46
|
>
|
53
47
|
{children}
|
54
48
|
</div>
|
@@ -20,13 +20,8 @@ module Playbook
|
|
20
20
|
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
|
21
21
|
end
|
22
22
|
|
23
|
-
def
|
24
|
-
|
25
|
-
styles << "flex-basis: #{fixed_size};" if fixed_size.present?
|
26
|
-
styles << "height: #{height};" if height.present?
|
27
|
-
styles << "min-height: #{min_height};" if min_height.present?
|
28
|
-
styles << "max-height: #{max_height};" if max_height.present?
|
29
|
-
styles.join(" ")
|
23
|
+
def style_value
|
24
|
+
"flex-basis: #{fixed_size};" if fixed_size.present?
|
30
25
|
end
|
31
26
|
|
32
27
|
private
|
@@ -21,7 +21,7 @@ import classnames from "classnames";
|
|
21
21
|
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
22
22
|
import { uniqueId } from 'lodash';
|
23
23
|
|
24
|
-
type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'
|
24
|
+
type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
|
25
25
|
|
26
26
|
type PbPopoverProps = {
|
27
27
|
aria?: { [key: string]: string };
|
@@ -170,24 +170,12 @@ type ZIndex = {
|
|
170
170
|
zIndex?: ZIndexType,
|
171
171
|
} | ZIndexResponsiveType
|
172
172
|
|
173
|
-
type Height = {
|
174
|
-
height?: string
|
175
|
-
}
|
176
|
-
|
177
|
-
type MaxHeight = {
|
178
|
-
maxHeight?: string
|
179
|
-
}
|
180
|
-
|
181
|
-
type MinHeight = {
|
182
|
-
minHeight?: string
|
183
|
-
}
|
184
|
-
|
185
173
|
// keep this as the last type definition
|
186
174
|
export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
187
175
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
188
176
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
189
177
|
LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
|
190
|
-
Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left
|
178
|
+
Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
|
191
179
|
|
192
180
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
193
181
|
const keys: string[] = Object.keys(prop)
|
@@ -510,22 +498,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
510
498
|
} else {
|
511
499
|
return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
|
512
500
|
}
|
513
|
-
}
|
514
|
-
|
515
|
-
}
|
516
|
-
|
517
|
-
const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
|
518
|
-
heightProps: ({ height }: Height) => {
|
519
|
-
return height ? { height } : {};
|
520
|
-
},
|
521
|
-
|
522
|
-
maxHeightProps: ({ maxHeight }: MaxHeight) => {
|
523
|
-
return maxHeight ? { maxHeight } : {};
|
524
|
-
},
|
525
|
-
|
526
|
-
minHeightProps: ({ minHeight }: MinHeight) => {
|
527
|
-
return minHeight ? { minHeight } : {};
|
528
|
-
},
|
501
|
+
}
|
529
502
|
}
|
530
503
|
|
531
504
|
type DefaultProps = {[key: string]: string} | Record<string, unknown>
|
@@ -537,16 +510,6 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
|
|
537
510
|
}).filter((value) => value?.length > 0).join(" ")
|
538
511
|
}
|
539
512
|
|
540
|
-
// New function for inline styles
|
541
|
-
export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
|
542
|
-
const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
|
543
|
-
const result = PROP_INLINE_CATEGORIES[key](props);
|
544
|
-
return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
|
545
|
-
}, {});
|
546
|
-
|
547
|
-
return styles; // Return the styles object directly
|
548
|
-
}
|
549
|
-
|
550
513
|
|
551
514
|
export const deprecatedProps = (): void => {
|
552
515
|
// if (process.env.NODE_ENV === 'development') {
|