RubyGems - playbook_ui_docs - Versions diffs - 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0 - Mend

playbook_ui_docs 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (437) hide show

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react'
 import CircleChart from '../_circle_chart'
-import Title from '../../pb_title/_title'
+import {Title} from 'playbook-ui'
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import { CircleIconButton } from 'playbook-ui'
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleIcons = (props) => {

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleNoIcon = (props) => (
   <Collapsible

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Button from '../../pb_button/_button'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Textarea } from 'playbook-ui'
 const CopyButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx CHANGED Viewed

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Body from '../../pb_body/_body'
-import TextInput from '../../pb_text_input/_text_input'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Currency from "../../pb_currency/_currency"
+import { Currency } from 'playbook-ui'
 const CurrencyNullDisplay = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Currency from '../../pb_currency/_currency'
-import Title from '../../pb_title/_title'
+import { Currency, Title } from 'playbook-ui'
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 const DateDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import FormattedDate from '../../pb_date/_date'
-import Title from '../../pb_title/_title'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md CHANGED Viewed

@@ -1,3 +1 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
-Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker, LabelValue } from 'playbook-ui'
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker,LabelValue } from 'playbook-ui'
 const DatePickerOnClose = (props) => {

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -7,8 +7,6 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_on_change: onChange
-  - date_picker_on_close: onClose
   # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateRangeStacked from '../../pb_date_range_stacked/_date_range_stacked'
+import { DateRangeStacked } from 'playbook-ui'
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateYearStacked from '../../pb_date_year_stacked/_date_year_stacked'
+import { DateYearStacked } from 'playbook-ui'
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 const DetailStyled = (props) => (
   <>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Caption from '../../pb_caption/_caption'
-import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from 'playbook-ui'
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogScrollable = () => {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx CHANGED Viewed

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex} from "playbook-ui"
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED Viewed

@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from "playbook-ui"
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx CHANGED Viewed

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx CHANGED Viewed

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "playbook-ui";
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx CHANGED Viewed

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Icon from '../../pb_icon/_icon'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import { DraggableProvider } from '../../pb_draggable/context'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { DraggableProvider, List, ListItem } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import SelectableList from '../../pb_selectable_list/_selectable_list'
-import { DraggableProvider } from '../../pb_draggable/context'
+import { SelectableList, DraggableProvider } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx CHANGED Viewed

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Table from '../../pb_table/_table'
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui"
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 const DrawerBorders = () => {
   // Individual state variables for each drawer size
@@ -44,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border right
@@ -55,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
@@ -66,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full