fix carets

Author: rebeccaalpert

packages/module/src/Message/Message.test.tsx

@@ -11,6 +11,7 @@ import { DeepThinkingProps } from '../DeepThinking';
 
 // Mock the icon components
 jest.mock('@patternfly/react-icons', () => ({
+  ...jest.requireActual('@patternfly/react-icons'),
   RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
   RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
   RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,

packages/module/src/SourcesCard/SourcesCard.scss

@@ -79,25 +79,12 @@
       justify-content: space-between;
       flex: 1;
 
-      .pf-v6-c-button {
-        border-radius: var(--pf-t--global--border--radius--pill);
-        padding: var(--pf-t--global--spacer--sm);
-        width: 2.31rem;
-        height: 2.31rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
       button:disabled,
       button[disabled] {
         .pf-v6-c-icon__content {
           color: var(--pf-t--global--icon--color--disabled);
         }
       }
-      .pf-v6-c-button__text {
-        display: flex;
-        align-items: center;
-      }
       // Interactive states
       .pf-v6-c-button:hover,
       .pf-v6-c-button:focus {

packages/module/src/SourcesCardBase/SourcesCardBase.tsx

@@ -23,11 +23,10 @@ import {
   CardTitleProps,
   ExpandableSection,
   ExpandableSectionVariant,
-  Icon,
   Truncate,
   TruncateProps
 } from '@patternfly/react-core';
-import { RhMicronsExternalLinkIcon } from '@patternfly/react-icons';
+import { RhMicronsCaretLeftIcon, RhMicronsCaretRightIcon, RhMicronsExternalLinkIcon } from '@patternfly/react-icons';
 
 export interface SourcesCardBaseProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
@@ -254,6 +253,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                 >
                   <Button
                     variant={ButtonVariant.plain}
+                    isCircle
                     isDisabled={isDisabled || page === 1}
                     data-action="previous"
                     onClick={(event) => {
@@ -263,26 +263,14 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                     }}
                     aria-label={toPreviousPageAriaLabel}
                   >
-                    <Icon iconSize="lg">
-                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                      <svg
-                        className="pf-v6-svg"
-                        viewBox="0 0 280 500"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
-                      </svg>
-                    </Icon>
+                    <RhMicronsCaretLeftIcon />
                   </Button>
                   <span aria-hidden="true">
                     {page}/{sources.length}
                   </span>
                   <Button
                     variant={ButtonVariant.plain}
+                    isCircle
                     isDisabled={isDisabled || page === sources.length}
                     aria-label={toNextPageAriaLabel}
                     data-action="next"
@@ -292,20 +280,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                       handleNewPage(event, newPage);
                     }}
                   >
-                    <Icon isInline iconSize="lg">
-                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                      <svg
-                        className="pf-v6-svg"
-                        viewBox="0 0 180 500"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
-                      </svg>
-                    </Icon>
+                    <RhMicronsCaretRightIcon />
                   </Button>
                 </nav>
               </div>