Code SourcesAdvanced Prop Configurations

Using Multiple Prop Types

Understand how to configure props that can accept multiple types, increasing the versatility of your components.
View as Markdown

Note: This section assumes you’ve already read and understood the section in the previous document around how to add and edit the “Prop Spec”.

Overview

A design system component’s prop may need to accept multiple types to provide flexibility and accommodate various use cases. This section will cover the implementation and validation of props that can handle various data types, ensuring robust and adaptable components.

For instance:

  • A “size” prop might accept different formats such as a string or number to cater to diverse design requirements.
    • A string value like “caption” could correspond to a predefined font size, ensuring quick and consistent styling across components.
    • A numeric value from 1 to 6 might offer more granular control over heading sizes.

By accepting multiple types, props become more versatile and enhance the adaptability of the design system to various design needs and developer preferences.

1

Step 1: Add new prop OR edit an existing

The first step in the process involves adding or editing an existing prop within the components spec.

2

Step 2: Click the "additional settings" arrow to further configure the prop

Clicking the “additional settings” arrow will allow for further configuration of prop types. If adding a new prop — use the “Custom” prop type.

3

Step 3: Update the prop spec definition to contain "anyOf"

From within the additional settings area, click “Prop Spec” and add an “anyOf” key like the below example:

1{
2  "title": "label",
3  "anyOf": [
4    {
5      "title": "String Options",
6      "type": "string",
7      "enum": [
8        "emphasize",
9        "caption",
10        "body"
11      ]
12    },
13    {
14      "title": "Number Options",
15      "type": "number",
16      "enum": [
17        1,
18        2,
19        3,
20        4,
21        5,
22        6,
23        7
24      ]
25    }
26  ],
27  "description": "Use a string or a number from a set"
28}
4

Step 4: Click the "Save Changes" button and begin using multiple prop types!

The last step is to save the changes. Click the blue “Save Changes” button and begin using multiple prop types.

Conclusion

Pulling it all together we can now use multiple prop types 🎉

Screenshot 2024-07-25 at 1.48.20 PM.png

Screenshot 2024-07-25 at 1.47.14 PM.png

Screenshot 2024-07-25 at 1.47.23 PM.png