Merge pull request #491 from mashmatrix/support-slds-2-apply-slds-linter

Fix SLDS Linter Errors for SLDS2

Author: stomita

src/scripts/Button.tsx

@@ -13,7 +13,6 @@ export type ButtonType =
   | 'success'
   | 'inverse'
   | 'icon'
-  | 'icon-bare'
   | 'icon-container'
   | 'icon-inverse'
   | 'icon-more'

src/scripts/Datepicker.tsx

@@ -246,10 +246,9 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   const isToday = date.value === today;
   const isAdjacentMonth = date.month !== cal.month;
   const dateClassName = classnames({
-    'slds-disabled-text': !enabled,
     'slds-is-selected': selected,
     'slds-is-today': isToday,
-    'slds-day_adjacent-month': isAdjacentMonth,
+    'slds-day_adjacent-month': isAdjacentMonth || !enabled, // Considering the meaning, applying this class to disabled dates isn't necesarrily correct.
   });
   return (
     <td

src/scripts/Icon.tsx

@@ -201,9 +201,7 @@ export const SvgIcon = forwardRef(
 
     const inIcon = !/slds-button__icon/.test(className);
     const iconOnlyClassNames = classnames('react-slds-icon', 'slds-icon', {
-      [`slds-icon_${size}`]: /^(xx-small|x-small|small|medium|large)$/.test(
-        size
-      ),
+      [`slds-icon_${size}`]: /^(xx-small|x-small|small|large)$/.test(size),
       [`slds-icon-text-${textColor ?? 'default'}`]:
         /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
         !iconColor,

src/scripts/Pill.tsx

@@ -86,7 +86,7 @@ export const Pill: FC<PillProps> = (props) => {
       <Button
         disabled={disabled}
         className='slds-pill__remove'
-        type='icon-bare'
+        type='icon'
         icon='close'
         alt='Remove'
         tabIndex={-1}

src/scripts/Tabs.tsx

@@ -99,7 +99,7 @@ const TabMenu: FC<TabMenuProps> = (props) => {
       {...rprops}
       className='react-slds-tab-menu'
       icon={icon}
-      type='icon-bare'
+      type='icon'
       iconSize='small'
       tabIndex={-1}
       nubbinTop

src/scripts/TreeNode.tsx

@@ -86,7 +86,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          type='icon-bare'
+          type='icon'
           icon={icon}
           iconSize='small'
           onClick={onToggle}

stories/DropdownButton.stories.tsx

@@ -130,7 +130,7 @@ export const IconBare: StoryObj<StoryProps> = {
   args: {
     ...Default.args,
     label: undefined,
-    type: 'icon-bare',
+    type: 'icon',
     icon: 'settings',
   },
   parameters: {

stories/PageHeader.stories.tsx

@@ -88,7 +88,7 @@ export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
         <PageHeaderDetailItem>
           <PageHeaderDetailLabel>
             Field 2 (3)
-            <DropdownButton type='icon-bare' iconSize='small' icon='down'>
+            <DropdownButton type='icon' iconSize='small' icon='down'>
               <MenuItem>Menu Item #1</MenuItem>
               <MenuItem>Menu Item #2</MenuItem>
               <MenuItem>Menu Item #3</MenuItem>
@@ -124,7 +124,7 @@ export const ObjectHome: ComponentStoryObj<typeof PageHeader> = {
         legend='Leads'
         title='Recently Viewed'
         leftActions={
-          <DropdownButton type='icon-bare' icon='down'>
+          <DropdownButton type='icon' icon='down'>
             <MenuItem>Menu Item #1</MenuItem>
             <MenuItem>Menu Item #2</MenuItem>
             <MenuItem>Menu Item #3</MenuItem>