playbook_ui 14.9.0.pre.rc.12 → 14.9.0.pre.rc.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f008d22756b57b8507454a1a51e27dfc9d145bb95f2e85ab6bd38a4e737b5103
-  data.tar.gz: 990c407a7f972e7189e42b7fea5d4854b72d83b4746cd1030a7301de9a3ede8c
+  metadata.gz: bab858e0ef86e0536cb3f24891e4be7ca0dbcb4a07edd29232784114fdd8fb38
+  data.tar.gz: 5ab99e6d31b1124ecca558cc0908e3179c3cb83ddb4015acfed8f0815af462bd
 SHA512:
-  metadata.gz: f4d2d0829ce2a314b4d220d53d42213d3af2c566ae4d739c9c6e675f6b3289bbbbd8471e02c1749d41496b9eb559af61cd38381c9660c1a074f712f48692b160
-  data.tar.gz: b55ff1b6906b80b3cbd61ada470258b47db1db2e5caf67e648b53c47d6c430256ea6e6a28c4f925b65458418c70420ada82fa68de483d23ca978bb4f01679e07
+  metadata.gz: 002d3f1e386098d7c1d8100cd751b4a63733bc4f17da06aefefce51b60ebbbf24f092ed9fe94ba91d80ef6521a24896c7ed70b82f8b9cbe9e44ddd935ecb3b4e
+  data.tar.gz: 75cf8ddd05525230a2f814419375d7929e0960f2a9d1568918751b3f5ecf348be1db3c542f438f818cf943c0c39ae9bde2ce7f14075df6b7268570c7722b809b

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -145,6 +145,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     } : {})
   };
 
+  const dynamicInlineProps = globalInlineProps(props);
+  const combinedStyles = {
+    ...backgroundStyle,
+    ...dynamicInlineProps
+  };
+
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -158,7 +164,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        style={backgroundStyle}
+        style={combinedStyles}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -75,6 +75,7 @@ const Collapsible = ({
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
       <div
@@ -83,6 +84,7 @@ const Collapsible = ({
           {...htmlProps}
           className={classes}
           id={id}
+          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -101,7 +101,11 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const swapNegative = size === "sm" && symbol !== ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
+  const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
   const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
   const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
@@ -118,7 +122,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           <>
-            <div>{symbol}</div>
+            <div>{handleNegative}{symbol}</div>
             <div>{getAmount}</div>
             <div>
               {getAbbreviation}
@@ -132,7 +136,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              {symbol}
+              {handleNegative}{symbol}
             </Body>
 
             <Title

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -3,12 +3,12 @@
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.symbol %></div>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
       <div><%= object.title_props[:text] %></div>
       <div><%= object.body_props[:text] %></div>
     <% else %>
       <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.symbol %>
+        <%= object.negative_sign %><%= object.symbol %>
       <% end %>
       <%= pb_rails("title", props: object.title_props) %>
       <%= pb_rails("body", props: object.body_props) %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,12 +68,20 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
       end
 
+      def abbr_or_format_amount
+        abbreviate ? abbreviated_value : formatted_amount
+      end
+
+      def negative_sign
+        amount.starts_with?("-") && swap_negative ? "-" : ""
+      end
+
       def body_props
         {
           text: units_element,
@@ -159,6 +167,14 @@ module Playbook
           whole_value
         end
       end
+
+      def absolute_amount(amount_string)
+        amount_string.sub(/^-/, "")
+      end
+
+      def swap_negative
+        size == "sm" && symbol != ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -65,7 +65,7 @@ test('decimals default prop returns decimals as body text', () => {
 
 test('commaSeparator prop returns comma separated amount', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890"
         commaSeparator
         data={{ testid: 'comma-test' }}
@@ -76,7 +76,7 @@ test('commaSeparator prop returns comma separated amount', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals' }}
@@ -87,7 +87,7 @@ test('commaSeparator prop returns comma separated amount with decimals', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals-matching' }}
@@ -96,3 +96,40 @@ test('commaSeparator prop returns comma separated amount with decimals="matching
   )
   expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
 })
+
+test('handles negative amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount="-320"
+          data={{ testid: 'test-negative-default' }}
+      />
+      <Currency
+          abbreviate
+          amount="-3200000"
+          data={{ testid: 'test-negative-millions' }}
+      />
+      <Currency
+          amount="-123456.78"
+          commaSeparator
+          data={{ testid: 'test-negative-comma-decimals' }}
+      />
+      <Currency
+          amount="-400.50"
+          data={{ testid: 'test-negative-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount="-500.55"
+          data={{ testid: 'test-negative-medium-size' }}
+          size="md"
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-negative-default')).toHaveTextContent('-$320')
+  expect(screen.getByTestId('test-negative-millions')).toHaveTextContent('-$3.2M')
+  expect(screen.getByTestId('test-negative-comma-decimals')).toHaveTextContent('-$123,456.78')
+  expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
+  expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "sm",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyNegative = (props) => {
+  return (
+    <>
+      <Currency
+          amount="-2,000.50"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNegative

data/app/pb_kits/playbook/pb_currency/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
   
   react:
   - currency_variants: Variants
@@ -19,6 +20,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
 
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js

@@ -6,3 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -7,7 +7,7 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
 
@@ -101,6 +101,8 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
 
   const classes = classnames(buildCss("pb_drawer_wrapper"), className);
 
+  const dynamicInlineProps = globalInlineProps(props)
+
   const [triggerOpened, setTriggerOpened] = useState(false);
 
   const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
@@ -198,6 +200,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...dataProps}
           {...htmlProps}
           className={classes}
+          style={dynamicInlineProps}
       >
           {isModalVisible && (
             <div

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type ImageType = {
@@ -41,6 +41,7 @@ const Image = (props: ImageType): React.ReactElement => {
     globalProps(props),
     className
   )
+  const dynamicInlineProps = globalInlineProps(props)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -56,6 +57,7 @@ const Image = (props: ImageType): React.ReactElement => {
         id={id}
         onError={onError}
         src={url}
+        style={dynamicInlineProps}
     />
   )
 }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -19,7 +19,7 @@ type LayoutPropTypes = {
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
   layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
-}
+} & GlobalProps
 
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -159,6 +159,8 @@ const Layout = (props: LayoutPropTypes) => {
   const filteredProps = {...props}
   delete filteredProps?.position
 
+  const dynamicInlineProps = globalInlineProps(props)
+
   return (
     <div
         {...ariaProps}
@@ -171,7 +173,8 @@ const Layout = (props: LayoutPropTypes) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
-      )}
+        )}
+        style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
       {nonSideChildren}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,6 +39,7 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
+    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -57,6 +58,7 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
+            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,6 +38,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -47,6 +48,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
+        style={dynamicInlineProps}
     >
       {
         children && children ||

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
     TableHead,
@@ -66,6 +66,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
+    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -154,6 +155,7 @@ const Table = (props: TableProps): React.ReactElement => {
                             {...htmlProps}
                             className={classNames}
                             id={id}
+                            style={dynamicInlineProps}
                         >
                             {children}
                         </table>
@@ -164,6 +166,7 @@ const Table = (props: TableProps): React.ReactElement => {
                             {...htmlProps}
                             className={classNames}
                             id={id}
+                            style={dynamicInlineProps}
                         >
                             {children}
                         </div>
@@ -177,6 +180,7 @@ const Table = (props: TableProps): React.ReactElement => {
                         {...htmlProps}
                         className={classNames}
                         id={id}
+                        style={dynamicInlineProps}
                     >
                         {children}
                     </table>
@@ -187,6 +191,7 @@ const Table = (props: TableProps): React.ReactElement => {
                         {...htmlProps}
                         className={classNames}
                         id={id}
+                        style={dynamicInlineProps}
                     >
                         {children}
                     </div>