@patternfly/react-core 5.0.0-prerelease.17 → 5.0.0-prerelease.19

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -68,7 +68,7 @@ exports[`slider renders continuous slider 1`] = `
           type="number"
           value="50"
         />
-      </div>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -250,7 +250,7 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <div
+      <span
         class="pf-v5-c-form-control"
       >
         <input
@@ -262,7 +262,7 @@ exports[`slider renders discrete slider 1`] = `
           type="number"
           value="50"
         />
-      </div>
+      </span>
     </div>
   </div>
 </DocumentFragment>
@@ -422,7 +422,7 @@ exports[`slider renders slider with input 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <div
+          <span
             class="pf-v5-c-form-control"
           >
             <input
@@ -434,7 +434,7 @@ exports[`slider renders slider with input 1`] = `
               type="number"
               value="50"
             />
-          </div>
+          </span>
         </div>
         <div
           class="pf-v5-c-input-group__item pf-m-box"
@@ -501,7 +501,7 @@ exports[`slider renders slider with input above thumb 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <div
+            <span
               class="pf-v5-c-form-control"
             >
               <input
@@ -513,7 +513,7 @@ exports[`slider renders slider with input above thumb 1`] = `
                 type="number"
                 value="50"
               />
-            </div>
+            </span>
           </div>
           <div
             class="pf-v5-c-input-group__item pf-m-box"

package/src/components/TextArea/TextArea.tsx

@@ -123,7 +123,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -145,11 +145,11 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
           {...props}
         />
         {hasStatusIcon && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 }

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
     style="height: 6px;"
   >
@@ -12,6 +12,6 @@ exports[`Matches the snapshot 1`] = `
       disabled=""
       required=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;

package/src/components/TextInput/TextInput.tsx

@@ -190,7 +190,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
-      <div
+      <span
         className={css(
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
@@ -218,12 +218,12 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
           {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
         />
         {(customIcon || hasStatusIcon) && (
-          <div className={css(styles.formControlUtilities)}>
+          <span className={css(styles.formControlUtilities)}>
             {customIcon && <FormControlIcon customIcon={customIcon} />}
             {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
-          </div>
+          </span>
         )}
-      </div>
+      </span>
     );
   }
 

package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TextInput default read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly"
   >
     <input
@@ -15,13 +15,13 @@ exports[`TextInput default read only text input 1`] = `
       type="text"
       value="read only default"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-disabled"
   >
     <input
@@ -34,13 +34,13 @@ exports[`TextInput disabled text input 1`] = `
       type="text"
       value=""
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput invalid text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
@@ -52,10 +52,10 @@ exports[`TextInput invalid text input 1`] = `
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -71,15 +71,15 @@ exports[`TextInput invalid text input 1`] = `
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput plain read only text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
   >
     <input
@@ -92,13 +92,13 @@ exports[`TextInput plain read only text input 1`] = `
       type="text"
       value="read only plain"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
@@ -110,13 +110,13 @@ exports[`TextInput read only text input using isReadOnly 1`] = `
       type="text"
       value="read only"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput simple text input 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control"
   >
     <input
@@ -128,13 +128,13 @@ exports[`TextInput simple text input 1`] = `
       type="text"
       value="test input"
     />
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`TextInput validated text input error 1`] = `
 <DocumentFragment>
-  <div
+  <span
     class="pf-v5-c-form-control pf-m-error"
   >
     <input
@@ -146,10 +146,10 @@ exports[`TextInput validated text input error 1`] = `
       type="text"
       value="test input"
     />
-    <div
+    <span
       class="pf-v5-c-form-control__utilities"
     >
-      <div
+      <span
         class="pf-v5-c-form-control__icon pf-m-status"
       >
         <svg
@@ -165,8 +165,8 @@ exports[`TextInput validated text input error 1`] = `
             d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
           />
         </svg>
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </DocumentFragment>
 `;

package/src/components/Toolbar/ToolbarContent.tsx

@@ -17,8 +17,10 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Vertical alignment. */
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
   children?: React.ReactNode;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
@@ -55,6 +57,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
+      alignSelf,
       ...props
     } = this.props;
 
@@ -76,8 +79,9 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                 showClearFiltersButton: showClearFiltersButtonContext,
                 toolbarId: toolbarIdContext
               }) => {
-                const expandableContentId = `${toolbarId ||
-                  toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+                const expandableContentId = `${
+                  toolbarId || toolbarIdContext
+                }-expandable-content-${ToolbarContent.currentId++}`;
                 return (
                   <ToolbarContentContext.Provider
                     value={{
@@ -89,7 +93,12 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
-                        alignItems === 'center' && styles.modifiers.alignItemsCenter
+                        alignItems === 'center' && styles.modifiers.alignItemsCenter,
+                        alignItems === 'start' && styles.modifiers.alignItemsStart,
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
+                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -32,9 +32,9 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     '2xl'?: 'alignRight' | 'alignLeft';
   };
   /** Vertical alignment of children */
-  alignItems?: 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -87,8 +87,10 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+              alignSelf === 'start' && styles.modifiers.alignSelfStart,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
               isOverflowContainer && styles.modifiers.overflowContainer,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -47,8 +47,10 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment of children */
+  alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
-  alignSelf?: 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -84,6 +86,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   widths,
   align,
   alignSelf,
+  alignItems,
   id,
   children,
   isAllExpanded,
@@ -123,6 +126,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            alignItems === 'start' && styles.modifiers.alignItemsStart,
+            alignItems === 'center' && styles.modifiers.alignItemsCenter,
+            alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+            alignSelf === 'start' && styles.modifiers.alignSelfStart,
             alignSelf === 'center' && styles.modifiers.alignSelfCenter,
             alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
             className

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1666,7 +1666,7 @@ exports[`typeahead multi select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -1681,7 +1681,7 @@ exports[`typeahead multi select renders closed successfully 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="false"
@@ -1726,7 +1726,7 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -1741,7 +1741,7 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -1962,7 +1962,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             </ul>
           </div>
         </div>
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -1977,7 +1977,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -2116,7 +2116,7 @@ exports[`typeahead select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -2131,7 +2131,7 @@ exports[`typeahead select renders closed successfully 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="false"
@@ -2176,7 +2176,7 @@ exports[`typeahead select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -2191,7 +2191,7 @@ exports[`typeahead select renders expanded successfully 1`] = `
             type="text"
             value=""
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"
@@ -2294,7 +2294,7 @@ exports[`typeahead select renders selected successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <div
+        <span
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
         >
           <input
@@ -2309,7 +2309,7 @@ exports[`typeahead select renders selected successfully 1`] = `
             type="text"
             value="Mr"
           />
-        </div>
+        </span>
       </div>
       <button
         aria-expanded="true"