diff --git a/src/components/PropList.js b/src/components/PropList.js
index 8b28a1925..4e4351937 100644
--- a/src/components/PropList.js
+++ b/src/components/PropList.js
@@ -10,25 +10,32 @@ const PropList = ({ propTypes }) => {
return (
- {propTypes.map(({ name, description, type, defaultValue }) => {
- return (
-
-
-
{name}
-
{type}
- {defaultValue !== undefined && (
-
-
DEFAULT
-
{String(defaultValue)}
-
- )}
+ {propTypes.map(
+ ({ name, description, isRequired, type, defaultValue }) => {
+ return (
+
+
+
+ {name}{' '}
+ {isRequired && (
+ required
+ )}
+
+
{type}
+ {defaultValue !== undefined && (
+
+
DEFAULT
+
{String(defaultValue)}
+
+ )}
+
+
+
+
-
-
-
-
- );
- })}
+ );
+ }
+ )}
);
};
@@ -38,6 +45,7 @@ PropList.propTypes = {
PropTypes.shape({
name: PropTypes.string.isRequired,
description: PropTypes.string,
+ isRequired: PropTypes.bool,
type: PropTypes.string,
defaultValue: PropTypes.string,
})
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
index 43814d88c..5a636cb12 100644
--- a/src/components/PropList.module.scss
+++ b/src/components/PropList.module.scss
@@ -30,3 +30,10 @@
font-size: 1.25rem;
width: 70%;
}
+
+.required {
+ font-size: 0.75rem;
+ color: var(--color-red-400);
+ text-transform: uppercase;
+ margin-left: 0.5rem;
+}
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index 1624f9f4d..8a075943d 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -27,6 +27,7 @@ const extractPropTypes = (component) => {
return {
name,
description: propDocs.text,
+ isRequired: propMeta.some((item) => item.name === 'isRequired'),
type: type.displayType,
defaultValue,
};