playbook_ui_docs 16.9.0.pre.alpha.PLAY2967borderglobalprop17223 → 16.9.0.pre.alpha.PLAY3001updateviewcomponent16983

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3be2238d05e5f1d808a0f0102406a8dab71fd8fa7111191cdd8806a5528fc40
-  data.tar.gz: 05bb50d20b3d74e0f16a038a42d34830d5b23911501947d877b326be4c162376
+  metadata.gz: '09b2524eef7f04a9456a87cfb1c1cc15cefe88d88a330f956ac8a75d61229edb'
+  data.tar.gz: 24162bcf6936cf83eb0eae57d482abc719ff17cb58a10ef2a65780cd5b39372b
 SHA512:
-  metadata.gz: 55c806b8daaebf250672a0afa3a8c8281a5b6f13f8b3db39096e697a92dacd354b37ec3fcadad066dce55069804ae08942d0d39aa32c82da3094068331200687
-  data.tar.gz: 3c55875a8e6c8525f4683b7263df183ee02d426bd7c2de7815015b70b09da2d2022182d8275d379c7b7ad423a83d974fdc9d2a6e1b5185933726cf2a96033333
+  metadata.gz: 3e35a165b10de3f7be9f3681c6e395f61e4f6962cb5fe626689283b4b86c1031b49459bb075c0e7148ae73bef483393c290d8d5c84542652373257b55849379b
+  data.tar.gz: faca2dc7366ae84447e16cabb6231e96a3e3c05c3d030a7cf1edc3f68228e8e08ccbebef66badddd00fed4e08e6039afe81560af00d65b252f7a9bbce2ac7181

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb

@@ -1,339 +1,4 @@
-<%
-dropdown_options = [
-  { label: "Option 1", value: "1", id: "1" },
-  { label: "Option 2", value: "2", id: "2" },
-  { label: "Option 3", value: "3", id: "3" },
-]
-typeahead_options = [
-    { label: "Orange", value: "#FFA500" },
-    { label: "Blue", value: "#0000FF" },
-  ]
-%>
-
-<%= pb_rails("title", props: {
-  text: "Border Utilities",
-  size: 3,
-  margin_bottom: "md"
-}) %>
-
-<%= pb_rails("title", props: {
-  text: "Border Variants",
-  size: 4,
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("card", props: { border: "default", padding: "sm" }) do %>
-    default
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "active", padding: "sm" }) do %>
-    active
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "default_thick", padding: "sm" }) do %>
-    default_thick
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "active_thick", padding: "sm" }) do %>
-    active_thick
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "default_thicker", padding: "sm" }) do %>
-    default_thicker
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "active_thicker", padding: "sm" }) do %>
-    active_thicker
-  <% end %>
+<%= pb_rails("card", props: {
+})  do %>
+  Card content
 <% end %>
-
-<%= pb_rails("title", props: {
-  text: "Border Width Comparison",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("card", props: { border: "default", padding: "sm" }) do %>
-    1px
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "default_thick", padding: "sm" }) do %>
-    2px
-  <% end %>
-
-  <%= pb_rails("card", props: { border: "default_thicker", padding: "sm" }) do %>
-    4px
-  <% end %>
-<% end %>
-
-<%= pb_rails("title", props: {
-  text: "Directional Borders",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("card", props: { border_top: "active", padding: "sm" }) do %>
-    Top
-  <% end %>
-
-  <%= pb_rails("card", props: { border_bottom: "active", padding: "sm" }) do %>
-    Bottom
-  <% end %>
-
-  <%= pb_rails("card", props: { border_left: "active", padding: "sm" }) do %>
-    Left
-  <% end %>
-
-  <%= pb_rails("card", props: { border_right: "active", padding: "sm" }) do %>
-    Right
-  <% end %>
-
-  <%= pb_rails("card", props: { border_x: "active_thick", padding: "sm" }) do %>
-    X Axis
-  <% end %>
-
-  <%= pb_rails("card", props: { border_y: "active_thicker", padding: "sm" }) do %>
-    Y Axis
-  <% end %>
-<% end %>
-
-<%= pb_rails("title", props: {
-  text: "Border + Radius",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("flex", props: {
-    border: "default",
-    border_radius: "none",
-    padding: "md"
-  }) do %>
-    radius="none"
-  <% end %>
-
-  <%= pb_rails("flex", props: {
-    border: "active",
-    border_radius: "md",
-    padding: "md"
-  }) do %>
-    radius="md"
-  <% end %>
-
-  <%= pb_rails("flex", props: {
-    border: "default_thick",
-    border_radius: "lg",
-    padding: "md"
-  }) do %>
-    radius="lg"
-  <% end %>
-
-  <%= pb_rails("flex", props: {
-    border: "active_thicker",
-    border_radius: "rounded",
-    padding: "md"
-  }) do %>
-    radius="rounded"
-  <% end %>
-<% end %>
-
-<%= pb_rails("title", props: {
-  text: "Buttons & Icons",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: {
-  gap: "md",
-  wrap: true,
-}) do %>
-
-  <%= pb_rails("button", props: {
-    border: "default",
-    text: "Default",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("button", props: {
-    border: "active",
-    text: "Active",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("button", props: {
-    border: "default_thick",
-    text: "Thick",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("button", props: {
-    border: "active_thicker",
-    text: "Thicker",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("circle_icon_button", props: {
-    icon: "star",
-    border: "active",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "default"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "active"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "default_thick"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "active_thick"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "default_thicker"
-  }) %>
-
-  <%= pb_rails("icon", props: {
-    icon: "user",
-    border: "active_thicker"
-  }) %>
-
-<%= pb_rails("icon", props: {
-    icon: "rocket",
-    border: true
-  }) %>
-<% end %>
-
-<%= pb_rails("title", props: {
-  text: "Form Components",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: {
-  gap: "lg",
-  wrap: true
-}) do %>
-
-  <%= pb_rails("dropdown", props: {
-    label: "Dropdown",
-    options: dropdown_options,
-    border: "default"
-  }) %>
-
-  <%= pb_rails("typeahead", props: {
-    id: "border-utils-typeahead",
-    label: "Typeahead",
-    options: typeahead_options,
-    border: "active",
-    is_multi: false
-  }) %>
-
-  <%= pb_rails("date_picker", props: {
-    picker_id: "border-utils-datepicker",
-    name: "border_utils_date",
-    label: "Date Picker",
-    border: "active_thick"
-  }) %>
-
-<% end %>
-
-
-<%= pb_rails("title", props: {
-  text: "Containers",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("flex", props: {
-  gap: "md",
-  wrap: true
-}) do %>
-
-  <%= pb_rails("background", props: {
-    background_color: "neutral_subtle",
-    border: "default",
-    border_radius: "md",
-    padding: "md"
-  }) do %>
-    Default Border
-  <% end %>
-
-  <%= pb_rails("background", props: {
-    background_color: "neutral_subtle",
-    border: "active_thick",
-    border_radius: "lg",
-    padding: "md"
-  }) do %>
-    Active Thick Border
-  <% end %>
-
-<% end %>
-
-<%= pb_rails("title", props: {
-  text: "Dark Mode",
-  size: 4,
-  margin_top: "md",
-  margin_bottom: "sm"
-}) %>
-
-<%= pb_rails("background", props: {
-  background_color: "dark",
-  padding: "lg"
-}) do %>
-
-  <%= pb_rails("flex", props: {
-    gap: "md"
-  }) do %>
-
-    <%= pb_rails("card", props: {
-      dark: true,
-      border: "default",
-      padding: "sm"
-    }) do %>
-      default
-    <% end %>
-
-    <%= pb_rails("card", props: {
-      dark: true,
-      border: "active",
-      padding: "sm"
-    }) do %>
-      active
-    <% end %>
-
-    <%= pb_rails("flex", props: {
-      border: "default_thicker",
-      border_radius: "lg",
-      padding: "md"
-    }) do %>
-      default_thicker + radius
-    <% end %>
-
-    <%= pb_rails("button", props: {
-      border: "active_thick",
-      text: "Button",
-      variant: "secondary"
-    }) %>
-  <% end %>
-
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx

@@ -1,353 +1,11 @@
-import React from "react"
-import Background from '../../pb_background/_background'
+import React from 'react'
 import Card from '../_card'
-import Title from '../../pb_title/_title'
-import Flex from '../../pb_flex/_flex'
-import Button from '../../pb_button/_button'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import DatePicker from '../../pb_date_picker/_date_picker'
-import Icon from '../../pb_icon/_icon'
 
-const dropdownOptions = [
-{ label: "Option 1", value: "1", key: "1" },
-{ label: "Option 2", value: "2", key: "2" },
-{ label: "Option 3", value: "3", key: "3" },
-]
-
-const typeaheadOptions = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const CardLight = () => {
+const CardLight = (props) => {
   return (
-    <> 
-      <Title marginBottom="md"
-          size={3}
-          text="Border Utilities"
-      />
-
-      <Title marginBottom="sm"
-          size={4}
-          text="Border Variants"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Card border="default"
-            padding="sm"
-        >
-          {'default'}
-        </Card>
-        <Card border="active"
-            padding="sm"
-        >
-          {'active'}
-        </Card>
-        <Card border="default_thick"
-            padding="sm"
-        >
-          {'default_thick'}
-        </Card>
-        <Card border="active_thick"
-            padding="sm"
-        >
-          {'active_thick'}
-        </Card>
-        <Card border="default_thicker"
-            padding="sm"
-        >
-          {'default_thicker'}
-        </Card>
-        <Card border="active_thicker"
-            padding="sm"
-        >
-          {'active_thicker'}
-        </Card>
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Border Width Comparison"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Card border="default"
-            padding="sm"
-        >
-          {'1px'}
-        </Card>
-        <Card border="default_thick"
-            padding="sm"
-        >
-          {'2px'}
-        </Card>
-        <Card border="default_thicker"
-            padding="sm"
-        >
-          {'4px'}
-        </Card>
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Directional Borders"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Card borderTop="active"
-            padding="sm"
-        >
-          {'Top'}
-        </Card>
-        <Card borderBottom="active"
-            padding="sm"
-        >
-          {'Bottom'}
-        </Card>
-        <Card borderLeft="active"
-            padding="sm"
-        >
-          {'Left'}
-        </Card>
-        <Card borderRight="active"
-            padding="sm"
-        >
-          {'Right'}
-          </Card>
-        <Card borderX="active_thick"
-            padding="sm"
-        >
-          {'X Axis'}
-        </Card>
-        <Card borderY="active_thicker"
-            padding="sm"
-        >
-          {'Y Axis'}
-        </Card>
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Border + Radius"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Card border="default"
-            borderRadius="none"
-            padding="md"
-        >
-          {'radius="none"'}
-        </Card>
-
-        <Flex border="active"
-            borderRadius="md"
-            padding="md"
-        >
-          {'radius="md"'}
-        </Flex>
-
-        <Flex border="default_thick"
-            borderRadius="lg"
-            padding="md"
-        >
-          {'radius="lg"'}
-        </Flex>
-
-        <Flex border="active_thicker"
-            borderRadius="rounded"
-            padding="md"
-        >
-          {'radius="rounded"'}
-        </Flex>
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Buttons & Icons"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Button
-            border="default"
-            text="Default"
-            variant="secondary"
-        />
-
-        <Button
-            border="active"
-            text="Active"
-            variant="secondary"
-        />
-
-        <Button
-            border="default_thick"
-            text="Thick"
-            variant="secondary"
-        />
-
-        <Button
-            border="active_thicker"
-            text="Thicker"
-            variant="secondary"
-        />
-
-        <CircleIconButton
-            border="active_thick"
-            icon="star"
-            variant="secondary"
-        />
-
-        <Icon
-            border="default"
-            icon="user"
-        />
-        <Icon
-            border="active"
-            icon="user"
-        />
-        <Icon
-            border="default_thick"
-            icon="user"
-        />
-        <Icon
-            border="active_thick"
-            icon="user"
-        />
-        <Icon
-            border="default_thicker"
-            icon="user"
-        />
-        <Icon
-            border="active_thicker"
-            icon="user"
-        />
-        <Icon
-            border        
-            icon="rocket"
-        />
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Form Components"
-      />
-
-      <Flex gap="lg"
-          wrap
-      >
-        <Dropdown
-            border="default"
-            label="Dropdown"
-            options={dropdownOptions}
-        />
-
-        <Typeahead
-            border="active"
-            label="Typeahead"
-            options={typeaheadOptions}
-        />
-
-        <DatePicker
-            border="active_thick"
-            label="Date Picker"
-            pickerId="card-light-dp"
-        />
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Containers"
-      />
-
-      <Flex gap="md"
-          wrap
-      >
-        <Background
-            backgroundColor="neutral_subtle"
-            border="default"
-            borderRadius="md"
-            padding="md"
-        >
-          {'Default Border'}
-        </Background>
-
-        <Background
-            backgroundColor="neutral_subtle"
-            border="active_thick"
-            borderRadius="lg"
-            padding="md"
-        >
-          {'Active Thick Border'}
-        </Background>
-      </Flex>
-
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Dark Mode"
-      />
-
-      <Background
-          backgroundColor="dark"
-          className="dark"
-          padding="lg"
-      >
-        <Flex gap="md">
-          <Card border="default"
-              dark
-              padding="sm"
-          >
-            {'default'}
-          </Card>
-
-          <Card border="active"
-              dark
-              padding="sm"
-          >
-            {'active'}
-          </Card>
-
-          <Flex
-              border="default_thicker"
-              borderRadius="lg"
-              padding="md"
-          >
-            {'default_thicker + radius'}
-          </Flex>
-
-          <Button
-              border="active_thick"
-              text="Button"
-              variant="secondary"
-          />
-        </Flex>
-      </Background>
-    </>
+    <div>
+      <Card {...props}>{'Card content'}</Card>
+    </div>
   )
 }
 

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

@@ -1 +1 @@
-You can add drag event listeners for desktop `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop` or mobile `touch`, `touchend`, `touchcancel`,`touchleave`,  `touchmove`, `touchstart`
+You can add drag event listeners for `drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, and `drop`.