chore: fix lint warnings for @fluentui/react (microsoft#28888)

Resolves all lints warnings for @fluentui/react package.
spmonahan · Aug 17, 2023 · 669c13c · 669c13c
1 parent 8696dd1
commit 669c13c
Show file tree

Hide file tree

Showing 48 changed files with 105 additions and 112 deletions.
diff --git a/change/@fluentui-react-18898464-2c24-40e1-9978-220dc91624d1.json b/change/@fluentui-react-18898464-2c24-40e1-9978-220dc91624d1.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "chore: fix all lint warnings for @fluentui/react",
+ "packageName": "@fluentui/react",
+ "email": "seanmonahan@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.base.tsx
@@ -44,10 +44,10 @@ export const CalendarDayBase: React.FunctionComponent<ICalendarDayProps> = props
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  headerIsClickable: !!onHeaderSelect,
- showWeekNumbers: showWeekNumbers,
- animationDirection: animationDirection,
+ showWeekNumbers,
+ animationDirection,
  });
 
  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);

diff --git a/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts b/packages/react/src/components/Calendar/CalendarDay/CalendarDay.styles.ts
@@ -107,6 +107,6 @@ export const styles = (props: ICalendarDayStyleProps): ICalendarDayStyles => {
  },
  },
  ],
- disabledStyle: disabledStyle,
+ disabledStyle,
  };
 };
diff --git a/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx b/packages/react/src/components/Calendar/CalendarMonth/CalendarMonth.base.tsx
@@ -159,12 +159,12 @@ export const CalendarMonthBase: React.FunctionComponent<ICalendarMonthProps> = p
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  hasHeaderClickCallback: !!props.onHeaderSelect || !yearPickerHidden,
  highlightCurrent: highlightCurrentMonth,
  highlightSelected: highlightSelectedMonth,
- animateBackwards: animateBackwards,
- animationDirection: animationDirection,
+ animateBackwards,
+ animationDirection,
  });
 
  if (isYearPickerVisible) {

diff --git a/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx b/packages/react/src/components/Calendar/CalendarYear/CalendarYear.base.tsx
@@ -86,7 +86,7 @@ const CalendarYearGridCell: React.FunctionComponent<ICalendarYearGridCellProps>
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  highlightCurrent: highlightCurrentYear,
  highlightSelected: highlightSelectedYear,
  });
@@ -163,9 +163,9 @@ const CalendarYearGrid: React.FunctionComponent<ICalendarYearGridProps> = props
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
- animateBackwards: animateBackwards,
- animationDirection: animationDirection,
+ className,
+ animateBackwards,
+ animationDirection,
  });
 
  const onRenderYear = (value: number) => {
@@ -228,7 +228,7 @@ const CalendarYearNavArrow: React.FunctionComponent<ICalendarYearNavArrowProps>
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  });
 
  const ariaLabel =
@@ -279,7 +279,7 @@ const CalendarYearNav: React.FunctionComponent<ICalendarYearHeaderProps> = props
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  });
 
  return (
@@ -320,10 +320,10 @@ const CalendarYearTitle: React.FunctionComponent<ICalendarYearHeaderProps> = pro
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  hasHeaderClickCallback: !!props.onHeaderSelect,
- animateBackwards: animateBackwards,
- animationDirection: animationDirection,
+ animateBackwards,
+ animationDirection,
  });
 
  if (props.onHeaderSelect) {
@@ -368,10 +368,10 @@ const CalendarYearHeader: React.FunctionComponent<ICalendarYearHeaderProps> = pr
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  hasHeaderClickCallback: !!props.onHeaderSelect,
- animateBackwards: animateBackwards,
- animationDirection: animationDirection,
+ animateBackwards,
+ animationDirection,
  });
 
  return (
@@ -438,7 +438,7 @@ export const CalendarYearBase: React.FunctionComponent<ICalendarYearProps> = pro
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
+ className,
  });
 
  return (

diff --git a/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx b/packages/react/src/components/CalendarDayGrid/CalendarDayGrid.base.tsx
@@ -358,13 +358,13 @@ export const CalendarDayGridBase: React.FunctionComponent<ICalendarDayGridProps>
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- className: className,
- dateRangeType: dateRangeType,
- showWeekNumbers: showWeekNumbers,
+ className,
+ dateRangeType,
+ showWeekNumbers,
  lightenDaysOutsideNavigatedMonth:
  lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,
- animationDirection: animationDirection,
- animateBackwards: animateBackwards,
+ animationDirection,
+ animateBackwards,
  });
 
  // When the month is highlighted get the corner dates so that styles can be added to them

diff --git a/packages/react/src/components/Check/Check.styles.ts b/packages/react/src/components/Check/Check.styles.ts
@@ -26,7 +26,7 @@ export const getStyles = (props: ICheckStyleProps): ICheckStyles => {
  left: 0,
  top: 0,
  width: height,
- height: height,
+ height,
  textAlign: 'center',
  // inline-flex prevents the check from shifting with custom line height styles
  display: 'inline-flex',
@@ -43,7 +43,7 @@ export const getStyles = (props: ICheckStyleProps): ICheckStyles => {
  // lineHeight currently needs to be a string to output without 'px'
  lineHeight: '1',
  width: height,
- height: height,
+ height,
  verticalAlign: 'top',
  position: 'relative',
  userSelect: 'none',

diff --git a/packages/react/src/components/Coachmark/Beak/Beak.tsx b/packages/react/src/components/Coachmark/Beak/Beak.tsx
@@ -64,7 +64,7 @@ export const Beak: React.FunctionComponent<IBeakProps> = React.forwardRef<HTMLDi
  right,
  height: `${svgHeight}px`,
  width: `${svgWidth}px`,
- transform: transform,
+ transform,
  color,
  });
 

diff --git a/packages/react/src/components/Coachmark/Coachmark.styles.ts b/packages/react/src/components/Coachmark/Coachmark.styles.ts
@@ -276,7 +276,7 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
  entityInnerHost: [
  {
  transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
- transformOrigin: transformOrigin,
+ transformOrigin,
  transform: 'scale(0)',
  },
  !isCollapsed && {

diff --git a/packages/react/src/components/DetailsList/DetailsColumn.styles.ts b/packages/react/src/components/DetailsList/DetailsColumn.styles.ts
@@ -190,7 +190,7 @@ export const getDetailsColumnStyles = (props: IDetailsColumnStyleProps): IDetail
 
  accessibleLabel: hiddenContentStyle,
 
- borderWhileDragging: borderWhileDragging,
+ borderWhileDragging,
 
  noBorderWhileDragging: [borderAfterDragOrDrop, { transition: `outline ${transitionDurationDrag}ms ease` }],
 

diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts b/packages/react/src/components/DetailsList/DetailsRowCheck.styles.ts
@@ -41,7 +41,7 @@ export const getDetailsRowCheckStyles = (props: IDetailsRowCheckStyleProps): IDe
  backgroundColor: 'transparent',
  border: 'none',
  opacity: isCheckVisible ? 1 : 0,
- height: height,
+ height,
  width: CHECK_CELL_WIDTH,
  padding: 0,
  margin: 0,

diff --git a/packages/react/src/components/Divider/VerticalDivider.base.tsx b/packages/react/src/components/Divider/VerticalDivider.base.tsx
@@ -14,7 +14,7 @@ export const VerticalDividerBase: React.FunctionComponent<IVerticalDividerProps>
 >((props, ref) => {
  // eslint-disable-next-line deprecation/deprecation
  const { styles, theme, getClassNames: deprecatedGetClassNames, className } = props;
- const classNames = getClassNames(styles, { theme: theme, getClassNames: deprecatedGetClassNames, className });
+ const classNames = getClassNames(styles, { theme, getClassNames: deprecatedGetClassNames, className });
  return (
  <span className={classNames.wrapper} ref={ref}>
  <span className={classNames.divider} />

diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardPreview.base.tsx
@@ -69,10 +69,7 @@ export class DocumentCardPreviewBase extends React.Component<IDocumentCardPrevie
 
  if (previewIconProps) {
  return (
- <div
- className={css(this._classNames.previewIcon, previewIconContainerClass)}
- style={{ width: width, height: height }}
- >
+ <div className={css(this._classNames.previewIcon, previewIconContainerClass)} style={{ width, height }}>
  <Icon {...previewIconProps} />
  </div>
  );

diff --git a/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx b/packages/react/src/components/ExtendedPicker/BaseExtendedPicker.test.tsx
@@ -58,7 +58,7 @@ const basicRenderSelectedItemsList = (props: IBaseSelectedItemsListProps<ISimple
 };
 
 const floatingPickerProps = {
- onResolveSuggestions: onResolveSuggestions,
+ onResolveSuggestions,
  onRenderSuggestionsItem: basicSuggestionRenderer,
  suggestionsStore: new SuggestionsStore<ISimple>(),
 };

diff --git a/packages/react/src/components/Fabric/Fabric.base.tsx b/packages/react/src/components/Fabric/Fabric.base.tsx
@@ -39,7 +39,7 @@ export const FabricBase: React.FunctionComponent<IFabricProps> = React.forwardRe
 
  const classNames = getClassNames(styles, {
  theme: theme!,
- applyTheme: applyTheme,
+ applyTheme,
  className,
  });
 

diff --git a/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx b/packages/react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
@@ -29,7 +29,7 @@ export function createItem(name: string, isValid: boolean): ISuggestionModel<IPe
  key: name,
  primaryText: name,
  imageInitials: '!',
- isValid: isValid,
+ isValid,
  };
 
  if (!isValid) {

diff --git a/packages/react/src/components/GroupedList/GroupedList.base.tsx b/packages/react/src/components/GroupedList/GroupedList.base.tsx
@@ -139,7 +139,7 @@ export class GroupedListBase extends React.Component<IGroupedListProps, IGrouped
  this._classNames = getClassNames(styles, {
  theme: theme!,
  className,
- compact: compact,
+ compact,
  });
 
  const { shouldEnterInnerZone = this._isInnerZoneKeystroke } = focusZoneProps;

diff --git a/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx b/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx
@@ -28,15 +28,15 @@ export const CardCallout = (props: ICardCalloutProps) => {
 
  const mergedCalloutProps: ICalloutProps = {
  ...getNativeProps(props, divProperties),
- className: className,
+ className,
  target: targetElement,
  isBeakVisible: false,
- directionalHint: directionalHint,
- directionalHintFixed: directionalHintFixed,
- finalHeight: finalHeight,
+ directionalHint,
+ directionalHintFixed,
+ finalHeight,
  minPagePadding: 24,
  onDismiss: onLeave,
- gapSpace: gapSpace,
+ gapSpace,
  ...calloutProps,
  };
 

diff --git a/packages/react/src/components/HoverCard/ExpandingCard.base.tsx b/packages/react/src/components/HoverCard/ExpandingCard.base.tsx
@@ -53,7 +53,7 @@ export class ExpandingCardBase extends React.Component<IExpandingCardProps, IExp
  compactCardHeight,
  className,
  expandedCardHeight,
- needsScroll: needsScroll,
+ needsScroll,
  expandedCardFirstFrameRendered: mode === ExpandingCardMode.expanded && firstFrameRendered,
  });
 

diff --git a/packages/react/src/components/Image/Image.base.tsx b/packages/react/src/components/Image/Image.base.tsx
@@ -124,7 +124,7 @@ export const ImageBase: React.FunctionComponent<IImageProps> = React.forwardRef<
 
  // If image dimensions aren't specified, the natural size of the image is used.
  return (
- <div className={classNames.root} style={{ width: width, height: height }} ref={frameElement}>
+ <div className={classNames.root} style={{ width, height }} ref={frameElement}>
  <img
  {...imageProps}
  onLoad={onImageLoaded}

diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
@@ -662,7 +662,7 @@ export class KeytipLayerBase extends React.Component<IKeytipLayerProps, IKeytipL
  * @param inKeytipMode - Boolean so set whether we are in keytip mode or not
  */
  private _setInKeytipMode = (inKeytipMode: boolean): void => {
- this.setState({ inKeytipMode: inKeytipMode });
+ this.setState({ inKeytipMode });
  this._keytipManager.inKeytipMode = inKeytipMode;
  };
 

diff --git a/packages/react/src/components/MessageBar/MessageBar.base.tsx b/packages/react/src/components/MessageBar/MessageBar.base.tsx
@@ -76,9 +76,9 @@ export const MessageBarBase: React.FunctionComponent<IMessageBarProps> = React.f
  messageBarType: messageBarType || MessageBarType.info,
  onDismiss: onDismiss !== undefined,
  actions: actions !== undefined,
- truncated: truncated,
- isMultiline: isMultiline,
- expandSingleLine: expandSingleLine,
+ truncated,
+ isMultiline,
+ expandSingleLine,
  className,
  });
 

diff --git a/packages/react/src/components/Nav/Nav.base.tsx b/packages/react/src/components/Nav/Nav.base.tsx
@@ -49,8 +49,6 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
  initializeComponentRef(this);
  this.state = {
  isGroupCollapsed: {},
- // TODO: consider removing
- // eslint-disable-next-line react/no-unused-state
  isLinkExpandStateChanged: false,
  selectedKey: props.initialSelectedKey || props.selectedKey,
  };
@@ -309,7 +307,6 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
 
  if (!ev.defaultPrevented) {
  link.isExpanded = !link.isExpanded;
- // eslint-disable-next-line react/no-unused-state
  this.setState({ isLinkExpandStateChanged: true });
  }
 

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.base.tsx
@@ -70,7 +70,7 @@ export class ProgressIndicatorBase extends React.Component<IProgressIndicatorPro
  ? onRenderProgress(
  {
  ...(this.props as IProgressIndicatorProps),
- percentComplete: percentComplete,
+ percentComplete,
  },
  this._onRenderProgress,
  )

diff --git a/packages/react/src/components/Rating/Rating.styles.ts b/packages/react/src/components/Rating/Rating.styles.ts
@@ -17,7 +17,7 @@ const GlobalClassNames = {
 
 function _getColorWithHighContrast(color: string, highContrastColor: string) {
  return {
- color: color,
+ color,
  selectors: {
  [HighContrastSelector]: {
  color: highContrastColor,