diff --git a/components/accordion.d.ts b/components/accordion.d.ts index f7bee6027f..ebe0f0563f 100644 --- a/components/accordion.d.ts +++ b/components/accordion.d.ts @@ -1,29 +1,27 @@ -declare module '@salesforce/design-system-react/components/accordion' { - import React from 'react'; - type Props = { - /** - * CSS class names to be added to the accordion component. _Tested with snapshot testing._ - */ - className?: any[] | Record | string; - /** - * HTML id for accordion component. _Tested with snapshot testing._ - */ - id?: number | string; - /** - * The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to ``. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._ - * - * Example: - * ``` - * - * - * - * - * - * ``` - */ - children: React.ReactNode /*.isRequired*/; - }; +import React from 'react'; +type Props = { + /** + * CSS class names to be added to the accordion component. _Tested with snapshot testing._ + */ + className?: any[] | Record | string; + /** + * HTML id for accordion component. _Tested with snapshot testing._ + */ + id?: number | string; + /** + * The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to ``. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._ + * + * Example: + * ``` + * + * + * + * + * + * ``` + */ + children: React.ReactNode /*.isRequired*/; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/accordion/panel.d.ts b/components/accordion/panel.d.ts index 09175dbdbf..c40a3eb65c 100644 --- a/components/accordion/panel.d.ts +++ b/components/accordion/panel.d.ts @@ -1,46 +1,44 @@ -declare module '@salesforce/design-system-react/components/accordion/panel' { - import React from 'react'; - type Props = { - /** - * The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to ``. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._ - */ - children?: React.ReactNode; - /** - * Indicates whether item is expanded or not, which should be handled by `onTogglePanel`. _Tested with Mocha framework and snapshot testing._ - */ - expanded: boolean /*.isRequired*/; - /** - * Id of the item belonging to this panel. _Tested with snapshot testing._ - */ - id: number | string /*.isRequired*/; - /** - * Component that can be passed as prop to ``. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. _Tested with Mocha framework._ - */ - panelContentActions?: React.ReactNode; - /** - * Callback that will run whenever there is a keydown on the panel button. Function doesn't change the state of the component. - */ - onKeyDownSummary?: (v: any) => any; - /** - * Callback that will run whenever a panel is toggled. Function should handle state to toggle `expanded` prop. _Tested with Mocha framework._ - */ - onTogglePanel: (v: any) => any /*.isRequired*/; - /** - * Ref callback that will pass in panel's `input` tag - */ - refs?: Partial<{ - summaryButton?: (v: any) => any; - }>; - /** - * Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. _Tested with snapshot testing._ - */ - summary: string | React.ReactNode /*.isRequired*/; - /** - * HTML title attribute. _Tested with snapshot testing._ - */ - title?: string; - }; +import React from 'react'; +type Props = { + /** + * The panel content for the Accordion component. Accordion panels should be added as . Event handler for the accordion panels should be added to ``. Optional `panelContentActions` component may be passed as prop. _Tested with Mocha framework and snapshot testing._ + */ + children?: React.ReactNode; + /** + * Indicates whether item is expanded or not, which should be handled by `onTogglePanel`. _Tested with Mocha framework and snapshot testing._ + */ + expanded: boolean /*.isRequired*/; + /** + * Id of the item belonging to this panel. _Tested with snapshot testing._ + */ + id: number | string /*.isRequired*/; + /** + * Component that can be passed as prop to ``. As an example, a menu dropdown could be used here to handle additional actions for each accordion panel. _Tested with Mocha framework._ + */ + panelContentActions?: React.ReactNode; + /** + * Callback that will run whenever there is a keydown on the panel button. Function doesn't change the state of the component. + */ + onKeyDownSummary?: (v: any) => any; + /** + * Callback that will run whenever a panel is toggled. Function should handle state to toggle `expanded` prop. _Tested with Mocha framework._ + */ + onTogglePanel: (v: any) => any /*.isRequired*/; + /** + * Ref callback that will pass in panel's `input` tag + */ + refs?: Partial<{ + summaryButton?: (v: any) => any; + }>; + /** + * Summary in the span element in the header of this panel. The summary is truncated and so the title element should contain the full text so that it is accessible on hover. _Tested with snapshot testing._ + */ + summary: string | React.ReactNode /*.isRequired*/; + /** + * HTML title attribute. _Tested with snapshot testing._ + */ + title?: string; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/alert.d.ts b/components/alert.d.ts index 4c1a99b7b1..9764c0b09e 100644 --- a/components/alert.d.ts +++ b/components/alert.d.ts @@ -1,67 +1,65 @@ -declare module '@salesforce/design-system-react/components/alert' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility** - * This object is merged with the default props object on every render. - * * `closeButton`: This is a visually hidden label for the close button. - * _Tested with snapshot testing._ - */ - assistiveText?: Partial<{ - closeButton?: string | React.ReactNode; - }>; - /** - * CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames). - * _Tested with snapshot testing._ - */ - className?: any[] | Record | string; - /** - * Allows user to click a close button. Banners should be dismissible only if they communicate future impact to the system, - * _Tested with snapshot testing._ - */ - dismissible?: boolean; - /** - * Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are: - * * info variant: `utility:info` - * * error variant: `utility:error` - * * offline variant: `utility:offline` - * * warning variant: `utility:warning` - * - * _Tested with snapshot testing._ - */ - icon?: React.ReactNode; - /** - * **Text labels for internationalization** - * This object is merged with the default props object on every render. - * * `heading`: text within heading tag - * * `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`. - * - * _Tested with snapshot testing._ - */ - labels?: Partial<{ - heading?: string | React.ReactNode; - headingLink?: string | React.ReactNode; - }>; - /** - * Triggered by link. _Tested with Mocha testing._ - */ - onClickHeadingLink?: (v: any) => any; - /** - * Triggered by close button. This is a controlled component. _Tested with Mocha testing._ - */ - onRequestClose?: (v: any) => any; - /** - * Custom styles to be passed to the component. _Tested with Mocha testing._ - */ - style?: Record; - /** - * The type of alert. _Tested with snapshot testing._ - */ - variant: 'error' | 'info' | 'offline' | 'warning' /*.isRequired*/; - }; +import React from 'react'; +type Props = { /** - * Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/). + * **Assistive text for accessibility** + * This object is merged with the default props object on every render. + * * `closeButton`: This is a visually hidden label for the close button. + * _Tested with snapshot testing._ */ - function Component(props: Props): JSX.Element; - export default Component; -} + assistiveText?: Partial<{ + closeButton?: string | React.ReactNode; + }>; + /** + * CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames). + * _Tested with snapshot testing._ + */ + className?: any[] | Record | string; + /** + * Allows user to click a close button. Banners should be dismissible only if they communicate future impact to the system, + * _Tested with snapshot testing._ + */ + dismissible?: boolean; + /** + * Icon of type `~/components/icon`. This icon will be cloned and additional props appended. The default icons are: + * * info variant: `utility:info` + * * error variant: `utility:error` + * * offline variant: `utility:offline` + * * warning variant: `utility:warning` + * + * _Tested with snapshot testing._ + */ + icon?: React.ReactNode; + /** + * **Text labels for internationalization** + * This object is merged with the default props object on every render. + * * `heading`: text within heading tag + * * `headingLink`: Text of link that triggers `onClickHeadingLink`. Inline links should pass a keyed array of React components into `labels.heading`. + * + * _Tested with snapshot testing._ + */ + labels?: Partial<{ + heading?: string | React.ReactNode; + headingLink?: string | React.ReactNode; + }>; + /** + * Triggered by link. _Tested with Mocha testing._ + */ + onClickHeadingLink?: (v: any) => any; + /** + * Triggered by close button. This is a controlled component. _Tested with Mocha testing._ + */ + onRequestClose?: (v: any) => any; + /** + * Custom styles to be passed to the component. _Tested with Mocha testing._ + */ + style?: Record; + /** + * The type of alert. _Tested with snapshot testing._ + */ + variant: 'error' | 'info' | 'offline' | 'warning' /*.isRequired*/; +}; +/** + * Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action. View [banner guidelines](https://www.lightningdesignsystem.com/guidelines/messaging/components/banners/). + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/alert/container.d.ts b/components/alert/container.d.ts index a1e0f084a0..2d2daa3b9b 100644 --- a/components/alert/container.d.ts +++ b/components/alert/container.d.ts @@ -1,18 +1,16 @@ -declare module '@salesforce/design-system-react/components/alert/container' { - import React from 'react'; - type Props = { - /** - * CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames). - */ - className?: any[] | Record | string; - /** - * Alert components - */ - children?: React.ReactNode; - }; +import React from 'react'; +type Props = { /** - * A fixed container for alert banners. + * CSS classes to be added to tag with `.slds-notify_alert`. Uses `classNames` [API](https://github.com/JedWatson/classnames). */ - function Component(props: Props): JSX.Element; - export default Component; -} + className?: any[] | Record | string; + /** + * Alert components + */ + children?: React.ReactNode; +}; +/** + * A fixed container for alert banners. + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/app-launcher.d.ts b/components/app-launcher.d.ts index 8bc51ffe29..42d7a95eab 100644 --- a/components/app-launcher.d.ts +++ b/components/app-launcher.d.ts @@ -1,88 +1,86 @@ -declare module '@salesforce/design-system-react/components/app-launcher' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `trigger`: This is a visually hidden label for the app launcher icon. - */ - assistiveText?: Partial<{ - trigger?: string; - }>; - /** - * Boolean indicating if the appElement should be hidden. - */ - ariaHideApp?: boolean; - /** - * One or more ``s, each containing one or more ``s or ``s - */ - children: React.ReactNode /*.isRequired*/; - /** - * The app launcher id. If not provided, one will be generated for accessibility - */ - id?: string; - /** - * Control the open/close state of the App Launcher - */ - isOpen?: boolean; - /** - * CSS classes to be added to App Launcher Modal. - */ - modalClassName?: any[] | Record | string; - /** - * Button that exists in the upper right hand corner of the App Launcher modal - */ - modalHeaderButton?: React.ReactNode; - /** - * Allows longer application names without truncating them. - */ - noTruncate?: boolean; - /** - * Callback when the App Launcher Modal is closed - */ - onClose?: (v: any) => any; - /** - * Search bar for the Modal's header. Will typically be an instance of `design-system-react/input/search` - */ - search?: React.ReactNode; - /** - * Set the App Launcher's title text (for localization) - */ - title?: string; - /** - * This is typically the name of the cloud or application - */ - triggerName?: React.ReactNode; - /** - * Callback when the App Launcher icon is clicked - */ - triggerOnClick?: (v: any) => any; - }; +import React from 'react'; +type Props = { /** - * The App Launcher allows the user to quickly access all the apps and functionality with their organization. - * The App Launcher should generally only be used as a sub-component of the [Global Navigation Bar](/components/global-navigation-bar) - * - * USAGE EXAMPLE: - * ``` - * - * - * - * - * - * - * - * - * - * - * - * ``` - * - * By default, `Modal`, a child component of App Launcher, will add `aria-hidden=true` to the `body` tag, but this disables some assistive technologies. To prevent this you can add the following to your application with `#mount` being the root node of your application that you would like to hide from assistive technologies when the `Modal` is open. - * ``` - * import settings from 'design-system-react/components/settings'; - * settings.setAppElement('#mount'); - * ``` + * **Assistive text for accessibility.** + * This object is merged with the default props object on every render. + * * `trigger`: This is a visually hidden label for the app launcher icon. */ - function Component(props: Props): JSX.Element; - export default Component; -} + assistiveText?: Partial<{ + trigger?: string; + }>; + /** + * Boolean indicating if the appElement should be hidden. + */ + ariaHideApp?: boolean; + /** + * One or more ``s, each containing one or more ``s or ``s + */ + children: React.ReactNode /*.isRequired*/; + /** + * The app launcher id. If not provided, one will be generated for accessibility + */ + id?: string; + /** + * Control the open/close state of the App Launcher + */ + isOpen?: boolean; + /** + * CSS classes to be added to App Launcher Modal. + */ + modalClassName?: any[] | Record | string; + /** + * Button that exists in the upper right hand corner of the App Launcher modal + */ + modalHeaderButton?: React.ReactNode; + /** + * Allows longer application names without truncating them. + */ + noTruncate?: boolean; + /** + * Callback when the App Launcher Modal is closed + */ + onClose?: (v: any) => any; + /** + * Search bar for the Modal's header. Will typically be an instance of `design-system-react/input/search` + */ + search?: React.ReactNode; + /** + * Set the App Launcher's title text (for localization) + */ + title?: string; + /** + * This is typically the name of the cloud or application + */ + triggerName?: React.ReactNode; + /** + * Callback when the App Launcher icon is clicked + */ + triggerOnClick?: (v: any) => any; +}; +/** + * The App Launcher allows the user to quickly access all the apps and functionality with their organization. + * The App Launcher should generally only be used as a sub-component of the [Global Navigation Bar](/components/global-navigation-bar) + * + * USAGE EXAMPLE: + * ``` + * + * + * + * + * + * + * + * + * + * + * + * ``` + * + * By default, `Modal`, a child component of App Launcher, will add `aria-hidden=true` to the `body` tag, but this disables some assistive technologies. To prevent this you can add the following to your application with `#mount` being the root node of your application that you would like to hide from assistive technologies when the `Modal` is open. + * ``` + * import settings from 'design-system-react/components/settings'; + * settings.setAppElement('#mount'); + * ``` + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/app-launcher/expandable-section.d.ts b/components/app-launcher/expandable-section.d.ts index 2e1259cc2b..13572fecdd 100644 --- a/components/app-launcher/expandable-section.d.ts +++ b/components/app-launcher/expandable-section.d.ts @@ -1,46 +1,44 @@ -declare module '@salesforce/design-system-react/components/app-launcher/expandable-section' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * * `toggleSection`: Label for the icon that expands / collapses the section - */ - assistiveText?: Partial<{ - toggleSection?: string; - }>; - /** - * Contents of the section - */ - children?: React.ReactNode; - /** - * Class names to be added to the `slds-section` classed node - */ - className?: any[] | Record | string; - /** - * Unique identifier for the expandable section. The id is automatically generated if not provided - */ - id?: string; - /** - * Specifies whether the section is expanded or collapsed. If not provided, component will use its own state to manage this itself - */ - isOpen?: boolean; - /** - * Specifies whether the section can be expanded or collapsed. Defaults to `false` - */ - nonCollapsible?: boolean; - /** - * Callback for when the section is expanded or collapsed. Passes event object and data object with `isOpen` bool. - */ - onToggleOpen?: (v: any) => any; - /** - * The title for the section - */ - title: string /*.isRequired*/; - }; - /** - * App Launcher Sections allow users to categorize App Tiles & Links as well as toggle their display. It is a superset of components/expandable-section with content formatting. - * All Expandable Section props are compatible with props passed to this component. - */ - function Component(props: Props): JSX.Element; - export default Component; -} +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility.** + * * `toggleSection`: Label for the icon that expands / collapses the section + */ + assistiveText?: Partial<{ + toggleSection?: string; + }>; + /** + * Contents of the section + */ + children?: React.ReactNode; + /** + * Class names to be added to the `slds-section` classed node + */ + className?: any[] | Record | string; + /** + * Unique identifier for the expandable section. The id is automatically generated if not provided + */ + id?: string; + /** + * Specifies whether the section is expanded or collapsed. If not provided, component will use its own state to manage this itself + */ + isOpen?: boolean; + /** + * Specifies whether the section can be expanded or collapsed. Defaults to `false` + */ + nonCollapsible?: boolean; + /** + * Callback for when the section is expanded or collapsed. Passes event object and data object with `isOpen` bool. + */ + onToggleOpen?: (v: any) => any; + /** + * The title for the section + */ + title: string /*.isRequired*/; +}; +/** + * App Launcher Sections allow users to categorize App Tiles & Links as well as toggle their display. It is a superset of components/expandable-section with content formatting. + * All Expandable Section props are compatible with props passed to this component. + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/app-launcher/link.d.ts b/components/app-launcher/link.d.ts index 08832a580e..e141564147 100644 --- a/components/app-launcher/link.d.ts +++ b/components/app-launcher/link.d.ts @@ -1,34 +1,32 @@ -declare module '@salesforce/design-system-react/components/app-launcher/link' { - import React from 'react'; - type Props = { - /** - * Contents of the link - */ - children?: React.ReactNode; - /** - * Classes to be applied to the link - */ - className?: any[] | Record | string; - /** - * The `href` attribute of the link. If the `onClick` callback is specified this URL will be prevented from changing the browser's location. - */ - href?: string; - /** - * Callback for when the link is clicked. Passes back event and data object with href prop. Prevents click from changing browser's location if set. - */ - onClick?: (v: any) => any; - /** - * Text used to highlight content in link - */ - search?: string; - /** - * The title for the link. If not provided it will attempt to use child content if that content is a string. - */ - title?: string; - }; +import React from 'react'; +type Props = { /** - * App Launcher Link component creates simple links to be used in "All Items" sections + * Contents of the link */ - function Component(props: Props): JSX.Element; - export default Component; -} + children?: React.ReactNode; + /** + * Classes to be applied to the link + */ + className?: any[] | Record | string; + /** + * The `href` attribute of the link. If the `onClick` callback is specified this URL will be prevented from changing the browser's location. + */ + href?: string; + /** + * Callback for when the link is clicked. Passes back event and data object with href prop. Prevents click from changing browser's location if set. + */ + onClick?: (v: any) => any; + /** + * Text used to highlight content in link + */ + search?: string; + /** + * The title for the link. If not provided it will attempt to use child content if that content is a string. + */ + title?: string; +}; +/** + * App Launcher Link component creates simple links to be used in "All Items" sections + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/app-launcher/section.d.ts b/components/app-launcher/section.d.ts index bc9de254ef..bcd79aa777 100644 --- a/components/app-launcher/section.d.ts +++ b/components/app-launcher/section.d.ts @@ -1,44 +1,42 @@ -declare module '@salesforce/design-system-react/components/app-launcher/section' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `collapseSection`: The assistive text for the section collapse icons. - */ - - assistiveText?: Partial<{ - collapseSection?: string; - }>; - /** - * The title for this section of apps - */ +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility.** + * This object is merged with the default props object on every render. + * * `collapseSection`: The assistive text for the section collapse icons. + */ - title: string /*.isRequired*/; - /** - * Allows the user to show/hide the section - */ + assistiveText?: Partial<{ + collapseSection?: string; + }>; + /** + * The title for this section of apps + */ - toggleable?: boolean; - /** - * An array of applications to display - */ + title: string /*.isRequired*/; + /** + * Allows the user to show/hide the section + */ - children: React.ReactNode /*.isRequired*/; - /** - * Controls the open/closed state of the section - */ + toggleable?: boolean; + /** + * An array of applications to display + */ - isOpen?: boolean; - /** - * Callback for when section is toggled. Passes "isOpen" bool. Forces `toggleable` to true - */ + children: React.ReactNode /*.isRequired*/; + /** + * Controls the open/closed state of the section + */ - onToggleClick?: (v: any) => any; - }; + isOpen?: boolean; /** - * App Launcher Sections allow users to categorize App Tiles as well as toggle their display + * Callback for when section is toggled. Passes "isOpen" bool. Forces `toggleable` to true */ - function Component(props: Props): JSX.Element; - export default Component; -} + + onToggleClick?: (v: any) => any; +}; +/** + * App Launcher Sections allow users to categorize App Tiles as well as toggle their display + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/app-launcher/tile.d.ts b/components/app-launcher/tile.d.ts index 794a4bbfb9..123e4d519b 100644 --- a/components/app-launcher/tile.d.ts +++ b/components/app-launcher/tile.d.ts @@ -1,67 +1,65 @@ -declare module '@salesforce/design-system-react/components/app-launcher/tile' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * * `dragIconText`: Text that describes the purpose of the drag handle icon. - */ - assistiveText?: Partial<{ - dragIconText?: string; - }>; - /** - * Class names to be added to the tile. - */ - className?: any[] | Record | string; - /** - * The description of the app. Not visible on small tiles. - */ - description?: string; - /** - * Heading for app description. NOTE: this prop is DEPRECATED and use should be avoided - */ - descriptionHeading?: string; - /** - * The `href` attribute of the tile. Please pass in bookmarkable URLs from your routing library. If the `onClick` callback is specified this URL will be prevented from changing the browser's location. - */ - href?: string; - /** - * Background color to be used on the icon. Only applied if iconNode is undefined - */ - iconBackgroundColor?: string; - /** - * Icon node for app tile. Takes priority over `iconText` - */ - iconNode?: React.ReactNode; - /** - * Text to be used as an icon. Only renders if iconNode is undefined - */ - iconText?: string; - /** - * Open the More Tooltip - */ - isOpenTooltip?: boolean; - /** - * The localized text for the "More information" tooltip. - */ - moreLabel?: string; - /** - * Function that will be executed when clicking on a tile - */ - onClick?: (v: any) => any; - /** - * Text used to highlight content in app tiles - */ - search?: string; - /** - * App name for the tile's title. - */ - title: string /*.isRequired*/; - - // Future feature: add Highlighter to Truncate text (https://github.com/ShinyChang/React-Text-Truncate/issues/32) - }; +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility.** + * * `dragIconText`: Text that describes the purpose of the drag handle icon. + */ + assistiveText?: Partial<{ + dragIconText?: string; + }>; + /** + * Class names to be added to the tile. + */ + className?: any[] | Record | string; + /** + * The description of the app. Not visible on small tiles. + */ + description?: string; + /** + * Heading for app description. NOTE: this prop is DEPRECATED and use should be avoided + */ + descriptionHeading?: string; + /** + * The `href` attribute of the tile. Please pass in bookmarkable URLs from your routing library. If the `onClick` callback is specified this URL will be prevented from changing the browser's location. + */ + href?: string; + /** + * Background color to be used on the icon. Only applied if iconNode is undefined + */ + iconBackgroundColor?: string; /** - * App Launcher Tiles provide information and links to a user's apps + * Icon node for app tile. Takes priority over `iconText` */ - function Component(props: Props): JSX.Element; - export default Component; -} + iconNode?: React.ReactNode; + /** + * Text to be used as an icon. Only renders if iconNode is undefined + */ + iconText?: string; + /** + * Open the More Tooltip + */ + isOpenTooltip?: boolean; + /** + * The localized text for the "More information" tooltip. + */ + moreLabel?: string; + /** + * Function that will be executed when clicking on a tile + */ + onClick?: (v: any) => any; + /** + * Text used to highlight content in app tiles + */ + search?: string; + /** + * App name for the tile's title. + */ + title: string /*.isRequired*/; + + // Future feature: add Highlighter to Truncate text (https://github.com/ShinyChang/React-Text-Truncate/issues/32) +}; +/** + * App Launcher Tiles provide information and links to a user's apps + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/avatar.d.ts b/components/avatar.d.ts index 74eecb256f..db03ac0330 100644 --- a/components/avatar.d.ts +++ b/components/avatar.d.ts @@ -1,48 +1,47 @@ -declare module '@salesforce/design-system-react/components/avatar' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `icon`: Assistive text for accessibility that labels the icon. - */ - assistiveText?: Partial<{ - icon?: string; - }>; - /** - * Alt attribute to be applied to image (base case) element. - */ - imgAlt?: string; - /** - * Source attribute to be applied to image (base case) element. - */ - imgSrc?: string; - /** - * Initials attribute to optionally pass in initials directly in case of "initials" fallback case. - */ - initials?: string; - /** - * Avatar with initials that are dark text on light background - */ - inverse?: boolean; - /** - * Label attibute to display inside "initials" fallback case. Will be passed as title prop in `abbr` element to provide more specificity. - */ - label?: string; - /** - * Avatar variants to apply relevant styling (circle: user, square: entity) and icon rendering if applicable. - */ - variant: 'entity' | 'user' /*.isRequired*/; - /** - * Size of the icon in "icon" fallback case. - */ - size: 'x-small' | 'small' | 'medium' | 'large' /*.isRequired*/; - /** - * Title attribute for the avatar container. - */ - title?: string; - }; +import React from 'react'; +type Props = { /** + * **Assistive text for accessibility.** + * This object is merged with the default props object on every render. + * * `icon`: Assistive text for accessibility that labels the icon. + */ + assistiveText?: Partial<{ + icon?: string; + }>; + /** + * Alt attribute to be applied to image (base case) element. + */ + imgAlt?: string; + /** + * Source attribute to be applied to image (base case) element. + */ + imgSrc?: string; + /** + * Initials attribute to optionally pass in initials directly in case of "initials" fallback case. + */ + initials?: string; + /** + * Avatar with initials that are dark text on light background + */ + inverse?: boolean; + /** + * Label attibute to display inside "initials" fallback case. Will be passed as title prop in `abbr` element to provide more specificity. + */ + label?: string; + /** + * Avatar variants to apply relevant styling (circle: user, square: entity) and icon rendering if applicable. + */ + variant: 'entity' | 'user' /*.isRequired*/; + /** + * Size of the icon in "icon" fallback case. + */ + size: 'x-small' | 'small' | 'medium' | 'large' /*.isRequired*/; + /** + * Title attribute for the avatar container. + */ + title?: string; +}; +/** * The avatar component represents an object or entity. An image is the preferred format for an avatar. If the `imgSrc` prop is undefined, and if a `label` or `initials` prop is available, the fallback avatar will render with initials. If initals are passed in directly in the `initials` prop, this will render in the fallback avatar. If `initals` prop is unavailable but a `label` prop is available, the fallback avatar will render with built initials of the user name or entity name. @@ -51,6 +50,5 @@ declare module '@salesforce/design-system-react/components/avatar' { If `initials` or `label` are not available, the fallback avatar will render a standard icon. If `variant='user'`, a user icon will render. If `variant='entity'`, an account icon will render. */ - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/badge.d.ts b/components/badge.d.ts index 6ef29d027c..17cbfc6a99 100644 --- a/components/badge.d.ts +++ b/components/badge.d.ts @@ -1,39 +1,37 @@ -declare module '@salesforce/design-system-react/components/badge' { - import React from 'react'; - type Props = { - /** - * CSS classes that are applied to the component - */ - className?: any[] | Record | string; +import React from 'react'; +type Props = { + /** + * CSS classes that are applied to the component + */ + className?: any[] | Record | string; - /** - * Id of component, if desired. If not provided an id is automatically generated - */ - id?: string; + /** + * Id of component, if desired. If not provided an id is automatically generated + */ + id?: string; - /** - * Custom styles to be passed to the component - */ - style?: Record; + /** + * Custom styles to be passed to the component + */ + style?: Record; - /** - * Color variant for the badge component - */ - color?: 'default' | 'inverse' | 'light'; + /** + * Color variant for the badge component + */ + color?: 'default' | 'inverse' | 'light'; - /** - * Icon alignment for the badge component - */ - iconAlignment?: 'left' | 'right'; + /** + * Icon alignment for the badge component + */ + iconAlignment?: 'left' | 'right'; - /** - * Content to be placed inside the badge component - */ - content?: string | React.ReactNode; - }; /** - * Badges are labels which hold small amounts of information. + * Content to be placed inside the badge component */ - function Component(props: Props): JSX.Element; - export default Component; -} + content?: string | React.ReactNode; +}; +/** + * Badges are labels which hold small amounts of information. + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/brand-band.d.ts b/components/brand-band.d.ts index 48a4a1d096..86cfdcf0fa 100644 --- a/components/brand-band.d.ts +++ b/components/brand-band.d.ts @@ -1,43 +1,41 @@ -declare module '@salesforce/design-system-react/components/brand-band' { - import React from 'react'; - type Props = { - /** - * Primary application grid layout or a white background component such as a `Card` should be passed into this component. - */ - children?: React.ReactNode; +import React from 'react'; +type Props = { + /** + * Primary application grid layout or a white background component such as a `Card` should be passed into this component. + */ + children?: React.ReactNode; - /** - * CSS classes that are applied to the component - */ - className?: any[] | Record | string; + /** + * CSS classes that are applied to the component + */ + className?: any[] | Record | string; - /** - * Id of component, if desired. If not provided an id is automatically generated - */ - id?: string; + /** + * Id of component, if desired. If not provided an id is automatically generated + */ + id?: string; - /** - * Image of the brand band - */ - image?: 'default' | 'none' | 'user' | 'group'; + /** + * Image of the brand band + */ + image?: 'default' | 'none' | 'user' | 'group'; - /** - * Background size of the brand band. Default is 'contain' - */ - backgroundSize?: 'contain' | 'cover'; - /** - * Size of the brand band. Default is 'medium' - */ - size?: 'small' | 'medium' | 'large'; + /** + * Background size of the brand band. Default is 'contain' + */ + backgroundSize?: 'contain' | 'cover'; + /** + * Size of the brand band. Default is 'medium' + */ + size?: 'small' | 'medium' | 'large'; - /** - * Custom styles to be passed to the component - */ - style?: Record; - }; /** - * The brand band provides theming capability that adds personality and improves information density and contrast. + * Custom styles to be passed to the component */ - function Component(props: Props): JSX.Element; - export default Component; -} + style?: Record; +}; +/** + * The brand band provides theming capability that adds personality and improves information density and contrast. + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/breadcrumb.d.ts b/components/breadcrumb.d.ts index a0ff795b0f..b6b6076d77 100644 --- a/components/breadcrumb.d.ts +++ b/components/breadcrumb.d.ts @@ -1,32 +1,30 @@ -declare module '@salesforce/design-system-react/components/breadcrumb' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `label`: The assistive text for the breadcrumb trail. - */ - assistiveText?: Partial<{ - label?: string; - }>; - /** - * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button. - */ - id?: string; - /** - * Overflow menu of the type [Dropdown](/components/menu-dropdowns) - */ - overflowDropdownMenu?: React.ReactNode; - /** - * Custom styles to be passed to the containing `nav` tag - */ - styleContainer?: Record; - /** - * An array of anchor elements that define the path to the current record. - */ - trail: any[] /*.isRequired*/; - }; +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility.** + * This object is merged with the default props object on every render. + * * `label`: The assistive text for the breadcrumb trail. + */ + assistiveText?: Partial<{ + label?: string; + }>; + /** + * A unique ID is needed in order to support keyboard navigation, ARIA support, and connect the dropdown to the triggering button. + */ + id?: string; + /** + * Overflow menu of the type [Dropdown](/components/menu-dropdowns) + */ + overflowDropdownMenu?: React.ReactNode; + /** + * Custom styles to be passed to the containing `nav` tag + */ + styleContainer?: Record; + /** + * An array of anchor elements that define the path to the current record. + */ + trail: any[] /*.isRequired*/; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header.d.ts b/components/builder-header.d.ts index 037b3bc53b..3b01f6baea 100644 --- a/components/builder-header.d.ts +++ b/components/builder-header.d.ts @@ -1,81 +1,79 @@ -declare module '@salesforce/design-system-react/components/builder-header' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility** - * This object is merged with the default props object on every render. - * * `backIcon`: Used for the back icon. - * * `helpIcon`: Used for the help icon. - * * `icon`: Used for the main icon next to the header title. - * * _Tested with snapshot testing._ - */ - assistiveText?: Partial<{ - backIcon?: string; - helpIcon?: string; - icon?: string; - }>; - /** - * Provide children of the types ``, ``, or `` to define the structure of the header. - * ``` - * - * - * - * - * - * ``` - */ - children?: React.ReactNode; - /** - * CSS classes to be added to tag with `.slds-builder-header_container`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._ - */ - className?: any[] | Record | string; - /** - * Event Callbacks - * * `onClickBack`: Called when the Back link is clicked. - * * `onClickHelp`: Called when the Help link is clicked. - * _Tested with Mocha testing._ - */ - events?: Partial<{ - onClickBack?: (v: any) => any; - onClickHelp?: (v: any) => any; - }>; - /** - * Category of the title icon from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/) - */ - iconCategory?: string; - /** - * CSS classes that are applied to the title icon. - */ - iconClassName?: any[] | Record | string; - /** - * Name of the title icon. Visit Lightning Design System Icons to reference icon names. - */ - iconName?: string; - /** - * Path to the title icon. This will override any global icon settings. - */ - iconPath?: string; - /** - * **Text labels for internationalization** - * This object is merged with the default props object on every render. - * * `back`: The label for the Back link. - * * `help`: The label for the Help link. - * * `pageType`: The label that describes the page type. - * * `title`: The label for the page title. - * _Tested with snapshot testing._ - */ - labels?: Partial<{ - back?: string; - help?: string; - pageType?: string; - title?: string; - }>; - /** - * Custom styles applied to the `.slds-builder-header_container` element. - */ - style?: Record; - }; +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility** + * This object is merged with the default props object on every render. + * * `backIcon`: Used for the back icon. + * * `helpIcon`: Used for the help icon. + * * `icon`: Used for the main icon next to the header title. + * * _Tested with snapshot testing._ + */ + assistiveText?: Partial<{ + backIcon?: string; + helpIcon?: string; + icon?: string; + }>; + /** + * Provide children of the types ``, ``, or `` to define the structure of the header. + * ``` + * + * + * + * + * + * ``` + */ + children?: React.ReactNode; + /** + * CSS classes to be added to tag with `.slds-builder-header_container`. Uses `classNames` [API](https://github.com/JedWatson/classnames). _Tested with snapshot testing._ + */ + className?: any[] | Record | string; + /** + * Event Callbacks + * * `onClickBack`: Called when the Back link is clicked. + * * `onClickHelp`: Called when the Help link is clicked. + * _Tested with Mocha testing._ + */ + events?: Partial<{ + onClickBack?: (v: any) => any; + onClickHelp?: (v: any) => any; + }>; + /** + * Category of the title icon from [lightningdesignsystem.com/icons/](https://www.lightningdesignsystem.com/icons/) + */ + iconCategory?: string; + /** + * CSS classes that are applied to the title icon. + */ + iconClassName?: any[] | Record | string; + /** + * Name of the title icon. Visit Lightning Design System Icons to reference icon names. + */ + iconName?: string; + /** + * Path to the title icon. This will override any global icon settings. + */ + iconPath?: string; + /** + * **Text labels for internationalization** + * This object is merged with the default props object on every render. + * * `back`: The label for the Back link. + * * `help`: The label for the Help link. + * * `pageType`: The label that describes the page type. + * * `title`: The label for the page title. + * _Tested with snapshot testing._ + */ + labels?: Partial<{ + back?: string; + help?: string; + pageType?: string; + title?: string; + }>; + /** + * Custom styles applied to the `.slds-builder-header_container` element. + */ + style?: Record; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header/misc.d.ts b/components/builder-header/misc.d.ts index b468fd0de7..3a4a4ab061 100644 --- a/components/builder-header/misc.d.ts +++ b/components/builder-header/misc.d.ts @@ -1,19 +1,17 @@ -declare module '@salesforce/design-system-react/components/builder-header/misc' { - import React from 'react'; - type Props = { - /** - * Provide custom content in place of Page Type label - * ``` - * - * - * Custom content - * - * - * ``` - */ - children?: React.ReactNode; - }; +import React from 'react'; +type Props = { + /** + * Provide custom content in place of Page Type label + * ``` + * + * + * Custom content + * + * + * ``` + */ + children?: React.ReactNode; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header/nav-link.d.ts b/components/builder-header/nav-link.d.ts index 065fef9869..beac351480 100644 --- a/components/builder-header/nav-link.d.ts +++ b/components/builder-header/nav-link.d.ts @@ -1,37 +1,35 @@ -declare module '@salesforce/design-system-react/components/builder-header/nav-link' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility** - * This object is merged with the default props object on every render. - * * `icon`: Used for the icon next to the link text. - * * _Tested with snapshot testing._ - */ - assistiveText?: Partial<{ - icon?: string; - }>; - /** - * Name of the icon category. Visit Lightning Design System Icons to reference icon categories. - */ - iconCategory?: 'action' | 'custom' | 'doctype' | 'standard' | 'utility'; - /** - * Name of the icon. Visit Lightning Design System Icons to reference icon names. - */ - iconName?: string; - /** - * Path to the icon. This will override any global icon settings. - */ - iconPath?: string; - /** - * Text for the link. - */ - label?: string; - /** - * Triggered when the link is clicked. - */ - onClick?: (v: any) => any; - }; +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility** + * This object is merged with the default props object on every render. + * * `icon`: Used for the icon next to the link text. + * * _Tested with snapshot testing._ + */ + assistiveText?: Partial<{ + icon?: string; + }>; + /** + * Name of the icon category. Visit Lightning Design System Icons to reference icon categories. + */ + iconCategory?: 'action' | 'custom' | 'doctype' | 'standard' | 'utility'; + /** + * Name of the icon. Visit Lightning Design System Icons to reference icon names. + */ + iconName?: string; + /** + * Path to the icon. This will override any global icon settings. + */ + iconPath?: string; + /** + * Text for the link. + */ + label?: string; + /** + * Triggered when the link is clicked. + */ + onClick?: (v: any) => any; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header/nav.d.ts b/components/builder-header/nav.d.ts index d1c0c19257..6fbae8786a 100644 --- a/components/builder-header/nav.d.ts +++ b/components/builder-header/nav.d.ts @@ -1,20 +1,18 @@ -declare module '@salesforce/design-system-react/components/builder-header/nav' { - import React from 'react'; - type Props = { - /** - * Provide children of the types `` or `` to define the structure of the navigation section. - * ``` - * - * - * - * - * - * - * ``` - */ - children?: React.ReactNode; - }; +import React from 'react'; +type Props = { + /** + * Provide children of the types `` or `` to define the structure of the navigation section. + * ``` + * + * + * + * + * + * + * ``` + */ + children?: React.ReactNode; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header/toolbar.d.ts b/components/builder-header/toolbar.d.ts index bb679efbf0..b58d2e477a 100644 --- a/components/builder-header/toolbar.d.ts +++ b/components/builder-header/toolbar.d.ts @@ -1,33 +1,31 @@ -declare module '@salesforce/design-system-react/components/builder-header/toolbar' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility** - * This object is merged with the default props object on every render. - * * `actions`: Used for the aria-label for the actions section of the toolbar. - * * _Tested with snapshot testing._ - */ - assistiveText?: Partial<{ - actions?: string; - }>; - /** - * Provide children of the type `` to define the structure of the toolbar section. - * ``` - * - * - * - * - * - * - * ``` - */ - children?: React.ReactNode; - /** - * Renders the actions section of the header. - */ - onRenderActions?: (v: any) => any; - }; +import React from 'react'; +type Props = { + /** + * **Assistive text for accessibility** + * This object is merged with the default props object on every render. + * * `actions`: Used for the aria-label for the actions section of the toolbar. + * * _Tested with snapshot testing._ + */ + assistiveText?: Partial<{ + actions?: string; + }>; + /** + * Provide children of the type `` to define the structure of the toolbar section. + * ``` + * + * + * + * + * + * + * ``` + */ + children?: React.ReactNode; + /** + * Renders the actions section of the header. + */ + onRenderActions?: (v: any) => any; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/builder-header/utilities.d.ts b/components/builder-header/utilities.d.ts index f1c5798b74..9b72275111 100644 --- a/components/builder-header/utilities.d.ts +++ b/components/builder-header/utilities.d.ts @@ -1,6 +1,5 @@ -declare module '@salesforce/design-system-react/components/builder-header/utilities' { - import React from 'react'; - type Props = { +import React from 'react'; +type Props = { /** * Provide children of the types `` or `` to define the structure of the utilities section. * ``` @@ -13,8 +12,7 @@ declare module '@salesforce/design-system-react/components/builder-header/utilit * ``` */ children?: React.ReactNode, - }; +}; - function Component(props: Props): JSX.Element; - export default Component; -} +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/button-group.d.ts b/components/button-group.d.ts index 1937ea7800..f8fc629c94 100644 --- a/components/button-group.d.ts +++ b/components/button-group.d.ts @@ -1,40 +1,38 @@ -declare module '@salesforce/design-system-react/components/button-group' { - import React from 'react'; - type Props = { - /** - * Children are expected to be components. If last button triggers a dropdown menu, use Dropdown instead of Button. _Tested with snapshot testing._ - */ - children: React.ReactNode /*.isRequired*/; - /** - * CSS classes added to `slds-button-group` or `slds-checkbox_button-group` tag - */ - className?: any[] | Record | string; - /** - * If the `labels.label` prop is set, a `.slds-form-element` classed fieldset element is added as a container. This prop applies classes to that element - */ - classNameContainer?: any[] | Record | string; - /** - * HTML id for component. - */ - id?: string; - /** - * **Text labels for internationalization** - * This object is merged with the default props object on every render. - * * `error`: Message to display when any of Checkboxes are in an error state. _Tested with snapshot testing._ - * * `label`: This label appears above the button group. _Tested with snapshot testing._ - */ - labels?: Partial<{ - error?: string; - label?: string; - }>; - /** - * Use checkbox variant for "Checkbox Button Group" styling and add Checkbox components as children _Tested with snapshot testing._ - */ - variant?: 'checkbox' | 'list'; - }; +import React from 'react'; +type Props = { /** - * The ButtonGroup component wraps other components (ie. Button, MenuDropdown, PopoverTooltip, Checkboxes, etc). + * Children are expected to be components. If last button triggers a dropdown menu, use Dropdown instead of Button. _Tested with snapshot testing._ */ - function Component(props: Props): JSX.Element; - export default Component; -} + children: React.ReactNode /*.isRequired*/; + /** + * CSS classes added to `slds-button-group` or `slds-checkbox_button-group` tag + */ + className?: any[] | Record | string; + /** + * If the `labels.label` prop is set, a `.slds-form-element` classed fieldset element is added as a container. This prop applies classes to that element + */ + classNameContainer?: any[] | Record | string; + /** + * HTML id for component. + */ + id?: string; + /** + * **Text labels for internationalization** + * This object is merged with the default props object on every render. + * * `error`: Message to display when any of Checkboxes are in an error state. _Tested with snapshot testing._ + * * `label`: This label appears above the button group. _Tested with snapshot testing._ + */ + labels?: Partial<{ + error?: string; + label?: string; + }>; + /** + * Use checkbox variant for "Checkbox Button Group" styling and add Checkbox components as children _Tested with snapshot testing._ + */ + variant?: 'checkbox' | 'list'; +}; +/** + * The ButtonGroup component wraps other components (ie. Button, MenuDropdown, PopoverTooltip, Checkboxes, etc). + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/button-stateful.d.ts b/components/button-stateful.d.ts index 35f6cedec9..5a0c8cae7e 100644 --- a/components/button-stateful.d.ts +++ b/components/button-stateful.d.ts @@ -1,96 +1,94 @@ -declare module '@salesforce/design-system-react/components/button-stateful' { - import React from 'react'; - type Props = { - /** - * Specifies the current state of the button. If set, the button will act as a ['controlled' component](https://facebook.github.io/react/docs/forms.html#controlled-components). - */ - active?: boolean; - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. This should also include the state of the button. If the button has an icon and a visible label, you can omit the icon prop and use the label prop. - */ - assistiveText?: Partial<{ - icon?: string; - }>; - /** - * Disables the button and adds disabled styling. - */ - disabled?: boolean; - /** - * Icon associated with the stateful button. Accepts an `Icon` component - */ - icon?: React.ReactNode; - /** - * Triggered when focus is removed. - */ - onBlur?: (v: any) => any; - /** - * Triggered when the button is clicked. - */ - onClick?: (v: any) => any; - /** - * Triggered when component is focused. - */ - onFocus?: (v: any) => any; - /** - * Triggered when a key is pressed down - */ - onKeyDown?: (v: any) => any; - /** - * Triggered when a key is pressed and released - */ - onKeyPress?: (v: any) => any; - /** - * Triggered when a key is released - */ - onKeyUp?: (v: any) => any; - /** - * Triggered when a mouse button is pressed down - */ - onMouseDown?: (v: any) => any; - /** - * Triggered when a mouse arrow hovers - */ - onMouseEnter?: (v: any) => any; - /** - * If true, button scales to 100% width on small form factors. - */ - responsive?: boolean; - /** - * Initial label and icon (optional) of button. - */ - stateOne?: Record; - /** - * Selected label and icon (optional) of button. - */ - stateTwo?: Record; - /** - * Deselect label and icon (optional) of button. - */ - stateThree?: Record; - /** - * Write "-1" if you don't want the user to tab to the button. - */ - tabIndex?: string; - /** - * Different types of buttons - */ - variant?: - | 'base' - | 'neutral' - | 'brand' - | 'destructive' - | 'icon' - | 'icon-filled'; - }; - /** - * The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected. - * For icon buttons, use variant='icon'. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}). - * Although not listed in the prop table, all `aria-*` props will be added to the button element if passed in. - * If no `aria-*` props are passed in, aria-live='polite' is used for `icon` and `icon-filled` variants, - * and aria-live='assertive' is used for the remaining variants. - */ - function Component(props: Props): JSX.Element; - export default Component; -} +import React from 'react'; +type Props = { + /** + * Specifies the current state of the button. If set, the button will act as a ['controlled' component](https://facebook.github.io/react/docs/forms.html#controlled-components). + */ + active?: boolean; + /** + * **Assistive text for accessibility.** + * This object is merged with the default props object on every render. + * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. This should also include the state of the button. If the button has an icon and a visible label, you can omit the icon prop and use the label prop. + */ + assistiveText?: Partial<{ + icon?: string; + }>; + /** + * Disables the button and adds disabled styling. + */ + disabled?: boolean; + /** + * Icon associated with the stateful button. Accepts an `Icon` component + */ + icon?: React.ReactNode; + /** + * Triggered when focus is removed. + */ + onBlur?: (v: any) => any; + /** + * Triggered when the button is clicked. + */ + onClick?: (v: any) => any; + /** + * Triggered when component is focused. + */ + onFocus?: (v: any) => any; + /** + * Triggered when a key is pressed down + */ + onKeyDown?: (v: any) => any; + /** + * Triggered when a key is pressed and released + */ + onKeyPress?: (v: any) => any; + /** + * Triggered when a key is released + */ + onKeyUp?: (v: any) => any; + /** + * Triggered when a mouse button is pressed down + */ + onMouseDown?: (v: any) => any; + /** + * Triggered when a mouse arrow hovers + */ + onMouseEnter?: (v: any) => any; + /** + * If true, button scales to 100% width on small form factors. + */ + responsive?: boolean; + /** + * Initial label and icon (optional) of button. + */ + stateOne?: Record; + /** + * Selected label and icon (optional) of button. + */ + stateTwo?: Record; + /** + * Deselect label and icon (optional) of button. + */ + stateThree?: Record; + /** + * Write "-1" if you don't want the user to tab to the button. + */ + tabIndex?: string; + /** + * Different types of buttons + */ + variant?: + | 'base' + | 'neutral' + | 'brand' + | 'destructive' + | 'icon' + | 'icon-filled'; +}; +/** + * The ButtonStateful component is a variant of the Lightning Design System Button component. It is used for buttons that have a state of unselected or selected. + * For icon buttons, use variant='icon'. For buttons with labels or buttons with labels and icons, pass data to the state props (ie. stateOne={{iconName: 'add', label: 'Join'}}). + * Although not listed in the prop table, all `aria-*` props will be added to the button element if passed in. + * If no `aria-*` props are passed in, aria-live='polite' is used for `icon` and `icon-filled` variants, + * and aria-live='assertive' is used for the remaining variants. + */ +declare function Component(props: Props): React.JSX.Element; +export default Component; diff --git a/components/button.d.ts b/components/button.d.ts index b2821ba626..363e3fb85f 100644 --- a/components/button.d.ts +++ b/components/button.d.ts @@ -1,163 +1,161 @@ -declare module '@salesforce/design-system-react/components/button' { - import React from 'react'; - type Props = { - /** - * **Assistive text for accessibility.** - * This object is merged with the default props object on every render. - * * `icon`: Text that is visually hidden but read aloud by screenreaders to tell the user what the icon means. If the button has an icon and a visible label, you can omit the assistiveText.icon prop and use the label prop. - */ - assistiveText?: Partial<{ - icon?: string; - }>; - - /** - * Callback that passes in the DOM reference of the `