Repository: storybookjs/storybook
File: code/core/src/controls/components/ControlsPanel.tsx (TypeScript)

Code before:

import {
  ArgsTable,
  type SortType,
} from '../../../../addons/docs/src/blocks/components/ArgsTable/ArgsTable';
import type { PresetColor } from '../../../../addons/docs/src/blocks/controls/types';
import { PARAM_KEY } from '../constants';
import { SaveStory } from './SaveStory';

// Remove undefined values (top-level only)
const clean = (obj: { [key: string]: any }) =>
  Object.entries(obj).reduce(
    (acc, [key, value]) => (value !== undefined ? Object.assign(acc, { [key]: value }) : acc),
    {} as typeof obj
  );

const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
  height: '100%',
  maxHeight: '100vh',
  paddingBottom: showSaveFromUI ? 41 : 0,
  backgroundColor: theme.background.content,

  thead: {
    backgroundColor: theme.background.app,
    lineHeight: '19px',
  },
}));

interface ControlsParameters {
  sort?: SortType;
  expanded?: boolean;
  presetColors?: PresetColor[];
  disableSaveFromUI?: boolean;
}

interface ControlsPanelProps {
  saveStory: () => Promise<unknown>;
  createStory: (storyName: string) => Promise<unknown>;
}

export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => {
  const api = useStorybookApi();
  const [isLoading, setIsLoading] = useState(true);
  const [args, updateArgs, resetArgs, initialArgs] = useArgs();
  const [globals] = useGlobals();
  const rows = useArgTypes();
  const {
    expanded,
    sort,
    presetColors,
    disableSaveFromUI = false,

Review comment (suggestion):
I have a bit of an (non blocking) issue with this code.
I understand you're trying to change the styling of something rendered internally to this component.

Can you explain why an override is the right approach?
Is this styling change/override only desirable here, in the ControlPanel component?
The ArgsTable-component is also a doc-block, why would this styling change not be applied there?

Personally I see styling overrides a bit like a code-smell, because it results in more inconsistencies over time.
I'd prefer components to be self-reliant, influenced only by explicits API's (such as props, context, and explicit classNames) (with a very strong preference for props).

Here's the element you're targetting AFAICS:
https://github.com/storybookjs/storybook/blob/9ff887c4e4b3de8cf42ec8bfb3fca511f0eb7d2d/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx#L405

Code after:

import {
  ArgsTable,
  type SortType,
} from '../../../../addons/docs/src/blocks/components/ArgsTable/ArgsTable';
import type { PresetColor } from '../../../../addons/docs/src/blocks/controls/types';
import { PARAM_KEY } from '../constants';
import { SaveStory } from './SaveStory';

// Remove undefined values (top-level only)
const clean = (obj: { [key: string]: any }) =>
  Object.entries(obj).reduce(
    (acc, [key, value]) => (value !== undefined ? Object.assign(acc, { [key]: value }) : acc),
    {} as typeof obj
  );

const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
  height: '100%',
  maxHeight: '100vh',
  paddingBottom: showSaveFromUI ? 41 : 0,
  backgroundColor: theme.background.content,

  table: {
    backgroundColor: theme.background.app,
  },
}));

interface ControlsParameters {
  sort?: SortType;
  expanded?: boolean;
  presetColors?: PresetColor[];
  disableSaveFromUI?: boolean;
}

interface ControlsPanelProps {
  saveStory: () => Promise<unknown>;
  createStory: (storyName: string) => Promise<unknown>;
}

export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => {
  const api = useStorybookApi();
  const [isLoading, setIsLoading] = useState(true);
  const [args, updateArgs, resetArgs, initialArgs] = useArgs();
  const [globals] = useGlobals();
  const rows = useArgTypes();
  const {
    expanded,
    sort,
    presetColors,
    disableSaveFromUI = false,
  } = useParameter<ControlsParameters>(PARAM_KEY, {});