refactor!: remove theme defaultProp (#1905)

Author: ze-flo

docs/migration.md

@@ -180,8 +180,11 @@ consider additional positioning prop support on a case-by-case basis.
   scheme to custom components that are not part of the Garden framework. It is
   recommended to utilize this stopgap measure until such components can be updated
   to leverage the full capabilities of v9 `getColor`.
-- The `focusVisibleRef` prop (and the resulting scoping `<div>`) has been
-  removed from `<ThemeProvider>`. Current browser support obviates the need for a
+- Removed the `theme` default prop from all components. Garden components must
+  be nested within `<ThemeProvider>` to receive the `theme` object and
+  render successfully.
+- Removed `focusVisibleRef` prop (and the resulting scoping `<div>`) from
+  `<ThemeProvider>`. Current browser support obviates the need for a
   `:focus-visible` polyfill.
 - Removed `message` and `connect` values from `PALETTE.product`
 - Utility function `getColor` has been refactored with a signature that supports

eslint.config.mjs

@@ -11,7 +11,6 @@ import noticePlugin from '@zendeskgarden/eslint-config/plugins/notice.js';
 import reactPlugin from '@zendeskgarden/eslint-config/plugins/react.js';
 import typescriptPlugin from '@zendeskgarden/eslint-config/plugins/typescript.js';
 import jestPlugin from '@zendeskgarden/eslint-config/plugins/jest.js';
-import gardenLocalPlugin from 'eslint-plugin-garden-local';
 
 const typescriptRules = {
   ...typescriptPlugin.rules,
@@ -46,16 +45,6 @@ export default [
       ...typescriptRules
     }
   },
-  {
-    files: ['packages/*/src/**/*.{ts,tsx}'],
-    ignores: ['packages/.template/**/*.{ts,tsx}', 'packages/*/src/**/*.spec.{ts,tsx}'],
-    plugins: {
-      'garden-local': gardenLocalPlugin
-    },
-    rules: {
-      'garden-local/require-default-theme': 'error'
-    }
-  },
   {
     files: ['packages/*/src/**/*.spec.{ts,tsx}'],
     ignores: ['packages/.template/**/*.spec.{ts,tsx}'],

package-lock.json

@@ -73,7 +73,6 @@
     "envalid": "8.0.0",
     "eslint": "9.9.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-garden-local": "file:./utils/eslint",
     "execa": "9.3.1",
     "husky": "9.1.5",
     "identity-obj-proxy": "3.0.0",

package.json

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.accordion';
 
@@ -16,7 +16,3 @@ export const StyledAccordion = styled.div.attrs({
 })`
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledAccordion.defaultProps = {
-  theme: DEFAULT_THEME
-};

packages/accordions/src/styled/accordion/StyledAccordion.ts

@@ -6,12 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  getLineHeight,
-  retrieveComponentStyles,
-  DEFAULT_THEME,
-  getColor
-} from '@zendeskgarden/react-theming';
+import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 export const COMPONENT_ID = 'accordions.button';
 
@@ -79,7 +74,3 @@ export const StyledButton = styled.button.attrs<IStyledButton>({
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};

packages/accordions/src/styled/accordion/StyledButton.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 const COMPONENT_ID = 'accordions.header';
@@ -38,7 +38,3 @@ export const StyledHeader = styled.div.attrs<IStyledHeader>({
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};

packages/accordions/src/styled/accordion/StyledHeader.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel';
 
 const COMPONENT_ID = 'accordions.step_inner_panel';
@@ -34,7 +34,3 @@ export const StyledInnerPanel = styled.div.attrs({
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledInnerPanel.defaultProps = {
-  theme: DEFAULT_THEME
-};

packages/accordions/src/styled/accordion/StyledInnerPanel.ts

@@ -6,12 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import {
-  retrieveComponentStyles,
-  DEFAULT_THEME,
-  StyledBaseIcon,
-  getColor
-} from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 
@@ -65,7 +60,3 @@ export const StyledRotateIcon = styled(StyledBaseIcon).attrs({
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledRotateIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};

packages/accordions/src/styled/accordion/StyledRotateIcon.ts

@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledPanel } from './StyledPanel';
 
 const COMPONENT_ID = 'accordions.section';
@@ -21,7 +21,3 @@ export const StyledSection = styled.div.attrs({
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
-
-StyledSection.defaultProps = {
-  theme: DEFAULT_THEME
-};