RubyGems - playbook_ui - Versions diffs - 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible14075 → 16.1.0.pre.alpha.play2724typeaheadindicator13970 - Mend

playbook_ui 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible14075 → 16.1.0.pre.alpha.play2724typeaheadindicator13970

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 (64) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c7f885e032477472414e8ce6f9088197176832837c8d18bda0ce717d3e6f246
-  data.tar.gz: 0700d8674fd76047935a0dda354f5db7ab76db5336dee8795e4582a112370853
+  metadata.gz: 8541b6e0d600a07afc16b3a1f87e7851e84af95a8fdf2299b00075eabd2799e7
+  data.tar.gz: 75ff644b0208f6b9da46789cdce6882ec381b3910cb1237694cca0061ab88fe1
 SHA512:
-  metadata.gz: babf6b575d171454749d74f7dc22f53239822f040304068b31b1f11ff8790d011ea51f682b9ac596c66874d4dd4e31d6106b9d2fb9a25c4ccd8fbc1e32e8d139
-  data.tar.gz: '09ffb2a754abce95f58c3a675415aab6038eca4dba6e0bf3aeb25e7ab637551cd23ce76ec3b25047f9a6b3cc76fee7cc20144e0777e994a5657dc128eb9ca94f'
+  metadata.gz: 7f70875cad44dcc1e4e8429f6720472ee8f38dec0ecd23a540bc40467ded607d0479dcd3f400587749c40159baf4c145375872082e0260d2afbc6f5bf2484beb
+  data.tar.gz: 2ccc12dd5562413ba97d26fdb29fb093c8e9213febc89a52f8c55e223e6c2278279732bcd46c307f50d32018ad3aeff6dd9e387dd6d37c5ae7c6c5cc084fe846

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId: string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,8 +196,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
-  const errorId = error ? `${pickerId}-error` : undefined
   return (
     <div
         {...ariaProps}
@@ -213,18 +211,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
         {!hideLabel && (
-           <label htmlFor={pickerId}>
-            <Caption
-                className="pb_date_picker_kit_label"
-                text={label}
-            />
-          </label>
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -238,9 +232,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               {error &&
                   <Body
-                      aria={{ atomic: "true", live: "polite" }}
-                      htmlOptions={{ role: "alert" }}
-                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED Viewed

@@ -119,16 +119,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
-    // Use a suffix for the trigger ID to avoid conflict with the outer div's id
-    const sanitizeForId = (str: string) =>
-      str.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
-    const selectId = id
-      ? `${id}_trigger`
-      : label
-        ? sanitizeForId(label)
-        : undefined;
-    const errorId = error ? `${selectId}-error` : undefined;
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
@@ -161,19 +151,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const dropdownRef = useRef(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
+    const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
-    const handleLabelClick = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (selectId) {
-        const trigger = document.getElementById(selectId);
-        if (trigger) trigger.focus();
-      }
-      setIsInputFocused(true);
-      toggleDropdown();
-    };
     const selectedArray = Array.isArray(selected)
     ? selected
     : selected && Object.keys(selected).length
@@ -431,12 +411,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     autocomplete,
                     clearable,
                     dropdownContainerRef,
-                    error,
-                    errorId,
-                    filterItem,
                     filteredOptions,
+                    filterItem,
                     focusedOptionIndex,
-                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -446,7 +423,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -458,20 +434,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label && (
-                    <label
-                        data-dropdown="pb-dropdown-label"
-                        htmlFor={selectId}
-                        onClick={handleLabelClick}
-                    >
-                        <Caption
-                            className="pb_dropdown_kit_label"
-                            dark={dark}
-                            marginBottom="xs"
-                            text={label}
-                        />
-                    </label>
-                )}
+                {label &&
+                    <Caption
+                        dark={dark}
+                        marginBottom="xs"
+                        text={label}
+                    />
+                }
                 <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -504,16 +473,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     )}
-                    {error && (
+                    {error &&
                         <Body
-                            aria={{ atomic: "true", live: "polite" }}
-                            dark={dark}
-                            htmlOptions={{ role: "alert" }}
-                            id={errorId}
                             status="negative"
                             text={error}
                         />
-                    )}
+                    }
                 </div>
             </DropdownContext.Provider>
         </div>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED Viewed

@@ -1,13 +1,10 @@
-<%
+<%
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>
-<%= pb_rails("dropdown", props: {
-  id: "select_a_country",
-  label: "Select a Country",
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx CHANGED Viewed

@@ -25,7 +25,6 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
-        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md CHANGED Viewed

@@ -1,3 +1 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
-Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb CHANGED Viewed

@@ -1,8 +1,6 @@
 <%= pb_content_tag do %>
     <% if object.label.present? %>
-        <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
-            <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
-        </label>
+        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
@@ -18,11 +16,9 @@
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select, placeholder: object.placeholder }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
@@ -31,9 +27,7 @@
                 <% end %>
             <% end %>
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED Viewed

@@ -10,7 +10,6 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
-      prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
@@ -69,14 +68,6 @@ module Playbook
         generate_classname("pb_dropdown", variant, separators_class)
       end
-      def select_id
-        id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
-      end
-      def error_id
-        error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
-      end
     private
       def error_class

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb CHANGED Viewed

@@ -1,10 +1,6 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
-            <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
-            <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
-            <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
-        >
+        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
@@ -13,11 +9,10 @@
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
         cursor: object.autocomplete ? "text" : "pointer",
-        id: object.select_id,
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
+        html_options: {tabindex:"0"}
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb CHANGED Viewed

@@ -13,10 +13,6 @@ module Playbook
                           default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
-      prop :select_id, type: Playbook::Props::String
-      prop :label, type: Playbook::Props::String
-      prop :error_id, type: Playbook::Props::String
-      prop :error, type: Playbook::Props::String
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)