playbook_ui 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963 → 14.25.0.pre.alpha.testingcss9700

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ee315a459262d17524d4034ee8ee267a36cb55a6bff5ab517eded1823079b82
-  data.tar.gz: 214124df5701381babad6d1c668e2d821852a12ea69e76c654b80142005b86ef
+  metadata.gz: 5a1eeaf2f62d7b4fd094d05bede8f832f9021bf561d33cd0ac02fcd03e8e700f
+  data.tar.gz: 251d98bd7c327124c0e179dbcfc37f10d65728418a0b6c6a5bee775cdce5b3ab
 SHA512:
-  metadata.gz: c809a3b70d4575e569eb8651e363753b1ddf1d8b655158d1c0028eeee1510007c2c029d4e425571b9dd27258573f07344b2b8bb4880cf0a1a48e98cdfdf8010a
-  data.tar.gz: c36c53928fcc035ce43a88d6f3523b71895d49eae26ab8231984df5517a18724fa9801c0e130f20f31545e31c2ba3d666080b74ba7f53c73d1af83487aa77bad
+  metadata.gz: e7d20ec1e7dccd4947ed03b7f50e74809c4e8c18a30fc9fb075c4ede04c6053d86cbc7397fa443fdfb6abdfa62b8ad5a77d65a607fe8b4f9d5bb97dcde98bac3
+  data.tar.gz: d2ad121581858362b9250eb43eafb4d30e38b066bb46de721a6a1a6be3746279a2fb5d7f05fa2025cd764c30c938e00700841d74e602a4ea8981bee79e2df297

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 import { getAllIcons } from "../utilities/icons/allicons"
-import { camelToSnakeCase } from '../utilities/text'
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -115,20 +114,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-  // Convert cursor prop to CSS-style format to apply to input tag below
-  const getCursorStyle = (cursor?: string): string => {
-    // If input is disabled, always use 'not-allowed'
-    if (disableInput) return 'not-allowed'
-
-    // If cursor prop is provided, convert it to styling format
-    if (cursor) {
-      return camelToSnakeCase(cursor).replace(/_/g, '-')
-    }
-
-    // Default to 'pointer'
-    return 'pointer'
-  }
-
   useEffect(() => {
     datePickerHelper({
       allowInput,
@@ -164,7 +149,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
-
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -179,7 +163,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -193,7 +176,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
-
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -224,7 +206,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   name={name}
                   onChange={inputOnChange}
                   placeholder={placeholder}
-                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
                   value={inputValue}
               />
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -10,7 +10,6 @@
       <%= pb_rails("text_input", props: {
         aria: object.input_aria,
         autocomplete: false,
-        cursor: object.cursor,
         dark: object.dark,
         data: object.input_data,
         disabled: object.disable_input,

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,8 +2,7 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
-| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
+`neutral`, `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -4,9 +4,6 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
-type SizeType = Sizes | "none"
-type SizeResponsiveType = { [key: string]: SizeType }
-
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -21,9 +18,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: SizeType | SizeResponsiveType,
-  rowGap?: SizeType | SizeResponsiveType,
-  columnGap?: SizeType | SizeResponsiveType,
+  gap?: Sizes | "none",
+  rowGap?: Sizes| "none",
+  columnGap?: Sizes| "none",
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -56,9 +53,9 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = (gap !== 'none' && typeof gap === 'object') ? `gap_${gap}` : ''
-  const rowGapClass = (rowGap !== 'none' && typeof rowGap === 'object') ? `rowGap_${rowGap}` : ''
-  const columnGapClass = (columnGap !== 'none' && typeof columnGap === 'object') ? `columnGap_${columnGap}` : ''
+  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
+  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
+  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,14 +31,3 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
-
-<br/><br/>
-<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
-   <% 40.times do |i| %>
-    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
-   <% end %>
-  <% end %>
-</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -14,8 +13,6 @@ const FlexGap = (props) => {
 
   return (
     <>
-      <Title size={4}>Gap</Title>
-      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -30,10 +27,8 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br /><br />
-
-      <Title size={4}>Column Gap</Title>
       <br />
+
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -53,9 +48,6 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
-      <br /><br />
-
-      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -77,23 +69,6 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
-
-      <br /><br />
-      <Title size={4}>Responsive</Title>
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
-            wrap
-            {...props}
-        >
-          {count().map((v, key) => (
-            <FlexItem key={key}>
-              {v}
-            </FlexItem>
-            ))}
-        </Flex>
-      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md

@@ -0,0 +1,9 @@
+##### Prop
+
+*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
+
+- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
+
+- Setting the row_gap || rowGap prop creates space between rows in a flex container.
+
+- Setting the column_gap || columnGap prop creates space between columns in a flex container.

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,11 +24,17 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xxs xs sm md lg xl none],
+                 default: "none"
 
-      prop :row_gap
+      prop :row_gap, type: Playbook::Props::Enum,
+                     values: %w[xxs xs sm md lg xl none],
+                     default: "none"
 
-      prop :column_gap
+      prop :column_gap, type: Playbook::Props::Enum,
+                        values: %w[xxs xs sm md lg xl none],
+                        default: "none"
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -127,7 +133,7 @@ module Playbook
       end
 
       def gap_class
-        if gap == "none" || gap.nil? || gap.is_a?(Hash)
+        if gap == "none"
           nil
         else
           "gap_#{gap}"
@@ -135,7 +141,7 @@ module Playbook
       end
 
       def row_gap_class
-        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
+        if row_gap == "none"
           nil
         else
           "rowGap_#{row_gap}"
@@ -143,7 +149,7 @@ module Playbook
       end
 
       def column_gap_class
-        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
+        if column_gap == "none"
           nil
         else
           "columnGap_#{column_gap}"

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -242,8 +242,4 @@ svg {
       animation: fa-spin 1s infinite linear;
     }
   }
-
-  &.dark {
-    color: white;
-  }
 }

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,7 +16,6 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
-  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -29,7 +28,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
-    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -56,7 +54,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
+            icon="spinner"
             pulse
         />
         {text}

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
-  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
-  - loading_inline_variant: Variant

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

@@ -1,3 +1,2 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
-export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,21 +8,10 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[dotted solid],
-                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
-
-      def spinner_icon
-        if variant == "dotted"
-          "spinner"
-        elsif variant == "solid"
-          "spinner-solid"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -77,7 +77,6 @@ module Playbook
           name: mask.present? ? "" : name,
           pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
-          style: "cursor: #{cursor_style}",
           required: required,
           type: type,
           value: value,
@@ -85,20 +84,6 @@ module Playbook
         }.merge(input_options)
       end
 
-      def cursor_style
-        # If input is disabled, always use 'not-allowed'
-        return "not-allowed" if disabled
-
-        # If cursor prop is provided, convert it to kebab-case
-        if cursor.present?
-          # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
-          cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
-        else
-          # Default to 'pointer'
-          "pointer"
-        end
-      end
-
       def validation_message
         validation[:message] || ""
       end

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -1,18 +1,11 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name | `""` |  |
-| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
-| **image** | `Image?` | Sets image for the avatar | `nil` |  |
-| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
-| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
-| **territory** | `String?` | Adds the User's territory | `nil` |  |
-| **title** | `String?` | Adds a title | `nil` |  |
-| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
-| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
+| **name** | `String` | Sets the User's name |  |  |
 | **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
-| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
-| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
-| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
-| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
-
+| **image** | `Image` | Sets image for the avatar |  |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
+| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
+| **territory** | `String` | Adds the User's territory |  |  |
+| **title** | `String` | Adds a title |  |  |
+| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |

data/app/pb_kits/playbook/utilities/_gap.scss

@@ -1,17 +1,29 @@
 @import "spacing";
 
-$gap_values: (
-  none: 0,
-  xxs: $space_xxs,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
+.gap_none {
+  gap: 0;
+}
 
-@include global_props_responsive_css($gap_values, 'gap', 'gap');
+.gap_xxs {
+  gap: $space_xxs;
+}
 
-@include global_props_responsive_css($gap_values, 'column_gap', 'column-gap');
+.gap_xs {
+  gap: $space_xs;
+}
 
-@include global_props_responsive_css($gap_values, 'row_gap', 'row-gap');
+.gap_sm {
+  gap: $space_sm;
+}
+
+.gap_md {
+  gap: $space_md;
+}
+
+.gap_lg {
+  gap: $space_lg;
+}
+
+.gap_xl {
+  gap: $space_xl;
+}

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,8 +27,6 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
-  "rowGap",
-  "columnGap",
   "gap",
   "maxWidth",
   "minWidth",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -112,14 +112,6 @@ type Gap = {
   gap?: string,
 }
 
-type ColumnGap = {
-  columnGap?: string,
-}
-
-type RowGap = {
-  rowGap?: string,
-}
-
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -208,7 +200,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & ColumnGap & RowGap & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -385,25 +377,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     return css.trimEnd()
   },
   gapProps: ({ gap }: Gap) => {
-    if (typeof gap === 'object') {
-      return getResponsivePropClasses(gap, 'gap')
-    } else {
-      return gap ? `gap_${gap}` : ''
-    }
-  },
-  columnGapProps: ({ columnGap }: ColumnGap) => {
-    if (typeof columnGap === 'object') {
-      return getResponsivePropClasses(columnGap, 'column_gap')
-    } else {
-      return columnGap ? `column_gap_${columnGap}` : ''
-    }
-  },
-  rowGapProps: ({ rowGap }: RowGap) => {
-    if (typeof rowGap === 'object') {
-      return getResponsivePropClasses(rowGap, 'row_gap')
-    } else {
-      return rowGap ? `row_gap_${rowGap}` : ''
-    }
+    let css = ''
+    css += gap ? `gap_${gap} ` : ''
+    return css.trimEnd()
   },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]