Pattern Props and Slots

When defining the mutable properties of a pattern, it’s important to strive for a single source of definition. This way, if those properties grow or change, we can be sure they’re up to date wherever they’re referenced (in docs, in the Schema Editor, etc).

There are 2 primary ways of defining Props and Slots for a pattern.

Defining via the Pattern Settings UI

Using the Knapsack UI to define the Props and Slots for a pattern ensures they’ll be readable everywhere they’re referenced in the documentation site.

When viewing a Template Tab on a Pattern Page, click the "Manage Internals" button at the top right.

Manage Internals Button

The Pattern Settings will appear on the right side of the UI where you can define the Props and Slots for the selected Pattern Template.

Manage Internals Flyout

Expand any Prop or Slot definition to see extra settings associated with it.

Note: Slots can be used to pass patterns into other patterns. Knapsack actually allows you to pass Pattern Examples into other Pattern Examples via the slots portion of the Schema Editor.

Prop Item Expanded

When you click the save button, the Schema Editor, along with the Props and Slots definition tables below the Schema Editor, will automatically update. If you happen to be using the Pattern Variations Block somewhere to document something like size variations, that documentation will also be automatically updated.

If you happen to be using Typescript, Knapsack also auto generates type definitions from the Props and Slots you’ve defined in the UI. You can import them from the /dist/react.d.ts file (you may need to restart your dev environment to see these files generated initially).

Defining by Inference

Support for spec inference is currently limited to React with Typescript and Vue.

You may have already defined properties for your component in code and don’t want to use the Knapsack UI to define them. In this case, for certain templating languages, Knapsack can infer the spec from your code.

To do this, you’ll need to open the data file for the pattern from the /data directory. Find the template for which you want the spec inferred, and set it’s spec value to { “isInferred”: true }.

{
  "id": "button",
  "title": "Button",
  "templates": [
    {
      "id": "react",
      "path": "../assets/patterns/button.tsx",
      "templateLanguageId": "react",
      "spec": {
        "isInferred": true
      }
    }
  ]
}

When you refresh your browser, Knapsack will have generated the Schema Editor form and the Prop/Slot definitions. If you update the spec in your coded file, it will reflect in Knapsack after a browser refresh.

Note for React: In order to have children read as a Slot by Knapsack, add a comment to your props definition (this is required, because otherwise children would be assumed by all components):

type Props = {
  title?: string;
  /** children */
  children?: React.ReactNode;
};