playbook_ui 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676 → 16.2.0.pre.alpha.faiconbuttonfix14520

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,11 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
-import Body from '../pb_body/_body';
-import Flex from '../pb_flex/_flex';
-import Detail from '../pb_detail/_detail';
 
 type PaginationProps = {
   aria?: { [key: string]: string },
@@ -32,104 +29,16 @@ const Pagination = ( props: PaginationProps) => {
     total = 1,
   } = props
   const [currentPage, setCurrentPage] = useState(current);
-  const [isMobile, setIsMobile] = useState(false);
-  // State for dropdown menu
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState<'below' | 'above'>('below');
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Detect mobile screen size (767px and below)
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth <= 767);
-    };
-
-    checkMobile();
-    
-    // Throttle resize event to prevent performance issues in Nitro where 
-    // the Nitro Nav is also listening to the resize event and causing multiple re-renders
-    let timeoutId: NodeJS.Timeout | null = null;
-    const throttledCheckMobile = () => {
-      if (timeoutId === null) {
-        timeoutId = setTimeout(() => {
-          checkMobile();
-          timeoutId = null;
-        }, 150);
-      }
-    };
-
-    window.addEventListener('resize', throttledCheckMobile);
-
-    return () => {
-      window.removeEventListener('resize', throttledCheckMobile);
-      if (timeoutId) clearTimeout(timeoutId);
-    };
-  }, []);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    if (isDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isDropdownOpen]);
-
-  // Determine dropdown position based on available space
-  const checkDropdownPosition = () => {
-    if (dropdownRef.current) {
-      const rect = dropdownRef.current.getBoundingClientRect();
-      const dropdownHeight = 200;
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const spaceAbove = rect.top;
-
-      if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-        setDropdownPosition('above');
-      } else {
-        setDropdownPosition('below');
-      }
-    }
-  };
-
-  const handleDropdownToggle = () => {
-    if (!isDropdownOpen) {
-      checkDropdownPosition();
-    }
-    setIsDropdownOpen(!isDropdownOpen);
-  };
 
   const handlePageChange = (pageNumber: number) => {
     if (pageNumber >= 1 && pageNumber <= total) {
       setCurrentPage(pageNumber);
-      setIsDropdownOpen(false);
       if (onChange) {
         onChange(pageNumber);
       }
     }
   };
 
-  const createPageOptions = () => {
-    const options = [];
-    
-    for (let pageNumber = 1; pageNumber <= total; pageNumber++) {
-      options.push({
-        label: String(pageNumber),
-        value: String(pageNumber),
-        id: `page-${pageNumber}`
-      });
-    }
-    
-    return options;
-  };
-
   const renderPageButtons = (): JSX.Element[] => {
     const buttons: JSX.Element[] = [];
   
@@ -244,92 +153,20 @@ const Pagination = ( props: PaginationProps) => {
         className={classes}
         id={id}
     >
-      <div className={`pb_pagination ${isMobile ? "pb_pagination_mobile" : ""}`}>
-        {isMobile ? (
-          <Flex alignItems="center">
-            <li
-                className={`pagination-left ${currentPage === 1 ? "disabled" : ""}`}
-                onClick={() => handlePageChange(currentPage - 1)}
-            >
-              <Flex alignItems="center">
-                <Icon icon="chevron-left" />
-                <Detail color="default" 
-                    marginLeft="xxs"
-                >
-                  Prev
-                </Detail>
-              </Flex>
-            </li>
-            <div className="pagination-dropdown" 
-                ref={dropdownRef}
-            >
-              <div
-                  className="pagination-dropdown-trigger"
-                  onClick={handleDropdownToggle}
-              >
-                <Flex alignItems="center" 
-                    gap="xxs"
-                    justify="between"
-                >
-                  <Detail bold
-                      color="default"
-                  >
-                    {currentPage}
-                  </Detail>
-                  <Detail color="default">
-                    of {total}
-                  </Detail>
-                  <Icon color="primary" 
-                      icon={isDropdownOpen ? "chevron-up" : "chevron-down"} 
-                      size="xs"
-                  />
-                </Flex>
-              </div>
-              {isDropdownOpen && (
-                <div className={`pagination-dropdown-menu ${dropdownPosition}`}>
-                  {createPageOptions().map((option) => (
-                    <div
-                        className={`pagination-dropdown-option ${Number(option.value) === currentPage ? 'active' : ''}`}
-                        key={option.id}
-                        onClick={() => handlePageChange(Number(option.value))}
-                    >
-                      <Body>Page {option.label}</Body>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            <li
-                className={`pagination-right ${currentPage === total ? "disabled" : ""}`}
-                onClick={() => handlePageChange(currentPage + 1)}
-            >
-              <Flex alignItems="center">
-                <Detail color="default" 
-                    marginRight="xxs"
-                >
-                    Next
-                </Detail>
-                <Icon icon="chevron-right" />
-              </Flex>
-            </li>
-          </Flex>
-        ) : (
-          <>
-            <li
-                className={`pagination-left ${currentPage === 1 ? "disabled" : ""}`}
-                onClick={() => handlePageChange(currentPage - 1)}
-            >
-              <Icon icon="chevron-left" />
-            </li>
-            {renderPageButtons()}
-            <li
-                className={`pagination-right ${currentPage === total ? "disabled" : ""}`}
-                onClick={() => handlePageChange(currentPage + 1)}
-            >
-              <Icon icon="chevron-right" />
-            </li>
-          </>
-        )}
+      <div className="pb_pagination">
+        <li
+            className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`}
+            onClick={() => handlePageChange(currentPage - 1)}
+        >
+          <Icon icon="chevron-left" />
+        </li>
+        {renderPageButtons()}
+        <li
+            className={`pagination-right ${currentPage === total ? 'disabled' : ''}`}
+            onClick={() => handlePageChange(currentPage + 1)}
+        >
+          <Icon icon="chevron-right" />
+        </li>
       </div>
     </div>
   );

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -9,7 +9,7 @@ const PaginationDefault = (props) => {
         <Pagination
             current={1}
             range={5}
-            total={1000}
+            total={10}
             {...props}
           />
       </>

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -119,14 +119,12 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
           {hasLabel && (requiredIndicator ? (
             <Caption
                 className="passphrase-label"
-                color="lighter"
             >
               {label} <span className="required_indicator">*</span>
             </Caption>
           ) : (
             <Caption
                 className="passphrase-label"
-                color="lighter"
                 text={label}
             />
           ))}
@@ -144,14 +142,12 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                   orientation="column"
               >
                 <Caption
-                    color="lighter"
                     marginBottom="xs"
                     text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
-                        color="lighter"
                         key={i}
                         marginBottom="xs"
                         size="xs"

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -262,7 +262,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
-                color="lighter"
                 marginBottom="xs"
             >
               {label} <span style={{ color: `${colors.error}` }}>*</span>
@@ -270,7 +269,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           ) : (
             <Caption
                 className="pb_text_input_kit_label"
-                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -134,14 +134,12 @@ const Select = ({
         >
           {requiredIndicator ? (
             <Caption 
-                color="lighter"
                 dark={props.dark}>
               {label}
               <span style={{ color: "#DA0014" }}> *</span>
             </Caption>
           ) : (
             <Caption 
-                color="lighter"
                 dark={props.dark}
                 text={label}
             />

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -4,11 +4,11 @@
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { color: "lighter", dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>       
       <% else %>
-        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -37,7 +37,7 @@
     <% else %>
       <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
         <% if object.label.present? %>
-          <%= pb_rails("caption", props: { color: "lighter", text: object.label, margin_bottom:"xs"}) %>
+          <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
         <% end %>
 
         <%= hidden_input_tag %>

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx

@@ -54,7 +54,6 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
             {label &&
                 <Caption
                     className="pb_star_rating_kit_label"
-                    color="lighter"
                     marginBottom="xs"
                     text={label} 
                 />

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -253,7 +253,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             requiredIndicator ? (
               <Caption
                   className="pb_text_input_kit_label"
-                  color="lighter"
                   dark={dark}
               >
                 {label} <span style={{ color: dark ? colors.text_error_dark : colors.text_error }}>*</span>
@@ -261,7 +260,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             ) : (
                 <Caption
                     className="pb_text_input_kit_label"
-                    color="lighter"
                     dark={dark}
                     text={label}
               />

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -2,11 +2,11 @@
   <% if object.label.present? %>
     <label for="<%= object.input_options[:id] || object.id %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) do %>
+        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -29,7 +29,6 @@ type TextareaProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
-  inputOptions?: { [k: string]: any },
   object?: string,
   method?: string,
   label?: string,
@@ -55,7 +54,6 @@ const Textarea = ({
   htmlOptions = {},
   id,
   inline = false,
-  inputOptions = {},
   resize = 'none',
   error,
   label,
@@ -77,9 +75,6 @@ const Textarea = ({
     }
   })
 
-  const containerId = id
-  const textareaId = inputOptions?.id ?? (id ? `${id}-input` : undefined)
-
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     // Apply emoji mask if enabled using centralized helper
     if (emojiMask) {
@@ -119,40 +114,13 @@ const Textarea = ({
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-
-  const {
-    "aria-describedby": customAriaDescribedBy,
-    "aria-invalid": customAriaInvalid,
-    data: inputOptionsData,
-    ...inputOptionsWithoutAriaAndData
-  } = inputOptions || {}
-
-  const textareaDataProps = buildDataProps(inputOptionsData || {})
-  const errorId = error ? (containerId ? `${containerId}-error` : (textareaId ? `${textareaId}-error` : undefined)) : undefined
-  const ariaDescribedBy = [errorId, customAriaDescribedBy].filter(Boolean).join(" ")
-
-  const textareaAttrs = {
-    ...(textareaId ? { id: textareaId } : {}),
-    "aria-describedby": ariaDescribedBy || undefined,
-    "aria-invalid": customAriaInvalid !== undefined ? customAriaInvalid : !!error,
-    name,
-    rows,
-    placeholder,
-    value,
-    disabled,
-    required,
-    onChange: emojiMask ? handleChange : onChange,
-    onPaste: emojiMask ? handlePaste : undefined,
-    ...inputOptionsWithoutAriaAndData,
-    ...textareaDataProps
-  }
-
   const checkIfZero = (characterCount: string | number) => {
     return characterCount == 0 ? characterCount.toString() : characterCount
   }
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
+  const errorId = error ? `${id}-error` : undefined
 
   return (
     <div
@@ -160,29 +128,39 @@ const Textarea = ({
         {...dataProps}
         {...htmlProps}
         className={classes}
-        id={containerId}
     >
     {label && (
-      <label {...(textareaId ? { htmlFor: textareaId } : {})}>
+      <label htmlFor={id}>
       {
         requiredIndicator ? (
-          <Caption className="pb_text_input_kit_label"
-              color="lighter"
-          >
-            {label} <span style={{ color: `${colors.text_error}` }}>{"*"}</span>
+          <Caption className="pb_text_input_kit_label">
+            {label} <span style={{ color: `${colors.text_error}` }}>*</span>
           </Caption>
         ) : (
           <Caption  className="pb_text_input_kit_label"
-              color="lighter"
               text={label}
           />
         )
       }
       </label>
     )}
-      {children || <textarea ref={ref}
-          {...textareaAttrs}
-                   />}
+      {children || (
+        <textarea
+            aria-describedby={errorId}
+            aria-invalid={!!error}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={emojiMask ? handleChange : onChange}
+            onPaste={emojiMask ? handlePaste : undefined}
+            placeholder={placeholder}
+            ref={ref}
+            required={required}
+            rows={rows}
+            value={value}
+            {...props}
+        />
+      )}
 
       {error ? (
         <>

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

@@ -21,7 +21,6 @@ examples:
   - textarea_inline: Inline
   - textarea_emoji_mask: Emoji Mask
   - textarea_required_indicator: Required Indicator
-  - textarea_input_options: Input Options
   - textarea_disabled: Disabled
 
   swift:

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

@@ -1,10 +1,9 @@
-export { default as TextareaDefault } from "./_textarea_default.jsx"
+export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaDisabled } from './_textarea_disabled.jsx'
-export { default as TextareaResize } from "./_textarea_resize.jsx"
-export { default as TextareaCustom } from "./_textarea_custom.jsx"
-export { default as TextareaError } from "./_textarea_error.jsx"
-export { default as TextareaCharacterCounter } from "./_textarea_character_counter.jsx"
-export { default as TextareaInline } from "./_textarea_inline.jsx"
-export { default as TextareaEmojiMask } from "./_textarea_emoji_mask.jsx"
-export { default as TextareaRequiredIndicator } from "./_textarea_required_indicator.jsx"
-export { default as TextareaInputOptions } from "./_textarea_input_options.jsx"
+export { default as TextareaResize } from './_textarea_resize.jsx'
+export { default as TextareaCustom } from './_textarea_custom.jsx'
+export { default as TextareaError } from './_textarea_error.jsx'
+export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
+export { default as TextareaInline } from './_textarea_inline.jsx'
+export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
+export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,12 +1,12 @@
-<%= pb_content_tag(:div, id: object.id) do %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-    <label for="<%= object.textarea_id %>" >
+    <label for="<%= object.input_options[:id] || object.id %>" >
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
+        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -52,7 +52,7 @@ module Playbook
           'aria-describedby': error.present? ? error_id : nil,
           'aria-invalid': error.present?,
           disabled: disabled,
-          id: textarea_id,
+          id: input_options[:id] || id || "object_method",
           max_characters: max_characters,
           name: name,
           onkeyup: onkeyup,
@@ -71,12 +71,8 @@ module Playbook
         result
       end
 
-      def textarea_id
-        input_options[:id].presence || (id.present? ? "#{id}-input" : "object_method")
-      end
-
       def error_id
-        id.present? ? "#{id}-error" : nil
+        "#{id}-error" if error.present?
       end
 
     private