Merge branch 'main' into release/v3.8.0

.eslintrc

@@ -52,6 +52,9 @@
         }],
         "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }],
         "react/prop-types": [2, { "ignore": ["children"] }],
+        "react/require-default-props": [2, {
+          "functions": "ignore" // ignore rule for function components
+        }],
         "react/react-in-jsx-scope": [0],
         "react/sort-comp": [2, {
             "order": [

package.json

@@ -209,5 +209,5 @@
     "node": "20.12.1",
     "yarn": "4.2.1"
   },
-  "packageManager": "[email protected]+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
+  "packageManager": "[email protected]"
 }

scss/buttons.scss

@@ -187,14 +187,14 @@ $primary: $ux-emerald-600;
 @mixin btn-tertiary {
   $btn-tertiary-background: transparent;
   $btn-tertiary-border: transparent;
-  $btn-tertiary-color: $synth-primary-cta-blue;
+  $btn-tertiary-color: #000000;
 
-  $btn-tertiary-hover-background: $btn-tertiary-background;
+  $btn-tertiary-hover-background: #F4F4F4;
   $btn-tertiary-hover-border: $btn-tertiary-border;
   $btn-tertiary-hover-color: $btn-tertiary-color;
 
-  $btn-tertiary-active-background: $btn-tertiary-background;
-  $btn-tertiary-active-border: $synth-hyperlink-color;
+  $btn-tertiary-active-background: #DEDEDE;
+  $btn-tertiary-active-border: #DEDEDE;
   $btn-tertiary-active-color: $btn-tertiary-hover-color;
 
   $btn-tertiary-disabled-background: $btn-tertiary-background;
@@ -221,9 +221,16 @@ $primary: $ux-emerald-600;
 
   border-width: 2px;
 
-  &:active, &.btn-tertiary:focus {
-    box-shadow: none;
-    border-color: var(--synth-hyperlink-color);
+  &:active, &:focus {
+    @include btn-remove-bootstrap-focus-outline;
+  }
+
+  &:focus-visible {
+    @include btn-focus-outline;
+  }
+
+  &:focus:not(:active):not(:hover) {
+    background-color: transparent;
   }
 }
 

src/Accordion/Accordion.tsx

@@ -59,14 +59,4 @@ function Accordion({
   );
 }
 
-Accordion.defaultProps = {
-  activeKey: undefined,
-  alwaysOpen: undefined,
-  as: undefined,
-  defaultActiveKey: undefined,
-  flush: undefined,
-  UNSAFE_className: undefined,
-  onSelect: undefined,
-};
-
 export default Accordion;

src/Accordion/AccordionCollapse.tsx

@@ -49,9 +49,4 @@ function AccordionCollapse({
   );
 }
 
-AccordionCollapse.defaultProps = {
-  variant: undefined,
-  UNSAFE_className: undefined,
-};
-
 export default AccordionCollapse;

src/Accordion/AccordionItem.tsx

@@ -46,10 +46,4 @@ function AccordionItem({
   );
 }
 
-AccordionItem.defaultProps = {
-  variant: undefined,
-  as: undefined,
-  borderless: undefined,
-  UNSAFE_className: undefined,
-};
 export default AccordionItem;

src/Accordion/AccordionToggle.tsx

@@ -45,9 +45,9 @@ type AccordionToggleProps = {
 function AccordionToggle({
   borderBottom,
   children,
-  chevronLateral,
-  chevronLeft,
-  chevronRight,
+  chevronLateral = false,
+  chevronLeft = false,
+  chevronRight = true,
   collapsedText,
   disabled,
   eventKey,
@@ -136,16 +136,4 @@ function AccordionToggle({
   );
 }
 
-AccordionToggle.defaultProps = {
-  chevronLateral: false,
-  chevronLeft: false,
-  chevronRight: true,
-  collapsedText: undefined,
-  disabled: undefined,
-  helperText: undefined,
-  leadingIcon: undefined,
-  title: undefined,
-  UNSAFE_className: undefined,
-};
-
 export default AccordionToggle;

src/Avatar/Avatar.tsx

@@ -17,13 +17,13 @@ type AvatarProps = {
 };
 
 function Avatar({
-  ariaHidden,
+  ariaHidden = false,
   colorId,
   image,
   initials,
-  large,
+  large = false,
   name = '',
-  showAlert,
+  showAlert = false,
   url,
 }: AvatarProps) {
   const [imageLoadFailed, setImageLoadFailed] = useState(false);
@@ -83,14 +83,4 @@ function Avatar({
   );
 }
 
-Avatar.defaultProps = {
-  ariaHidden: false,
-  colorId: undefined,
-  image: undefined,
-  large: false,
-  name: '',
-  showAlert: false,
-  url: undefined,
-};
-
 export default Avatar;

src/CardStack/CardStack.tsx

@@ -35,9 +35,4 @@ function CardStack({
   );
 }
 
-CardStack.defaultProps = {
-  size: undefined,
-  UNSAFE_className: undefined,
-};
-
 export default CardStack;

src/CheckboxButton/CheckboxButton.jsx

@@ -44,7 +44,9 @@ const CheckboxButton = React.forwardRef(({
     />
   );
 });
-
+// The rule is configured to not care about default props for function
+// components but because this is a forwardRef it is being triggered
+/* eslint-disable react/require-default-props */
 CheckboxButton.propTypes = {
   checked: PropTypes.bool,
   className: PropTypes.string,
@@ -59,16 +61,7 @@ CheckboxButton.propTypes = {
   ]),
   onChange: PropTypes.func,
 };
-
-CheckboxButton.defaultProps = {
-  checked: undefined,
-  className: undefined,
-  disabled: undefined,
-  indeterminate: undefined,
-  name: undefined,
-  value: undefined,
-  onChange: undefined,
-};
+/* eslint-enable react/require-default-props */
 
 CheckboxButton.displayName = 'CheckboxButton';
 

src/CheckboxButtonGroup/CheckboxButtonGroup.jsx

@@ -8,11 +8,11 @@ import './CheckboxButtonGroup.scss';
 
 export default function CheckboxButtonGroup({
   children,
-  fullWidth,
+  fullWidth = false,
   id,
-  orientation,
-  parseInput,
-  value,
+  orientation = ORIENTATIONS.ROW,
+  parseInput = (i) => i,
+  value = [],
   onChange,
 }) {
   const row = orientation === ORIENTATIONS.ROW;
@@ -73,11 +73,3 @@ CheckboxButtonGroup.propTypes = {
   ),
   onChange: PropTypes.func,
 };
-
-CheckboxButtonGroup.defaultProps = {
-  fullWidth: false,
-  orientation: ORIENTATIONS.ROW,
-  parseInput: (i) => i,
-  value: [],
-  onChange: undefined,
-};

src/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -72,10 +72,4 @@ function CopyToClipboardButton({
   );
 }
 
-CopyToClipboardButton.defaultProps = {
-  copyText: '',
-  displayText: undefined,
-  variant: ButtonVariants.NEUTRAL,
-};
-
 export default CopyToClipboardButton;

src/Drawer/DrawerFooter.tsx

@@ -23,14 +23,14 @@ type DrawerFooterProps = {
 
 function DrawerFooter({
   children,
-  isPrimaryActionLoading,
-  isSecondaryActionLoading,
-  primaryActionDisabled,
+  isPrimaryActionLoading = false,
+  isSecondaryActionLoading = false,
+  primaryActionDisabled = false,
   primaryActionIcon,
   primaryActionLoadingText,
   primaryActionText,
   primaryActionVariant,
-  secondaryActionDisabled,
+  secondaryActionDisabled = false,
   secondaryActionLoadingText,
   secondaryActionText,
   onPrimaryAction,
@@ -72,20 +72,4 @@ function DrawerFooter({
   );
 }
 
-DrawerFooter.defaultProps = {
-  children: undefined,
-  isPrimaryActionLoading: false,
-  isSecondaryActionLoading: false,
-  primaryActionDisabled: false,
-  primaryActionIcon: undefined,
-  primaryActionLoadingText: undefined,
-  primaryActionText: undefined,
-  primaryActionVariant: undefined,
-  secondaryActionDisabled: false,
-  secondaryActionLoadingText: undefined,
-  secondaryActionText: undefined,
-  onPrimaryAction: undefined,
-  onSecondaryAction: undefined,
-};
-
 export default DrawerFooter;

src/Drawer/DrawerHeader.tsx

@@ -58,9 +58,4 @@ function DrawerHeader({
   );
 }
 
-DrawerHeader.defaultProps = {
-  bordered: true,
-  title: null,
-};
-
 export default DrawerHeader;

src/Dropdown/DropdownDivider.tsx

@@ -34,10 +34,4 @@ function DropdownDivider({
   );
 }
 
-DropdownDivider.defaultProps = {
-  as: 'hr',
-  bsPrefix: 'dropdown',
-  className: undefined,
-};
-
 export default DropdownDivider;

src/Layout/SidebarView/SidebarView.jsx

@@ -185,6 +185,7 @@ SidebarView.propTypes = {
   onSidebarCloseRequest: PropTypes.func.isRequired,
 };
 
+// Default props ok for class component
 SidebarView.defaultProps = {
   className: undefined,
   hideSidebar: false,

src/LoadingSkeleton/LoadingSkeleton.tsx

@@ -48,11 +48,21 @@ export type LoadingSkeletonProps = SkeletonProps & {
 
 function LoadingSkeleton({
   className,
+  borderRadius = '4px',
+  circle = false,
+  count = 1,
+  inline = false,
+  width = '100%',
   ...props
 }: LoadingSkeletonProps) {
   return (
     <SkeletonTheme baseColor={colors.UX_GRAY_300}>
       <Skeleton
+        borderRadius={borderRadius}
+        circle={circle}
+        count={count}
+        inline={inline}
+        width={width}
         {...props}
         className={classNames('LoadingSkeleton', className)}
         containerClassName={classNames('loadingSkeletonContainer', props.containerClassName)}
@@ -61,16 +71,4 @@ function LoadingSkeleton({
   );
 }
 
-LoadingSkeleton.defaultProps = {
-  borderRadius: '4px',
-  className: undefined,
-  circle: false,
-  containerClassName: undefined,
-  containerTestId: undefined,
-  count: 1,
-  height: undefined,
-  inline: false,
-  width: '100%',
-};
-
 export default LoadingSkeleton;

src/Popover/PopoverBody.tsx

@@ -25,8 +25,4 @@ function PopoverBody({
   );
 }
 
-PopoverBody.defaultProps = {
-  className: undefined,
-};
-
 export default PopoverBody;