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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 47df7361ecd0e78edc227fa98782659d159fa48cc09d56fdc976e64e4c0e838a
4
- data.tar.gz: b8561d24c9fa6a764cc38efa5bcd41ae97d90065f3fb8cf221eb16a5c9c0d1a0
3
+ metadata.gz: 38967efe7f613ebe395182885e76a479a253d06b235e8bd97deb65a729280db2
4
+ data.tar.gz: ae918779c2270c3d255938c190d2458499b53cc96420e9697d517fa92fd87cac
5
5
  SHA512:
6
- metadata.gz: fda80414a2c85a22dd6867d5cff164f074716f587676be76215c112d81288a2a2e3be7da20d9e46a8837c873802b7d37376db28e5dff6c1eb354c09de493e4db
7
- data.tar.gz: 77cb368a1fed05dd01787c14f71cc6654814b550b942956f360e9682abd11e55452ec504300285c754ef0649a10b90d44b91f28459c3bcaf19dc05fccedc043e
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, globalInlineProps } from '../utilities/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, globalInlineProps } from "../utilities/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
- .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
@@ -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('pb_dropdown')
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, globalInlineProps } from '../utilities/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, globalInlineProps} from '../utilities/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={combinedStyles}
45
+ style={fixedStyle}
52
46
  >
53
47
  {children}
54
48
  </div>
@@ -1,5 +1,8 @@
1
- <%= pb_content_tag(:div,
2
- style: object.inline_styles
3
- ) do %>
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ style: object.style_value,
6
+ **combined_html_options) do %>
4
7
  <%= content.presence %>
5
8
  <% end %>
@@ -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 inline_styles
24
- styles = []
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' | 'maxHeight' | 'minHeight'>
24
+ type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
25
25
 
26
26
  type PbPopoverProps = {
27
27
  aria?: { [key: string]: string };
@@ -1,7 +1,4 @@
1
1
  export default [
2
- "minHeight",
3
- "maxHeight",
4
- "height",
5
2
  "left",
6
3
  "bottom",
7
4
  "right",
@@ -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 & Height & MaxHeight & MinHeight;
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') {