From 3d2f42fdb8a8d949af2d1c75c51c9b99ab101a8d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 4 Jan 2025 10:07:34 +0100 Subject: [PATCH] [docs-infra] Always document the `className` and `render` props (#1226) --- docs/reference/generated/menu-checkbox-item.json | 8 ++++++++ docs/reference/generated/menu-item.json | 8 ++++++++ docs/reference/generated/menu-radio-item.json | 8 ++++++++ docs/reference/generated/select-item-text.json | 11 ++++++++++- docs/reference/generated/select-item.json | 8 ++++++++ .../generated/select-scroll-down-arrow.json | 8 ++++++++ docs/reference/generated/select-scroll-up-arrow.json | 8 ++++++++ .../src/menu/checkbox-item/MenuCheckboxItem.tsx | 12 ++++++++++++ packages/react/src/menu/item/MenuItem.tsx | 12 ++++++++++++ packages/react/src/menu/radio-item/MenuRadioItem.tsx | 12 ++++++++++++ .../react/src/select/item-text/SelectItemText.tsx | 12 ++++++++++++ packages/react/src/select/item/SelectItem.tsx | 12 ++++++++++++ .../scroll-down-arrow/SelectScrollDownArrow.tsx | 12 ++++++++++++ .../select/scroll-up-arrow/SelectScrollUpArrow.tsx | 12 ++++++++++++ scripts/generateProptypes.ts | 6 ++---- 15 files changed, 144 insertions(+), 5 deletions(-) diff --git a/docs/reference/generated/menu-checkbox-item.json b/docs/reference/generated/menu-checkbox-item.json index 8786d2740d..96dd85f7c5 100644 --- a/docs/reference/generated/menu-checkbox-item.json +++ b/docs/reference/generated/menu-checkbox-item.json @@ -32,6 +32,14 @@ "type": "boolean", "default": "false", "description": "Whether the component should ignore user interaction." + }, + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": { diff --git a/docs/reference/generated/menu-item.json b/docs/reference/generated/menu-item.json index 28b7fadf87..51f1eab64d 100644 --- a/docs/reference/generated/menu-item.json +++ b/docs/reference/generated/menu-item.json @@ -19,6 +19,14 @@ "type": "boolean", "default": "false", "description": "Whether the component should ignore user interaction." + }, + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": {}, diff --git a/docs/reference/generated/menu-radio-item.json b/docs/reference/generated/menu-radio-item.json index 4c940ca09a..371a221868 100644 --- a/docs/reference/generated/menu-radio-item.json +++ b/docs/reference/generated/menu-radio-item.json @@ -24,6 +24,14 @@ "type": "boolean", "default": "false", "description": "Whether the component should ignore user interaction." + }, + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": { diff --git a/docs/reference/generated/select-item-text.json b/docs/reference/generated/select-item-text.json index ef07773b09..acb5bb8606 100644 --- a/docs/reference/generated/select-item-text.json +++ b/docs/reference/generated/select-item-text.json @@ -1,7 +1,16 @@ { "name": "SelectItemText", "description": "A text label of the select item.\nRenders a `
` element.", - "props": {}, + "props": { + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." + } + }, "dataAttributes": {}, "cssVariables": {} } diff --git a/docs/reference/generated/select-item.json b/docs/reference/generated/select-item.json index 2df12aabde..06a7ca6c1f 100644 --- a/docs/reference/generated/select-item.json +++ b/docs/reference/generated/select-item.json @@ -15,6 +15,14 @@ "type": "boolean", "default": "false", "description": "Whether the component should ignore user interaction." + }, + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": {}, diff --git a/docs/reference/generated/select-scroll-down-arrow.json b/docs/reference/generated/select-scroll-down-arrow.json index b174023d0c..1e33a5868d 100644 --- a/docs/reference/generated/select-scroll-down-arrow.json +++ b/docs/reference/generated/select-scroll-down-arrow.json @@ -2,10 +2,18 @@ "name": "SelectScrollDownArrow", "description": "An element that scrolls the select menu down when hovered.\nRenders a `
` element.", "props": { + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, "keepMounted": { "type": "boolean", "default": "false", "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": { diff --git a/docs/reference/generated/select-scroll-up-arrow.json b/docs/reference/generated/select-scroll-up-arrow.json index dd1b5e3877..28566eaa7f 100644 --- a/docs/reference/generated/select-scroll-up-arrow.json +++ b/docs/reference/generated/select-scroll-up-arrow.json @@ -2,10 +2,18 @@ "name": "SelectScrollUpArrow", "description": "An element that scrolls the select menu down when hovered.\nRenders a `
` element.", "props": { + "className": { + "type": "string | (state) => string", + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state." + }, "keepMounted": { "type": "boolean", "default": "false", "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable." + }, + "render": { + "type": "React.ReactElement | (props, state) => React.ReactElement", + "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render." } }, "dataAttributes": { diff --git a/packages/react/src/menu/checkbox-item/MenuCheckboxItem.tsx b/packages/react/src/menu/checkbox-item/MenuCheckboxItem.tsx index 56ef1a0974..4daa70f132 100644 --- a/packages/react/src/menu/checkbox-item/MenuCheckboxItem.tsx +++ b/packages/react/src/menu/checkbox-item/MenuCheckboxItem.tsx @@ -281,6 +281,11 @@ MenuCheckboxItem.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to close the menu when the item is clicked. * @default false @@ -314,6 +319,13 @@ MenuCheckboxItem.propTypes /* remove-proptypes */ = { * The click handler for the menu item. */ onClick: PropTypes.func, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { MenuCheckboxItem }; diff --git a/packages/react/src/menu/item/MenuItem.tsx b/packages/react/src/menu/item/MenuItem.tsx index 941ae79c88..001c9994e4 100644 --- a/packages/react/src/menu/item/MenuItem.tsx +++ b/packages/react/src/menu/item/MenuItem.tsx @@ -232,6 +232,11 @@ MenuItem.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to close the menu when the item is clicked. * @@ -255,6 +260,13 @@ MenuItem.propTypes /* remove-proptypes */ = { * The click handler for the menu item. */ onClick: PropTypes.func, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { MenuItem }; diff --git a/packages/react/src/menu/radio-item/MenuRadioItem.tsx b/packages/react/src/menu/radio-item/MenuRadioItem.tsx index 96bbd6d9c6..26a0dc98b6 100644 --- a/packages/react/src/menu/radio-item/MenuRadioItem.tsx +++ b/packages/react/src/menu/radio-item/MenuRadioItem.tsx @@ -275,6 +275,11 @@ MenuRadioItem.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to close the menu when the item is clicked. * @default false @@ -297,6 +302,13 @@ MenuRadioItem.propTypes /* remove-proptypes */ = { * The click handler for the menu item. */ onClick: PropTypes.func, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * Value of the radio item. * This is the value that will be set in the MenuRadioGroup when the item is selected. diff --git a/packages/react/src/select/item-text/SelectItemText.tsx b/packages/react/src/select/item-text/SelectItemText.tsx index fd1864aac4..cf19f33e88 100644 --- a/packages/react/src/select/item-text/SelectItemText.tsx +++ b/packages/react/src/select/item-text/SelectItemText.tsx @@ -139,6 +139,18 @@ SelectItemText.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { SelectItemText }; diff --git a/packages/react/src/select/item/SelectItem.tsx b/packages/react/src/select/item/SelectItem.tsx index d9365f9c7d..47f29d739a 100644 --- a/packages/react/src/select/item/SelectItem.tsx +++ b/packages/react/src/select/item/SelectItem.tsx @@ -321,6 +321,11 @@ SelectItem.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether the component should ignore user interaction. * @default false @@ -331,6 +336,13 @@ SelectItem.propTypes /* remove-proptypes */ = { * and when the item is matched during keyboard text navigation. */ label: PropTypes.string, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * A unique value that identifies this select item. * @default null diff --git a/packages/react/src/select/scroll-down-arrow/SelectScrollDownArrow.tsx b/packages/react/src/select/scroll-down-arrow/SelectScrollDownArrow.tsx index 8924cc69b2..6bd2358bf7 100644 --- a/packages/react/src/select/scroll-down-arrow/SelectScrollDownArrow.tsx +++ b/packages/react/src/select/scroll-down-arrow/SelectScrollDownArrow.tsx @@ -37,11 +37,23 @@ SelectScrollDownArrow.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to keep the HTML element in the DOM while the select menu is not scrollable. * @default false */ keepMounted: PropTypes.bool, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { SelectScrollDownArrow }; diff --git a/packages/react/src/select/scroll-up-arrow/SelectScrollUpArrow.tsx b/packages/react/src/select/scroll-up-arrow/SelectScrollUpArrow.tsx index e9190ae4da..2e5dc873e9 100644 --- a/packages/react/src/select/scroll-up-arrow/SelectScrollUpArrow.tsx +++ b/packages/react/src/select/scroll-up-arrow/SelectScrollUpArrow.tsx @@ -37,11 +37,23 @@ SelectScrollUpArrow.propTypes /* remove-proptypes */ = { * @ignore */ children: PropTypes.node, + /** + * CSS class applied to the element, or a function that + * returns a class based on the component’s state. + */ + className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** * Whether to keep the HTML element in the DOM while the select menu is not scrollable. * @default false */ keepMounted: PropTypes.bool, + /** + * Allows you to replace the component’s HTML element + * with a different tag, or compose it with another component. + * + * Accepts a `ReactElement` or a function that returns the element to render. + */ + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { SelectScrollUpArrow }; diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index e691d819b4..4a7f6b2f17 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -71,7 +71,6 @@ async function generateProptypes(project: TypeScriptProject, sourceFile: string) const sourceContent = await fse.readFile(sourceFile, 'utf8'); const isTsFile = /(\.(ts|tsx))/.test(sourceFile); - const propsFile = sourceFile.replace(/(\.d\.ts|\.tsx|\.ts)/g, '.types.ts'); const result = injectPropTypesInFile({ components, @@ -117,7 +116,7 @@ async function generateProptypes(project: TypeScriptProject, sourceFile: string) return generated; }, shouldInclude: ({ prop }) => { - if (prop.name === 'children') { + if (prop.name === 'children' || prop.name === 'className' || prop.name === 'render') { return true; } let shouldDocument; @@ -125,8 +124,7 @@ async function generateProptypes(project: TypeScriptProject, sourceFile: string) prop.filenames.forEach((filename) => { const isExternal = filename !== sourceFile; - const implementedBySelfPropsFile = filename === propsFile; - if (!isExternal || implementedBySelfPropsFile) { + if (!isExternal) { shouldDocument = true; } });