@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -1,417 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled 1`] = `
-<DocumentFragment>
-  <a
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-12"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    tabindex="-1"
-  >
-    Disabled Anchor Button
-  </a>
-</DocumentFragment>
-`;
-
-exports[`Button control button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="control"
-    class="pf-v5-c-button pf-m-control"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    control Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button danger button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="danger"
-    class="pf-v5-c-button pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-danger-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    danger Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isAriaDisabled button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-5"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled yet focusable button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isAriaDisabled link button 1`] = `
-<DocumentFragment>
-  <a
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-aria-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-6"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-  >
-    Disabled yet focusable button
-  </a>
-</DocumentFragment>
-`;
-
-exports[`Button isBlock 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-block"
-    data-ouia-component-id="OUIA-Generated-Button-primary-3"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Block Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDanger link 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-link-3"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDanger secondary 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-secondary pf-m-danger"
-    data-ouia-component-id="OUIA-Generated-Button-secondary-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isDisabled 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="true"
-    class="pf-v5-c-button pf-m-primary pf-m-disabled"
-    data-ouia-component-id="OUIA-Generated-Button-primary-4"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    disabled=""
-    type="button"
-  >
-    Disabled Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isInline 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link pf-m-inline"
-    data-ouia-component-id="OUIA-Generated-Button-link-4"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Hovered Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-progress pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-primary-9"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-md"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    Loading Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading icon only 1`] = `
+exports[`Renders basic button 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    aria-label="Upload"
-    class="pf-v5-c-button pf-m-plain pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-md"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    <div>
-      ICON
-    </div>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button isLoading inline link 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="Loading"
-    class="pf-v5-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
-    data-ouia-component-id="OUIA-Generated-Button-link-5"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__progress"
-    >
-      <svg
-        aria-label="Contents"
-        aria-valuetext="Loading"
-        class="pf-v5-c-spinner pf-m-inline"
-        role="progressbar"
-        viewBox="0 0 100 100"
-      >
-        <circle
-          class="pf-v5-c-spinner__path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="45"
-        />
-      </svg>
-    </span>
-    Loading Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button link button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="link"
-    class="pf-v5-c-button pf-m-link"
-    data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    link Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button link with icon 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-link"
-    data-ouia-component-id="OUIA-Generated-Button-link-2"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-v5-c-button__icon pf-m-start"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 576 512"
-        width="1em"
-      >
-        <path
-          d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"
-        />
-      </svg>
-    </span>
-    Block Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button plain button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="plain"
-    class="pf-v5-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    plain Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button primary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="primary"
+    aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    primary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button secondary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="secondary"
-    class="pf-v5-c-button pf-m-secondary"
-    data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    secondary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button size large 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-display-lg"
-    data-ouia-component-id="OUIA-Generated-Button-primary-8"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Large Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button size small 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    class="pf-v5-c-button pf-m-primary pf-m-small"
-    data-ouia-component-id="OUIA-Generated-Button-primary-7"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    Small Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button tertiary button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="tertiary"
-    class="pf-v5-c-button pf-m-tertiary"
-    data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
-    data-ouia-component-type="PF5/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    tertiary Button
-  </button>
-</DocumentFragment>
-`;
-
-exports[`Button warning button 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="warning"
-    class="pf-v5-c-button pf-m-warning"
-    data-ouia-component-id="OUIA-Generated-Button-warning-1"
+    data-ouia-component-id="OUIA-Generated-Button-primary-27"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
-    warning Button
+    Basic Button
   </button>
 </DocumentFragment>
 `;

package/src/components/Button/examples/Button.md

@@ -32,7 +32,7 @@ PatternFly supports several button styling variants to be used in different scen
 | Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
 | Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
 | Plain | Plain buttons have no styling and are intended to be labeled with icons. |
-| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
 
 ### Disabled buttons
 

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -154,12 +154,13 @@ export const CalendarMonth = ({
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
 
   const getInitialDate = () => {
-    const initDate = new Date(dateProp);
-    if (isValidDate(initDate)) {
-      return initDate;
-    } else {
-      return isValidDate(rangeStart) ? rangeStart : today;
+    if (isValidDate(dateProp)) {
+      return dateProp;
     }
+    if (isValidDate(rangeStart)) {
+      return rangeStart;
+    }
+    return today;
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
@@ -211,43 +212,25 @@ export const CalendarMonth = ({
     }
   };
 
-  const changeMonth = (month: number) => {
-    const newDate = new Date(focusedDate);
-    const desiredDay = newDate.getDate();
-    const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month
-
-    if (monthDays < desiredDay) {
-      newDate.setDate(monthDays);
-    }
-
-    newDate.setMonth(month);
-
-    if (initialDate.getDate() > desiredDay && monthDays > desiredDay) {
-      newDate.setDate(initialDate.getDate());
-    }
+  const changeYear = (newYear: number) => changeMonth(focusedDate.getMonth(), newYear);
 
-    return newDate;
-  };
+  const changeMonth = (newMonth: number, newYear?: number) =>
+    new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
 
   const addMonth = (toAdd: -1 | 1) => {
-    let newMonth = new Date(focusedDate).getMonth() + toAdd;
+    let newMonth = focusedDate.getMonth() + toAdd;
+    let newYear = focusedDate.getFullYear();
+
     if (newMonth === -1) {
       newMonth = 11;
+      newYear--;
     } else if (newMonth === 12) {
       newMonth = 0;
+      newYear++;
     }
-    const newDate = changeMonth(newMonth);
-    if (toAdd === 1 && newMonth === 0) {
-      newDate.setFullYear(newDate.getFullYear() + 1);
-    }
-    if (toAdd === -1 && newMonth === 11) {
-      newDate.setFullYear(newDate.getFullYear() - 1);
-    }
-    return newDate;
-  };
 
-  const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1;
-  const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29;
+    return changeMonth(newMonth, newYear);
+  };
 
   const prevMonth = addMonth(-1);
   const nextMonth = addMonth(1);
@@ -340,19 +323,11 @@ export const CalendarMonth = ({
                 type="number"
                 value={yearFormatted}
                 onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = new Date(focusedDate);
-                  if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) {
-                    newDate.setDate(28);
-                    newDate.setMonth(1);
-                  }
-                  if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) {
-                    newDate.setFullYear(+year);
-                    newDate.setDate(29);
-                  }
-                  newDate.setFullYear(+year);
+                  const newDate = changeYear(Number(year));
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
+                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
                   onMonthChange(ev, newDate);
                 }}
               />

package/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });