npm - @patternfly/react-core - Versions diffs - 5.0.0-alpha.108 → 5.0.0-alpha.109 - Mend

@patternfly/react-core 5.0.0-alpha.108 → 5.0.0-alpha.109

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

package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap CHANGED Viewed

@@ -41,17 +41,19 @@ exports[`numberInput disables lower threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -127,17 +129,19 @@ exports[`numberInput disables upper threshold 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-8"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="100"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="100"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -215,17 +219,19 @@ exports[`numberInput passes button props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-13"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -302,17 +308,20 @@ exports[`numberInput passes input props successfully 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-12"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          name="test-name"
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            name="test-name"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -389,17 +398,19 @@ exports[`numberInput renders custom width 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-11"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -476,17 +487,19 @@ exports[`numberInput renders defaults & extra props 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -563,18 +576,20 @@ exports[`numberInput renders disabled 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          readonly=""
-          type="number"
-          value="90"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-disabled"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            type="number"
+            value="90"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -651,17 +666,38 @@ exports[`numberInput renders error validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="true"
-          aria-label="Input"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        <div
+          class="pf-v5-c-form-control pf-m-error"
+        >
+          <input
+            aria-invalid="true"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  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>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -737,17 +773,38 @@ exports[`numberInput renders success validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control pf-m-success"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -828,17 +885,19 @@ exports[`numberInput renders unit & position 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-10"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -914,17 +973,19 @@ exports[`numberInput renders unit 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-9"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="5"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="5"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1005,17 +1066,19 @@ exports[`numberInput renders value 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="90"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="90"
+          />
+        </div>
       </div>
       <div
         class="pf-v5-c-input-group__item"
@@ -1091,17 +1154,38 @@ exports[`numberInput renders warning validated 1`] = `
       <div
         class="pf-v5-c-input-group__item"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Input"
+        <div
           class="pf-v5-c-form-control pf-m-warning"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          readonly=""
-          type="number"
-          value="0"
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Input"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            type="number"
+            value="0"
+          />
+          <div
+            class="pf-v5-c-form-control__utilities"
+          >
+            <div
+              class="pf-v5-c-form-control__icon pf-m-status"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 576 512"
+              >
+                <path
+                  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
       </div>
       <div
         class="pf-v5-c-input-group__item"

package/src/components/Radio/Radio.tsx CHANGED Viewed

@@ -7,8 +7,12 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
     OUIAProps {
-  /** Additional classes added to the radio. */
+  /** Additional classes added to the radio wrapper.  This will be a div element if
+   * isLabelWrapped is true, otherwise this will be a label element.
+   */
   className?: string;
+  /** Additional classed added to the radio input */
+  inputClassName?: string;
   /** Id of the radio. */
   id: string;
   /** Flag to show if the radio label is wrapped on small screen. */
@@ -70,6 +74,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
       'aria-label': ariaLabel,
       checked,
       className,
+      inputClassName,
       defaultChecked,
       isLabelWrapped,
       isLabelBeforeButton,
@@ -93,7 +98,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
     const inputRendered = (
       <input
         {...props}
-        className={css(styles.radioInput)}
+        className={css(styles.radioInput, inputClassName)}
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap CHANGED Viewed

@@ -290,16 +290,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="username_0"
-                    type="text"
-                    value="player"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="username_0"
+                      type="text"
+                      value="player"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -323,16 +326,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="firstname_1"
-                    type="text"
-                    value="john"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="firstname_1"
+                      type="text"
+                      value="john"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -356,16 +362,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="pf-random-id-2"
-                    type="text"
-                    value=""
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="pf-random-id-2"
+                      type="text"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
               <div

package/src/components/Slider/Slider.tsx CHANGED Viewed

@@ -318,7 +318,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const displayInput = () => {
     const textInput = (
       <TextInput
-        className={css(styles.formControl)}
         isDisabled={isDisabled}
         type="number"
         value={localInputValue}