fix: type and lint errors

.github/workflows/test-pr.yml

@@ -17,7 +17,7 @@ jobs:
     name: Test
     runs-on: ubuntu-latest
     steps:
-      - uses: seferov/pr-lint-action@master
+      - uses: seferov/pr-lint-action@v1.2.0
         with:
           title-regex: '^(?:(?:\[WIP\] ?)?(?:build|ci|chore|docs|task|feat|fix|perf|refactor|revert|style|test)\:(?:\ +?#\d+?\ +?)?.*)|(?:\[Snyk\].*)'
           title-regex-flags: 'g' # optional

src/core/avatar/__tests__/__snapshots__/avatar.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Avatar > should render properly with specified props and match snapshot
 <DocumentFragment>
   <span
     class="mocked-styled-0 el-avatar"
-    data-colour="purple"
+    data-colour="primary"
     data-shape="square"
     data-size="small"
     role="presentation"

src/core/avatar/__tests__/avatar.test.tsx

@@ -9,7 +9,7 @@ describe('Avatar', () => {
 
   it('should render properly with specified props and match snapshot', () => {
     const { asFragment } = render(
-      <Avatar shape="square" size="small" colour="purple">
+      <Avatar shape="square" size="small" colour="primary">
         Square Avatar
       </Avatar>,
     )

src/core/avatar/avatar.stories.tsx

@@ -42,7 +42,7 @@ export const Icons: Story = {
 export const Colour: Story = {
   args: {
     ...Example.args,
-    colour: 'purple',
+    colour: 'primary',
   },
 }
 
@@ -53,7 +53,7 @@ export const ColouredIcons: Story = {
   args: {
     ...Example.args,
     children: <DeprecatedIcon icon="contact" />,
-    colour: 'purple',
+    colour: 'primary',
   },
 }
 

src/core/chip-select/chip/styles.ts

@@ -21,21 +21,15 @@ export const ElChipSelectChip = styled.label<ElChipSelectChipProps>`
   border-radius: var(--comp-interactive_chip-border-radius);
   cursor: pointer;
 
-  &:has(input:checked) {
-    border-color: var(--comp-interactive_chip-colour-fill-default-selected);
-    background: var(--comp-interactive_chip-colour-fill-default-selected);
-    color: var(--comp-interactive_chip-colour-text-default-selected);
-  }
-
   &:hover {
     background: var(--comp-interactive_chip-colour-fill-hover-unselected);
     border-color: var(--comp-interactive_chip-colour-border-hover);
+  }
 
-    &:has(input:checked) {
-      border-color: var(--comp-interactive_chip-colour-fill-hover-selected);
-      background: var(--comp-interactive_chip-colour-fill-hover-selected);
-      color: var(--comp-interactive_chip-colour-text-hover-selected);
-    }
+  &:has(input:checked) {
+    border-color: var(--comp-interactive_chip-colour-fill-default-selected);
+    background: var(--comp-interactive_chip-colour-fill-default-selected);
+    color: var(--comp-interactive_chip-colour-text-default-selected);
   }
 
   &:has(input:focus-visible) {
@@ -52,12 +46,19 @@ export const ElChipSelectChip = styled.label<ElChipSelectChipProps>`
     background: var(--comp-interactive_chip-colour-fill-disabled-unselected);
     border-color: var(--comp-interactive_chip-colour-fill-disabled-unselected);
     color: var(--comp-interactive_chip-colour-text-disabled-unselected);
+  }
 
-    &:has(input:checked) {
-      border-color: var(--comp-interactive_chip-colour-fill-disabled-selected);
-      background: var(--comp-interactive_chip-colour-fill-disabled-selected);
-      color: var(--comp-interactive_chip-colour-text-disabled-selected);
-    }
+  &:has(input:checked:disabled),
+  &:has(input[readonly]:checked) {
+    border-color: var(--comp-interactive_chip-colour-fill-disabled-selected);
+    background: var(--comp-interactive_chip-colour-fill-disabled-selected);
+    color: var(--comp-interactive_chip-colour-text-disabled-selected);
+  }
+
+  &:has(input:checked):hover {
+    border-color: var(--comp-interactive_chip-colour-fill-hover-selected);
+    background: var(--comp-interactive_chip-colour-fill-hover-selected);
+    color: var(--comp-interactive_chip-colour-text-hover-selected);
   }
 
   &[data-size='small'] {
@@ -100,6 +101,16 @@ export const ElChipSelectChipIconContainer = styled.span`
 
   color: var(--comp-interactive_chip-colour-icon-default-unselected);
 
+  [data-size='small'] &,
+  [data-size='medium'] & {
+    width: var(--icon_size-s);
+    height: var(--icon_size-s);
+  }
+  [data-size='large'] & {
+    width: var(--icon_size-m);
+    height: var(--icon_size-m);
+  }
+
   input:checked ~ & {
     color: var(--comp-interactive_chip-colour-icon-default-selected);
   }
@@ -108,10 +119,6 @@ export const ElChipSelectChipIconContainer = styled.span`
     color: var(--comp-interactive_chip-colour-icon-hover-unselected);
   }
 
-  label:hover:has(input:checked) ~ & {
-    color: var(--comp-interactive_chip-colour-icon-hover-selected);
-  }
-
   input:is(:disabled, [readonly]) ~ & {
     color: var(--comp-interactive_chip-colour-icon-disabled-unselected);
   }
@@ -120,14 +127,8 @@ export const ElChipSelectChipIconContainer = styled.span`
     color: var(--comp-interactive_chip-colour-icon-disabled-selected);
   }
 
-  [data-size='small'] &,
-  [data-size='medium'] & {
-    width: var(--icon_size-s);
-    height: var(--icon_size-s);
-  }
-  [data-size='large'] & {
-    width: var(--icon_size-m);
-    height: var(--icon_size-m);
+  label:hover:has(input:checked) ~ & {
+    color: var(--comp-interactive_chip-colour-icon-hover-selected);
   }
 `
 

src/core/input/checkbox/styles.ts

@@ -60,38 +60,38 @@ export const elInputCheckboxIcon = css`
     color: var(--comp-select-colour-icon-disabled-unchecked);
   }
 
+  /* Focus outline */
+  input:focus-visible ~ & {
+    border-radius: var(--border-radius-m);
+    outline: var(--border-width-double) solid var(--colour-border-focus);
+    outline-offset: var(--border-width-default);
+  }
+
   /* Checked/indeterminate colours */
   input:is(:checked, :indeterminate) ~ & {
     color: var(--comp-select-colour-icon-default-checked);
   }
 
-  input:invalid:is(:checked, :indeterminate) ~ & {
-    color: var(--comp-select-colour-icon-error-checked);
+  /* When the checkbox is neither checked nor indeterminate, hide all but the unchecked icon */
+  input:not(:checked, :indeterminate) ~ &:not([data-show-when='unchecked']) {
+    display: none;
   }
 
-  input:disabled:is(input:checked, input:indeterminate) ~ & {
-    color: var(--comp-select-colour-icon-disabled-checked);
+  /* When the checkbox is indeterminate, hide all but the indeterminate icon */
+  input:indeterminate ~ &:not([data-show-when='indeterminate']) {
+    display: none;
   }
 
-  /* Focus outline */
-  input:focus-visible ~ & {
-    border-radius: var(--border-radius-m);
-    outline: var(--border-width-double) solid var(--colour-border-focus);
-    outline-offset: var(--border-width-default);
+  input:invalid:is(:checked, :indeterminate) ~ & {
+    color: var(--comp-select-colour-icon-error-checked);
   }
 
-  /* When the checkbox is indeterminate, hide all but the indeterminate icon */
-  input:indeterminate ~ &:not([data-show-when='indeterminate']) {
-    display: none;
+  input:disabled:is(input:checked, input:indeterminate) ~ & {
+    color: var(--comp-select-colour-icon-disabled-checked);
   }
 
   /* When the checkbox is checked, but not indeterminate, hide all but the checked icon */
   input:checked:not(:indeterminate) ~ &:not([data-show-when='checked']) {
     display: none;
   }
-
-  /* When the checkbox is neither checked nor indeterminate, hide all but the unchecked icon */
-  input:not(:checked, :indeterminate) ~ &:not([data-show-when='unchecked']) {
-    display: none;
-  }
 `

src/core/split-button/action/__tests__/action-base.test.tsx

@@ -4,7 +4,6 @@ import { SplitButtonContext } from '../../context'
 import { StarIcon } from '#src/icons/star'
 
 import type { ReactNode } from 'react'
-import type { SplitButtonContextType } from '../../context'
 
 test('renders as a button element when `as="button"`', () => {
   render(<SplitButtonActionBase as="button">Button</SplitButtonActionBase>, { wrapper: Wrapper })
@@ -118,7 +117,7 @@ test('shows a spinner when busy', () => {
 
 interface WrapperProps {
   children: ReactNode
-  busy?: SplitButtonContextType['busy']
+  busy?: SplitButtonContext.Value['busy']
 }
 
 function Wrapper({ children, busy }: WrapperProps) {

src/core/split-button/menu-button/__tests__/menu-button.test.tsx

@@ -3,7 +3,6 @@ import { SplitButtonMenuButton } from '../menu-button'
 import { SplitButtonContext } from '../../context'
 
 import type { ReactNode } from 'react'
-import type { SplitButtonContextType } from '../../context'
 
 vi.mock('#src/icons/chevron-down', () => ({
   ChevronDownIcon: () => <span data-testid="chevron-down-icon" />,
@@ -77,7 +76,7 @@ test('applies custom `className`', () => {
 
 interface WrapperProps {
   children: ReactNode
-  busy?: SplitButtonContextType['busy']
+  busy?: SplitButtonContext.Value['busy']
 }
 
 function Wrapper({ children, busy }: WrapperProps) {

src/core/split-button/menu-button/menu-button.stories.tsx

@@ -22,7 +22,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <SplitButtonContext.Provider value={{ size: 'medium', variant: 'primary' }}>
+      <SplitButtonContext.Provider value={{ busy: undefined, size: 'medium', variant: 'primary' }}>
         <Story />
       </SplitButtonContext.Provider>
     ),
@@ -52,10 +52,10 @@ export const Variants: Story = {
   decorators: [
     (Story) => (
       <div style={{ display: 'flex', gap: 'var(--spacing-6)' }}>
-        <SplitButtonContext.Provider value={{ size: 'medium', variant: 'primary' }}>
+        <SplitButtonContext.Provider value={{ busy: undefined, size: 'medium', variant: 'primary' }}>
           <Story />
         </SplitButtonContext.Provider>
-        <SplitButtonContext.Provider value={{ size: 'medium', variant: 'secondary' }}>
+        <SplitButtonContext.Provider value={{ busy: undefined, size: 'medium', variant: 'secondary' }}>
           <Story />
         </SplitButtonContext.Provider>
       </div>
@@ -73,13 +73,13 @@ export const Sizes: Story = {
   decorators: [
     (Story) => (
       <div style={{ display: 'flex', gap: 'var(--spacing-6)' }}>
-        <SplitButtonContext.Provider value={{ size: 'small', variant: 'primary' }}>
+        <SplitButtonContext.Provider value={{ busy: undefined, size: 'small', variant: 'primary' }}>
           <Story />
         </SplitButtonContext.Provider>
-        <SplitButtonContext.Provider value={{ size: 'medium', variant: 'primary' }}>
+        <SplitButtonContext.Provider value={{ busy: undefined, size: 'medium', variant: 'primary' }}>
           <Story />
         </SplitButtonContext.Provider>
-        <SplitButtonContext.Provider value={{ size: 'large', variant: 'primary' }}>
+        <SplitButtonContext.Provider value={{ busy: undefined, size: 'large', variant: 'primary' }}>
           <Story />
         </SplitButtonContext.Provider>
       </div>

src/core/status-indicator/status-indicator.stories.tsx

@@ -2,7 +2,7 @@ import { StatusIndicator } from './status-indicator'
 
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-const variants = ['neutral', 'success', 'pending', 'warning', 'danger', 'inactive', 'accent1', 'accent2'] as const
+const variants = ['neutral', 'success', 'pending', 'warning', 'danger', 'inactive', 'accent_1', 'accent_2'] as const
 
 const meta = {
   title: 'Core/StatusIndicator',

src/core/supplementary-info/supplementary-info-item.stories.tsx

@@ -18,8 +18,8 @@ const meta = {
         'pending',
         'warning',
         'danger',
-        'accent-1',
-        'accent-2',
+        'accent_1',
+        'accent_2',
       ] satisfies SupplementaryInfoColour[],
     },
     children: {

src/core/supplementary-info/supplementary-info.stories.tsx

@@ -46,10 +46,10 @@ const meta = {
           <SupplementaryInfo.Item key="danger" colour="danger">
             Danger
           </SupplementaryInfo.Item>,
-          <SupplementaryInfo.Item key="accent-1" colour="accent-1">
+          <SupplementaryInfo.Item key="accent_1" colour="accent_1">
             Accent 1
           </SupplementaryInfo.Item>,
-          <SupplementaryInfo.Item key="accent-2" colour="accent-2">
+          <SupplementaryInfo.Item key="accent_2" colour="accent_2">
             Accent 2
           </SupplementaryInfo.Item>,
         ],

src/core/table/checkbox/__tests__/checkbox.test.tsx

@@ -2,12 +2,12 @@ import { render, screen } from '@testing-library/react'
 import { TableCellCheckbox } from '../checkbox'
 
 test('renders as a checkbox element', () => {
-  render(<TableCellCheckbox />)
-  expect(screen.getByRole('checkbox')).toBeVisible()
+  render(<TableCellCheckbox aria-label="My checkbox" />)
+  expect(screen.getByRole('checkbox', { name: 'My checkbox' })).toBeVisible()
 })
 
 test('has .el-table-cell-checkbox class', () => {
-  const { container } = render(<TableCellCheckbox />)
+  const { container } = render(<TableCellCheckbox aria-label="My checkbox" />)
   // NOTE: We don't use getByRole here because it's not the checkbox element that receives
   // the class, rather it's the checkbox's parent. To rely on this knowledge here would be to couple
   // this test to an implementation concern. For the purpose of testing this subject, we just want
@@ -20,11 +20,11 @@ test('accepts other classes', () => {
   // the class, rather it's the checkbox's parent. To rely on this knowledge here would be to couple
   // this test to an implementation concern. For the purpose of testing this subject, we just want
   // to ensure our custom class also reaches the DOM.
-  const { container } = render(<TableCellCheckbox className="custom-class" />)
+  const { container } = render(<TableCellCheckbox aria-label="My checkbox" className="custom-class" />)
   expect(container.querySelector('.el-table-cell-checkbox')).toHaveClass('el-table-cell-checkbox custom-class')
 })
 
 test('forwards additional props to the checkbox element', () => {
-  render(<TableCellCheckbox data-testid="test-id" />)
+  render(<TableCellCheckbox aria-label="My checkbox" data-testid="test-id" />)
   expect(screen.getByTestId('test-id')).toBe(screen.getByRole('checkbox'))
 })

src/core/table/more-actions/__tests__/more-actions.test.tsx

@@ -2,27 +2,35 @@ import { render, screen } from '@testing-library/react'
 import { TableRowMoreActions } from '../more-actions'
 
 test('renders a button element', () => {
-  render(<TableRowMoreActions aria-label="More actions" />)
+  render(<TableRowMoreActions aria-label="More actions">Menu items</TableRowMoreActions>)
   expect(screen.getByRole('button', { name: 'More actions' })).toBeVisible()
 })
 
 test('renders a menu element', () => {
-  render(<TableRowMoreActions aria-label="More actions" />)
+  render(<TableRowMoreActions aria-label="More actions">Menu items</TableRowMoreActions>)
   expect(screen.getByRole('menu', { name: 'More actions' })).toBeVisible()
 })
 
 test('uses generated ids by default', () => {
-  render(<TableRowMoreActions aria-label="More actions" />)
+  render(<TableRowMoreActions aria-label="More actions">Menu items</TableRowMoreActions>)
   expect(screen.getByRole('button')).toHaveAttribute('id', expect.any(String))
   expect(screen.getByRole('menu')).toHaveAttribute('id', expect.any(String))
 })
 
 test('uses consumer-supplied id for the button when provided', () => {
-  render(<TableRowMoreActions aria-label="More actions" id="my-id" />)
+  render(
+    <TableRowMoreActions aria-label="More actions" id="my-id">
+      Menu items
+    </TableRowMoreActions>,
+  )
   expect(screen.getByRole('button')).toHaveAttribute('id', 'my-id')
 })
 
 test('forwards additional attributes to the button element', () => {
-  render(<TableRowMoreActions aria-label="More actions" data-testid="test-id" />)
+  render(
+    <TableRowMoreActions aria-label="More actions" data-testid="test-id">
+      Menu items
+    </TableRowMoreActions>,
+  )
   expect(screen.getByTestId('test-id')).toBe(screen.getByRole('button'))
 })