playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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

@@ -7,8 +7,9 @@ import OverlayToken from './subcomponents/_overlay_token'
 
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     dynamic?: boolean,
+    gradient?: boolean,
     position: string,
     size: string,
     scrollBarNone?: boolean,
@@ -18,14 +19,17 @@ type OverlayProps = {
     aria?: { [key: string]: string },
     className?: string,
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     data?: { [key: string]: string },
     dynamic?: false,
+    fullScreen?: boolean,
+    gradient?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
+    opacity: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
     scrollBarNone?: boolean,
-    
+
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -36,15 +40,26 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
+        fullScreen = false,
+        gradient = true,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
+        opacity,
         scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(
+        buildCss('pb_overlay'),
+        { 'overlay-hide-scrollbar': scrollBarNone },
+        { 'overlay-full-screen': fullScreen },
+        { 'no_gradient': gradient === false },
+        globalProps(props),
+        opacity,
+        className
+    )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -53,6 +68,9 @@ const Overlay = (props: OverlayProps) => {
     }
 
     const getSize = () => {
+        if (fullScreen) {
+            return "100%"
+        }
         return Object.values(layout)[0]
     }
 
@@ -64,23 +82,37 @@ const Overlay = (props: OverlayProps) => {
             {...dataProps}
             {...htmlProps}
             className={classes}
+            data-overlay-color={color}
             id={id}
-            style={dynamicInlineProps}
+            style={{
+                ...(fullScreen ? {
+                  position: 'fixed',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 9999,
+                  '--overlay-color': `var(--${color})`,
+                } : {}),
+                ...dynamicInlineProps
+              }}
         >
             {isSizePercentage ?
                 OverlayPercentage({
                     children,
                     color,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 })
             }
         </div>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayColor = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            color="black"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="black"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md

@@ -0,0 +1,3 @@
+The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
+
+NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1 @@
-Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
-
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 
+Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenBackground = () => {
+  const [openBackground, setOpenBackground] = useState(false)
+
+  const handleClickBackground = () => {
+    setOpenBackground(true)
+  }
+
+  const handleCloseBackground = () => {
+    setOpenBackground(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickBackground}
+            text="Background Dark"
+            variant="secondary"
+        />
+
+        {openBackground && (
+          <Overlay
+              color="bg_dark"
+              fullScreen
+              gradient={false}
+              opacity="opacity_4"
+          >
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                onClose={handleCloseBackground}
+                open={openBackground}
+                status="tip"
+                text='Fullscreen Overlay with color set to Background Dark.'
+                vertical='top'
+            />
+          </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenBackground

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md

@@ -0,0 +1 @@
+The `fullScreen` prop also allows you to use `color` along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenOpacity = () => {
+  const [openOpacity40, setOpenOpacity40] = useState(false)
+  const [openOpacity80, setOpenOpacity80] = useState(false)
+
+  const handleClickOpacity40 = () => {
+    setOpenOpacity40(true)
+  }
+  const handleCloseOpacity40 = () => {
+    setOpenOpacity40(false)
+  }
+
+  const handleClickOpacity80 = () => {
+    setOpenOpacity80(true)
+  }
+  const handleCloseOpacity80 = () => {
+    setOpenOpacity80(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickOpacity40}
+            text="40% Opacity"
+            variant="secondary"
+        />
+        {' '}
+        <Button
+            onClick={handleClickOpacity80}
+            text="80% Opacity"
+            variant="secondary"
+        />
+
+        {openOpacity40 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_4"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  horizontal='center'
+                  onClose={handleCloseOpacity40}
+                  open={openOpacity40}
+                  status="tip"
+                  text='Fullscreen Overlay at 40% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+
+        {openOpacity80 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_8"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  display="block"
+                  horizontal='center'
+                  onClose={handleCloseOpacity80}
+                  open={openOpacity80}
+                  status="tip"
+                  text='Fullscreen Overlay at 80% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md

@@ -0,0 +1 @@
+To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayGradientOpacity = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_2"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_8"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md

@@ -0,0 +1 @@
+By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayLayout = () => (
+    <>
+        <Overlay layout={{ y: "xl" }}>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -0,0 +1,5 @@
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1,10 +1,15 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
   - overlay_hide_scroll_bar: Hide Scroll Bar
+  - overlay_fullscreen_opacity: Full Page Opacity
+  - overlay_fullscreen_background: Full Page Using Background Color Tokens
 
   rails:
   - overlay_default: Default

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

@@ -1,5 +1,10 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
 export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
+export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
+export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -71,8 +71,46 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
-  
+
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
+
+test('should have no_gradient class if gradient prop is false', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        gradient: false
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('no_gradient')
+})
+
+test('should not have no_gradient class if gradient is not passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveClass('no_gradient')
+})
+
+test('should have the correct opacity class if opacity prop is passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        opacity: "opacity_5"
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('opacity_5')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -39,6 +39,9 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
+  .iti__country-list {
+    min-width: $dropdown-min-width;
+  }
   // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
@@ -227,6 +230,16 @@ $flag-min-resolution: 192dpi;
     .iti__dropdown-content {
       border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
+      .iti__search-input {
+        background-color: $bg_dark_card;
+        &:hover {
+          background-color: $bg_dark_card;
+        }      
+        &:active,
+        &:focus {
+          background-color: $card_dark;
+        }
+      }
     }
 
     .iti__divider {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -37,6 +37,7 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
+  countrySearch?: boolean,
 }
 
 enum ValidationError {
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
+    countrySearch = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -242,7 +244,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      countrySearch: false,
+      countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
       hiddenInput: hiddenInputs ? () => ({

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search",
+}) %>
+
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search-limited",
+    only_countries: ["br", "us", "ph", "gb"],
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PhoneNumberInput from '../_phone_number_input'
+
+const PhoneNumberInputCountrySearch = (props) => (
+    <>
+        <PhoneNumberInput
+            countrySearch
+            id='country-search'
+            {...props} 
+        />
+        <PhoneNumberInput
+            countrySearch
+            id='country-search-limited'
+            onlyCountries={["br", "us", "ph", "gb"]}
+            {...props} 
+        />
+    </>
+)
+
+export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -0,0 +1 @@
+Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
+
     return (
         <form
             action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error="Missing phone number."
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

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

@@ -9,6 +9,7 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
+  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -18,4 +19,5 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
+  - phone_number_input_country_search: Country Search
   

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

@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,6 +25,8 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
+      prop :country_search, type: Playbook::Props::Boolean,
+                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -45,6 +47,7 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
+          countrySearch: country_search,
         }
       end
     end