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

Usage

DefaultPropsProvider is a powerful context provider that enables teams to establish consistent default props for any V2 component 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>

Note: This provider only affects Abyss V2 components. Any V1 components will remain unaffected.

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 will prevent 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

<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

<DefaultPropsProvider
  components={{
    Link: {
      beforeIcon: { icon: 'star', position: 'leading' },
      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

<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

<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