Removed propsTable in component docs (#2242)

iTwin · Sep 17, 2024 · b243bd2 · b243bd2
1 parent b472a61
commit b243bd2
Show file tree

Hide file tree

Showing 46 changed files with 58 additions and 104 deletions.
diff --git a/apps/website/src/content/docs/alert.mdx b/apps/website/src/content/docs/alert.mdx
@@ -1,7 +1,6 @@
 ---
 title: Alert
 description: A small box to quickly grab the user's attention and communicate a brief message.
-propsPath: '@itwin/itwinui-react/esm/core/Alert/Alert.d.ts'
 thumbnail: Alert
 ---
 
@@ -79,4 +78,4 @@ It is up to the development team wether or not the sticky alert should push the
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Alert/Alert.d.ts' />
diff --git a/apps/website/src/content/docs/avatar.mdx b/apps/website/src/content/docs/avatar.mdx
@@ -86,8 +86,8 @@ The example below displays a tooltip of all hidden avatars. It also uses the pro
 
 ### Avatar
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/Avatar/Avatar.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Avatar/Avatar.d.ts' />
 
 ### AvatarGroup
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/AvatarGroup/AvatarGroup.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/AvatarGroup/AvatarGroup.d.ts' />
diff --git a/apps/website/src/content/docs/badge.mdx b/apps/website/src/content/docs/badge.mdx
@@ -1,7 +1,6 @@
 ---
 title: Badge
 description: Badges are easily scannable visual identifiers that help categorize items of a same nature on a page.
-propsPath: '@itwin/itwinui-react/esm/core/Badge/Badge.d.ts'
 thumbnail: Badge
 ---
 
@@ -55,4 +54,4 @@ Badges cannot be edited, added or removed by the user. They are entirely managed
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Badge/Badge.d.ts' />
diff --git a/apps/website/src/content/docs/blockquote.mdx b/apps/website/src/content/docs/blockquote.mdx
@@ -1,7 +1,6 @@
 ---
 title: Blockquote
 description: Indicates the quotation of a large selection of text from another source.
-propsPath: '@itwin/itwinui-react/esm/core/Typography/Blockquote.d.ts'
 thumbnail: Blockquote
 ---
 
@@ -23,4 +22,4 @@ If the citation was pulled from a website, you can provide the URL using the 'ci
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Typography/Blockquote.d.ts' />
diff --git a/apps/website/src/content/docs/breadcrumbs.mdx b/apps/website/src/content/docs/breadcrumbs.mdx
@@ -1,7 +1,6 @@
 ---
 title: Breadcrumbs
 description: Navigate a folder hierarchy quickly with a table and breadcrumbs.
-propsPath: '@itwin/itwinui-react/esm/core/Breadcrumbs/Breadcrumbs.d.ts'
 thumbnail: Breadcrumbs
 ---
 
@@ -68,6 +67,6 @@ The property `overflowButton` allows you to show a custom button when truncation
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Breadcrumbs/Breadcrumbs.d.ts' />
 
 ## Related resources
diff --git a/apps/website/src/content/docs/button.mdx b/apps/website/src/content/docs/button.mdx
@@ -1,11 +1,6 @@
 ---
 title: Button
 description: Buttons allow users to take actions and make choices with a single tap or click.
-propsPathDefault: '@itwin/itwinui-react/esm/core/Buttons/Button.d.ts'
-propsPathSplitButton: '@itwin/itwinui-react/esm/core/Buttons/SplitButton.d.ts'
-propsPathIconButton: '@itwin/itwinui-react/esm/core/Buttons/IconButton.d.ts'
-propsPathIdeasButton: '@itwin/itwinui-react/esm/core/Buttons/IdeasButton.d.ts'
-propsPathDropdownButton: '@itwin/itwinui-react/esm/core/Buttons/DropdownButton.d.ts'
 thumbnail: Button
 ---
 
@@ -75,7 +70,7 @@ This is useful in narrow containers and mobile views. Don't overuse this!
 
 ## Button props
 
-<PropsTable path={frontmatter.propsPathDefault} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Buttons/Button.d.ts' />
 
 ## SplitButton
 
@@ -87,7 +82,7 @@ Pressing the left side of this button will commit the action. Pressing the right
 
 ### Props
 
-<PropsTable path={frontmatter.propsPathSplitButton} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Buttons/SplitButton.d.ts' />
 
 ## DropdownButton
 
@@ -99,7 +94,7 @@ Pressing this button will always open a menu. Upon selecting an option from the
 
 ### Props
 
-<PropsTable path={frontmatter.propsPathDropdownButton} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Buttons/DropdownButton.d.ts' />
 
 ## IconButton
 
@@ -113,7 +108,7 @@ Make sure to provide a short `label` that describes the action the button will p
 
 ### Props
 
-<PropsTable path={frontmatter.propsPathIconButton} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Buttons/IconButton.d.ts' />
 
 ## IdeasButton
 
@@ -127,7 +122,7 @@ If the button does obscure anything important, we suggest adding empty space at
 
 ### Props
 
-<PropsTable path={frontmatter.propsPathIdeasButton} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Buttons/IdeasButton.d.ts' />
 
 ## Usage guidelines
 

diff --git a/apps/website/src/content/docs/buttongroup.mdx b/apps/website/src/content/docs/buttongroup.mdx
@@ -1,7 +1,6 @@
 ---
 title: ButtonGroup
 description: A button group is a set of buttons with similar functionality.
-propsPath: '@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.d.ts'
 thumbnail: ButtonGroup
 related:
   - button
@@ -33,6 +32,7 @@ The `ButtonGroup` should almost always be used with [`IconButton`](button#iconbu
   </IconButton>
 </ButtonGroup>
 ```
+
 ### Toolbar
 
 By default, the buttons are each considered to be separate tab stops. If you want to group them together in a single tab stop, you can enable the [toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) by specifying [`role="toolbar"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/roles/toolbar_role). This will add all required behaviors for the toolbar pattern, including arrow-key navigation and focus management.
@@ -80,4 +80,4 @@ You can combine [inputs](input) with buttons in a button group. Use this pattern
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.d.ts' />
diff --git a/apps/website/src/content/docs/checkbox.mdx b/apps/website/src/content/docs/checkbox.mdx
@@ -1,7 +1,6 @@
 ---
 title: Checkbox
 description: Allows the user to make one or more choices within a list of options.
-propsPath: '@itwin/itwinui-react/esm/core/Checkbox/Checkbox.d.ts'
 thumbnail: Checkbox
 ---
 
@@ -71,4 +70,4 @@ If you ever need to display the status or severity of a single checkbox, you can
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Checkbox/Checkbox.d.ts' />
diff --git a/apps/website/src/content/docs/colorpicker.mdx b/apps/website/src/content/docs/colorpicker.mdx
@@ -1,7 +1,6 @@
 ---
 title: Color picker
 description: A panel containing swatches for selecting colors.
-propsPath: '@itwin/itwinui-react/esm/core/ColorPicker/ColorPicker.d.ts'
 thumbnail: ColorPicker
 ---
 
@@ -39,7 +38,7 @@ The color code can be displayed in editable fields for precise color selection.
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ColorPicker/ColorPicker.d.ts' />
 
 ## Subcomponents
 
@@ -55,16 +54,16 @@ The color picker is extremely flexible; pieces can be used based on product requ
 
 `ColorInputPanel` shows input fields to enter precise color values in the specified format. It also allows switching between the specified formats using a swap button.
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/ColorPicker/ColorInputPanel.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ColorPicker/ColorInputPanel.d.ts' />
 
 ### Color Palette
 
 `ColorPalette` is used to show a group of `ColorSwatch` components.
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/ColorPicker/ColorPalette.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ColorPicker/ColorPalette.d.ts' />
 
 ### Color Swatch
 
 `ColorSwatch` is a component to display within a color palette.
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/ColorPicker/ColorSwatch.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ColorPicker/ColorSwatch.d.ts' />
diff --git a/apps/website/src/content/docs/combobox.mdx b/apps/website/src/content/docs/combobox.mdx
@@ -1,7 +1,6 @@
 ---
 title: ComboBox
 description: A dropdown list that allows users to type a value to filter the options.
-propsPath: '@itwin/itwinui-react/esm/core/ComboBox/ComboBox.d.ts'
 thumbnail: ComboBox
 related:
   - dropdownmenu
@@ -105,4 +104,4 @@ The property `itemRenderer` allows you to customize the combobox more specifical
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ComboBox/ComboBox.d.ts' />
diff --git a/apps/website/src/content/docs/datepicker.mdx b/apps/website/src/content/docs/datepicker.mdx
@@ -1,7 +1,6 @@
 ---
 title: Date picker
 description: Used for selecting dates on a calendar to set timeframes, deadlines, and more.
-propsPath: '@itwin/itwinui-react/esm/core/DatePicker/DatePicker.d.ts'
 thumbnail: DatePicker
 related:
   - table
@@ -85,4 +84,4 @@ You can set `applyBackground={false}` to make the `DatePicker` blend into its su
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/DatePicker/DatePicker.d.ts' />
diff --git a/apps/website/src/content/docs/dialog.mdx b/apps/website/src/content/docs/dialog.mdx
@@ -1,7 +1,6 @@
 ---
 title: Dialog
 description: Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
-propsPath: '@itwin/itwinui-react/esm/core/Modal/Modal.d.ts'
 thumbnail: Dialog
 ---
 
@@ -114,4 +113,4 @@ Dialogs can easily be misused or overused. Here are some alternative options to
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Modal/Modal.d.ts' />
diff --git a/apps/website/src/content/docs/dropdownmenu.mdx b/apps/website/src/content/docs/dropdownmenu.mdx
@@ -1,7 +1,6 @@
 ---
 title: Dropdown menu
 description: The dropdown menu displays a list of selectable choices and options.
-propsPath: '@itwin/itwinui-react/esm/core/DropdownMenu/DropdownMenu.d.ts'
 thumbnail: Menu
 related:
   - select
@@ -77,4 +76,4 @@ The menu can contain extra content, including both text and additional selectabl
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/DropdownMenu/DropdownMenu.d.ts' />
diff --git a/apps/website/src/content/docs/expandableblock.mdx b/apps/website/src/content/docs/expandableblock.mdx
@@ -1,7 +1,6 @@
 ---
 title: Expandable block
 description: A pattern for progressive disclosure of information.
-propsPath: '@itwin/itwinui-react/esm/core/ExpandableBlock/ExpandableBlock.d.ts'
 thumbnail: ExpandableBlock
 related:
   - table
@@ -111,4 +110,4 @@ Use a [hierarchy tree](tree) when:
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/ExpandableBlock/ExpandableBlock.d.ts' />
diff --git a/apps/website/src/content/docs/fieldset.mdx b/apps/website/src/content/docs/fieldset.mdx
@@ -1,7 +1,6 @@
 ---
 title: Fieldset
 description: A fieldset is a container grouping interactive components together.
-propsPath: '@itwin/itwinui-react/esm/core/Fieldset/Fieldset.d.ts'
 thumbnail: Fieldset
 ---
 
@@ -26,4 +25,4 @@ Fieldsets are flexible and can contain a wide variety of components.
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Fieldset/Fieldset.d.ts' />
diff --git a/apps/website/src/content/docs/fileupload.mdx b/apps/website/src/content/docs/fileupload.mdx
@@ -79,4 +79,4 @@ In some cases, there may be a table with no files uploaded yet. In a situation l
 
 ## Props
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/FileUpload/FileUpload.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/FileUpload/FileUpload.d.ts' />
diff --git a/apps/website/src/content/docs/flex.mdx b/apps/website/src/content/docs/flex.mdx
@@ -1,7 +1,6 @@
 ---
 title: Flex
 description: A utility component to work with CSS flexbox and iTwinUI design tokens.
-propsPath: '@itwin/itwinui-react/esm/core/Flex/Flex.d.ts'
 thumbnail: #TODO
 group: utilities
 ---
@@ -18,4 +17,4 @@ A utility component that makes it easier to work with CSS flexbox and iTwinUI de
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Flex/Flex.d.ts' />
diff --git a/apps/website/src/content/docs/footer.mdx b/apps/website/src/content/docs/footer.mdx
@@ -1,7 +1,6 @@
 ---
 title: Footer
 description: Legally required links that stick to the bottom of entry pages.
-propsPath: '@itwin/itwinui-react/esm/core/Footer/Footer.d.ts'
 thumbnail: Footer
 ---
 
@@ -61,4 +60,4 @@ If you feel the need to add additional links, you may append links to the end of
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Footer/Footer.d.ts' />
diff --git a/apps/website/src/content/docs/header.mdx b/apps/website/src/content/docs/header.mdx
@@ -1,7 +1,6 @@
 ---
 title: Header
 description: Header sits at the top of a page and is part of a consistent user experience and navigation.
-propsPath: '@itwin/itwinui-react/esm/core/Header/Header.d.ts'
 thumbnail: Header
 ---
 
@@ -53,4 +52,4 @@ Without such a link, keyboard users will need to tab through the entire header e
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Header/Header.d.ts' />
diff --git a/apps/website/src/content/docs/informationpanel.mdx b/apps/website/src/content/docs/informationpanel.mdx
@@ -80,4 +80,4 @@ To make the panel appear from the bottom, `orientation='horizontal'` can be used
 
 ## Props
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/InformationPanel/InformationPanel.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/InformationPanel/InformationPanel.d.ts' />
diff --git a/apps/website/src/content/docs/input.mdx b/apps/website/src/content/docs/input.mdx
@@ -1,7 +1,6 @@
 ---
 title: Input
 description: An input lets users enter and edit data.
-propsPath: '@itwin/itwinui-react/esm/core/LabeledInput/LabeledInput.d.ts'
 thumbnail: Input
 related:
   - textarea
@@ -68,4 +67,4 @@ You may want to place the label somewhere separated from the input. This can be
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/LabeledInput/LabeledInput.d.ts' />
diff --git a/apps/website/src/content/docs/inputgroup.mdx b/apps/website/src/content/docs/inputgroup.mdx
@@ -1,7 +1,6 @@
 ---
 title: Input group
 description: Input let users enter and edit data.
-propsPath: '@itwin/itwinui-react/esm/core/InputGroup/InputGroup.d.ts'
 thumbnail: InputGroup
 ---
 
@@ -27,4 +26,4 @@ Multiple add-ons are supported and can be mixed with [checkbox](checkbox#with-in
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/InputGroup/InputGroup.d.ts' />
diff --git a/apps/website/src/content/docs/kbd.mdx b/apps/website/src/content/docs/kbd.mdx
@@ -46,4 +46,4 @@ List of supported keys:
 
 ## Props
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/Typography/Kbd.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/Typography/Kbd.d.ts' />
diff --git a/apps/website/src/content/docs/nonidealstate.mdx b/apps/website/src/content/docs/nonidealstate.mdx
@@ -1,7 +1,6 @@
 ---
 title: Non ideal state
 description: A full page error layout.
-propsPath: '@itwin/itwinui-react/esm/core/NonIdealState/NonIdealState.d.ts'
 thumbnail: NonIdealState
 ---
 
@@ -102,4 +101,4 @@ If the amount of redirection locations exceed 2, you may use an alternative desi
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path='@itwin/itwinui-react/esm/core/NonIdealState/NonIdealState.d.ts' />
diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
@@ -60,4 +60,4 @@ To give a higher importance to the notification, you can use the `pulsing` prop
 
 ## Props
 
-<PropsTable path={'@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'} />
+<PropsTable path='@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts' />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,4 +79,4 @@ In some cases, there may be a table with no files uploaded yet. In a situation l

		## Props

		<PropsTable path={'@itwin/itwinui-react/esm/core/FileUpload/FileUpload.d.ts'} />
		<PropsTable path='@itwin/itwinui-react/esm/core/FileUpload/FileUpload.d.ts' />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -80,4 +80,4 @@ To make the panel appear from the bottom, `orientation='horizontal'` can be used

		## Props

		<PropsTable path={'@itwin/itwinui-react/esm/core/InformationPanel/InformationPanel.d.ts'} />
		<PropsTable path='@itwin/itwinui-react/esm/core/InformationPanel/InformationPanel.d.ts' />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,4 +46,4 @@ List of supported keys:

		## Props

		<PropsTable path={'@itwin/itwinui-react/esm/core/Typography/Kbd.d.ts'} />
		<PropsTable path='@itwin/itwinui-react/esm/core/Typography/Kbd.d.ts' />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -60,4 +60,4 @@ To give a higher importance to the notification, you can use the `pulsing` prop

		## Props

		<PropsTable path={'@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'} />
		<PropsTable path='@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts' />