import { DefaultPropsProvider } from '@uhg-abyss/web/ui/DefaultPropsProvider';

Usage

DefaultPropsProvider is a powerful context provider that enables teams to establish consistent default props components throughout their application. Instead of repeatedly specifying the same props across multiple instances of a component, you can define these defaults once at a higher level in your component tree. This approach offers several benefits:

• Consistency: Enforce uniform styling and behavior across your application
• Maintainability: Update default props in one place rather than hunting for each component instance
• Customization: Create themed sections of your application by nesting providers with different defaults
• Flexibility: Override defaults when needed or opt out entirely with disableDefaultProviderProps

<DefaultPropsProvider
  components={{
    [componentName]: {
      // ...default props for the component
    },
    // Example:
    Button: {
      color: 'destructive',
    },
  }}
>
  {/* ...children */}
</DefaultPropsProvider>

Info

This provider is compatible with the majority of Abyss components. A complete list of supported components can be found here.

Opting out of defaults

To opt out of the defaults provided by DefaultPropsProvider for a given component instance, set the disableDefaultProviderProps prop to true on the component. This prevents the component from inheriting any default props set by the provider.

Examples

Here are some example use cases with different component configurations and default prop setups.

Button

() => {
  return (
    <DefaultPropsProvider
      components={{
        Button: {
          icon: { icon: 'star', position: 'leading' },
          color: 'destructive',
        },
      }}
    >
      <Layout.Stack alignItems="left">
        <Button>Provider defaults</Button>
        <Button color="neutral">Provider defaults with color override</Button>
        <Button disableDefaultProviderProps>
          Opt out of provider defaults
        </Button>
      </Layout.Stack>
    </DefaultPropsProvider>
  );
};

Editable Example

Link

() => {
  return (
    <DefaultPropsProvider
      components={{
        Link: {
          beforeIcon: 'star',
          variant: 'underlined',
        },
      }}
    >
      <Layout.Stack alignItems="left">
        <Link>Provider defaults</Link>
        <Link variant="default">Provider defaults with variant override</Link>
        <Link disableDefaultProviderProps>Opt out of provider defaults</Link>
      </Layout.Stack>
    </DefaultPropsProvider>
  );
};

Editable Example

Accordion & Accordion.Header

() => {
  return (
    <DefaultPropsProvider
      components={{
        Accordion: { triggerPosition: 'left' },
        'Accordion.Header': {
          icon: 'star',
          headingLevel: 2,
        },
      }}
    >
      <Accordion>
        <Accordion.Item value="1">
          <Accordion.Header>Provider defaults </Accordion.Header>
          <Accordion.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="2">
          <Accordion.Header icon="home">
            Provider defaults with icon override
          </Accordion.Header>
          <Accordion.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="3">
          <Accordion.Header disableDefaultProviderProps>
            Opt out of provider defaults
          </Accordion.Header>
          <Accordion.Content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </DefaultPropsProvider>
  );
};

Editable Example

Tabs & Tabs.Tab

() => {
  return (
    <DefaultPropsProvider
      components={{
        Tabs: { display: 'column' },
        'Tabs.Tab': {
          subLabel: 'Generic',
        },
      }}
    >
      <Tabs title="Tabs Sandbox">
        <Tabs.Tab label="Tab 1">Provider defaults</Tabs.Tab>
        <Tabs.Tab label="Tab 2" subLabel="Middle">
          Provider defaults with subLabel override
        </Tabs.Tab>
        <Tabs.Tab label="Tab 3" disableDefaultProviderProps>
          Opt out of provider defaults
        </Tabs.Tab>
      </Tabs>
    </DefaultPropsProvider>
  );
};

Editable Example