playbook_ui 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

data/lib/playbook/display.rb

@@ -18,7 +18,7 @@ module Playbook
       else
         selected_props.each do |k|
           display_value = send(k)
-          css += "display_#{display_value}" if display_values.include?(display_value)
+          css += "display_#{display_value} " if display_values.include?(display_value)
         end
       end
       css unless css.blank?

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.15.0"
-  VERSION = "14.15.0.pre.alpha.PBNTR477draggabledropzone6743"
+  VERSION = "14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.15.0.pre.alpha.PBNTR477draggabledropzone6743
+  version: 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-18 00:00:00.000000000 Z
+date: 2025-03-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1182,9 +1182,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
@@ -1315,17 +1312,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx
 - app/pb_kits/playbook/pb_dropdown/utilities/index.ts
 - app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx
-- app/pb_kits/playbook/pb_empty_state/_empty_state.scss
-- app/pb_kits/playbook/pb_empty_state/_empty_state.tsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg
-- app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx
-- app/pb_kits/playbook/pb_empty_state/docs/example.yml
-- app/pb_kits/playbook/pb_empty_state/docs/index.js
-- app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
 - app/pb_kits/playbook/pb_enhanced_element/index.ts
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
@@ -3162,7 +3148,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
@@ -3428,11 +3413,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-ao5qHhWT.js
-- dist/chunks/_weekday_stacked-D3z4bJdI.js
+- dist/chunks/_typeahead-B8f4HM8I.js
+- dist/chunks/_weekday_stacked-BVO5G6au.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BeKPJYlk.js
-- dist/chunks/pb_form_validation-BvDxpfs-.js
+- dist/chunks/lib-5OzNgeeu.js
+- dist/chunks/pb_form_validation-DGhKbZtO.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx

@@ -1,182 +0,0 @@
-import React, { useState } from "react";
-import { Body, Flex, FlexItem, Card, Caption, Draggable, DraggableProvider } from "playbook-ui";
-
-// Initial items to be dragged
-const dataShadow = [
-  {
-    id: "51",
-    text: "Task 1",
-  },
-  {
-    id: "52",
-    text: "Task 2",
-  },
-  {
-    id: "53",
-    text: "Task 3",
-  },
-];
-
-const dataOutline = [
-  {
-    id: "61",
-    text: "Task 1",
-  },
-  {
-    id: "62",
-    text: "Task 2",
-  },
-  {
-    id: "63",
-    text: "Task 3",
-  },
-];
-
-const dataLine = [
-  {
-    id: "71",
-    text: "Task 1",
-  },
-  {
-    id: "72",
-    text: "Task 2",
-  },
-  {
-    id: "73",
-    text: "Task 3",
-  },
-];
-
-const DraggableDropZones = (props) => {
-  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
-  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
-  const [initialLineState, setInitialLineState] = useState(dataLine);
-
-  return (
-    <>
-    <Flex justify="between"
-        justifyContent="center"
-        {...props}
-    >
-      <FlexItem marginRight="lg">
-        <DraggableProvider
-            dropZone="shadow"
-            dropZoneDirection="vertical"
-            initialItems={dataShadow}
-            onReorder={(items) => setInitialShadowState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Shadow"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialShadowState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem marginRight="lg">
-        <DraggableProvider
-            dropZone="outline"
-            dropZoneDirection="vertical"
-            initialItems={dataOutline}
-            onReorder={(items) => setInitialOutlineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Outline"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialOutlineState.map(({ id, text }) => (
-              <Card
-                  dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem>
-        <DraggableProvider
-            dropZone="line"
-            dropZoneDirection="vertical"
-            initialItems={dataLine}
-            onReorder={(items) => setInitialLineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Line"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialLineState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
-    </>
-  );
-};
-
-export default DraggableDropZones;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md

@@ -1,5 +0,0 @@
-The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
-
-By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
-
-When changing the styling of your drop zones in a vertical view, please be sure to set the `dropZoneDirection` prop to "vertical". By default, it is set to "horizontal".

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx

@@ -1,94 +0,0 @@
-import React, { useState } from "react";
-import { Flex, Image, Caption, Draggable, DraggableProvider } from "playbook-ui";
-
-// Initial items to be dragged
-const dataPrimary = [
-  {
-    id: "81",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "82",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "83",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-const dataPurple = [
-  {
-    id: "91",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "92",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "93",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-
-const DraggableDropZoneColors = (props) => {
-  const [initialPrimaryState, setInitialPrimaryState] = useState(dataPrimary);
-  const [initialPurpleState, setInitialPurpleState] = useState(dataPurple);
-
-  return (
-    <>
-    <Caption marginBottom="xs">
-      Primary
-    </Caption>
-    <DraggableProvider
-        dropZone="shadow"
-        dropZoneColor="primary"
-        initialItems={dataPrimary}
-        onReorder={(items) => setInitialPrimaryState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPrimaryState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    <Caption marginBottom="xs">
-      Purple
-    </Caption>
-    <DraggableProvider
-        dropZone="outline"
-        dropZoneColor="purple"
-        initialItems={dataPurple}
-        onReorder={(items) => setInitialPurpleState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPurpleState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    </>
-  );
-};
-
-export default DraggableDropZoneColors;

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -1,38 +0,0 @@
-.pb_empty_state_kit {
-
-  .sm-state-vertical {
-    width: 150px;
-  }
-
-  .md-state-vertical {
-    width: 300px;
-  }
-
-  .lg-state-vertical {
-    width: 450px;
-  }
-
-  .sm-state-horizontal {
-    width: max-content;
-    max-width: 400px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-  .md-state-horizontal {
-    width: max-content;
-    max-width: 600px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-  .lg-state-horizontal {
-    width: max-content;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-}

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -1,213 +0,0 @@
-
-import React from "react"
-import ReactDOMServer from "react-dom/server"
-import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
-import Title from "../pb_title/_title"
-import Body from "../pb_body/_body"
-import Button from "../pb_button/_button"
-import Detail from "../pb_detail/_detail"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
-import Image from "../pb_image/_image"
-import computer from "./docs/default_image/utils"
-
-type EventHandler = (React.MouseEventHandler<HTMLElement>)
-
-type EmptyStateProps = {
-  aria?: { [key: string]: string },
-  alignment?: "center" | "left" | "right",
-  className?: string,
-  data?: { [key: string]: string },
-  description?: string,
-  header?: string,
-  id?: string,
-  image?: string,
-  linkButton?: string,
-  onLinkButtonClick?: EventHandler,
-  onPrimaryButtonClick?: EventHandler,
-  orientation?: "horizontal" | "vertical",
-  primaryButton?: string,
-  size?: "sm" | "md" | "lg",
-}
-
-const EmptyState = (props: EmptyStateProps) => {
-  const {
-    aria = {},
-    alignment = "center",
-    className,
-    data = {},
-    description,
-    header = "",
-    id,
-    image,
-    linkButton,
-    onLinkButtonClick,
-    onPrimaryButtonClick,
-    orientation = "vertical",
-    primaryButton,
-    size = "md",
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
-
-  const renderContent = () => {
-    const sizeConfigs = {
-      sm: {
-        vertical: {
-          imageWidth: "100px",
-          titleSize: 4,
-          titlePadding: "xxs",
-          descriptionPadding: "sm",
-          buttonSize: "sm",
-          buttonMargin: "xs",
-          scssClassName: "sm-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "100px",
-          titleSize: 4,
-          titlePadding: "xxs",
-          descriptionPadding: "sm",
-          buttonSize: "sm",
-          buttonMargin: "xs",
-          scssClassName: "sm-state-horizontal",
-          column: "",
-        },
-      },
-      md: {
-        vertical: {
-          imageWidth: "140px",
-          titleSize: 3,
-          titlePadding: "xs",
-          descriptionPadding: "md",
-          buttonSize: "md",
-          buttonMargin: "sm",
-          scssClassName: "md-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "140px",
-          titleSize: 3,
-          titlePadding: "xs",
-          descriptionPadding: "md",
-          buttonSize: "md",
-          buttonMargin: "sm",
-          scssClassName: "md-state-horizontal",
-          column: "",
-        },
-      },
-      lg: {
-        vertical: {
-          imageWidth: "100%",
-          titleSize: 1,
-          titlePadding: "sm",
-          descriptionPadding: "lg",
-          buttonSize: "md",
-          buttonMargin: "md",
-          scssClassName: "lg-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "100%",
-          titleSize: 2,
-          titlePadding: "sm",
-          descriptionPadding: "lg",
-          buttonSize: "md",
-          buttonMargin: "md",
-          scssClassName: "lg-state-horizontal",
-          column: "",
-        },
-      },
-    };
-
-    const configs = sizeConfigs[size]?.[orientation]
-    const alignFlex = alignment === "center" ? "center" : alignment === "right" ? "end" : "start"
-    const alignText = alignment === "center" ? "center" : alignment === "right" ? "right" : undefined
-
-    const getSvgAsDataUrl = () => {
-      const svgString = ReactDOMServer.renderToStaticMarkup(computer)
-      const encodedSvg = encodeURIComponent(svgString)
-      return `data:image/svg+xml,${encodedSvg}`
-    }
-
-    const layout = (
-      <div {...ariaProps}
-          {...dataProps}
-          className={classes}
-          id={id}
-      >
-        <Flex align={alignFlex}
-            className={configs.scssClassName}
-            orientation={configs.column as "column" | "row" | undefined}
-            paddingLeft="xl"
-            paddingRight="xl"
-            vertical="center"
-        >
-
-          { image && image === 'default' ? (
-            <Image
-                alt="test"
-                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={getSvgAsDataUrl()}
-            />
-          ) : image && image ? (
-            <Image
-                alt="test"
-                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={image}
-            />
-          ) : null}
-
-          <FlexItem >
-            <Title paddingBottom={configs.titlePadding as "xxs" | "xs" | "sm" | undefined}
-                size={configs.titleSize as 1 | 2 | 3 | 4 | undefined}
-                text={header}
-                textAlign={alignText}
-            />
-
-            { size !== "sm" ? (
-              <Body paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
-                  text={description}
-                  textAlign={alignText}
-              />
-            ) : (
-              <Detail paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
-                  text={description}
-                  textAlign={alignText}
-              />
-            )}
-
-            { primaryButton ? (
-                <Button
-                    marginBottom={configs.buttonMargin as "xs" | "sm" | "md" | undefined}
-                    onClick={onPrimaryButtonClick}
-                    size={configs.buttonSize as "sm" | "md" | undefined}
-                    text={primaryButton}
-                    variant="primary"
-                    width="100%"
-                />
-            ) : null }
-
-            { linkButton ? (
-                <Button onClick={onLinkButtonClick}
-                    size={configs.buttonSize as "sm" | "md" | undefined}
-                    text={linkButton}
-                    variant="link"
-                    width="100%"
-                />
-            ) : null }
-
-          </FlexItem>
-        </Flex>
-      </div>
-    )
-    return layout
-  }
-  return renderContent()
-}
-
-export default EmptyState

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-
-const EmptyStateAlignment = (props) => (
-  <Flex align="center"
-      spacing="evenly"
-  >
-      <EmptyState
-          {...props}
-          alignment="left"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-      <EmptyState
-          {...props}
-          alignment="center"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-      <EmptyState
-          {...props}
-          alignment="right"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-  </Flex>
-)
-
-export default EmptyStateAlignment

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-
-const EmptyStateDefault = (props) => (
-  <Flex align="center"
-      orientation="column"
-  >
-    <EmptyState
-        {...props}
-        description="Body text goes into detail with possible steps for user to take"
-        header="Title Explains"
-        image="default"
-    />
-  </Flex>
-)
-
-export default EmptyStateDefault