diff --git a/.eslintrc.js b/.eslintrc.js index 4b22b2223f..6be4ce02e4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -158,8 +158,6 @@ module.exports = { }, }, ], - // javascript:void(0) is present in SLDS markup - 'no-script-url': 'off', // _ is not really private. 'no-underscore-dangle': ['error', { allowAfterThis: true }], // @@ -247,7 +245,7 @@ module.exports = { // TODO: Should be removed 'react/no-deprecated': 'off', - // javascript:void(0) is present in SLDS markup + // is present in SLDS markup 'jsx-a11y/anchor-is-valid': 'off', 'jsx-a11y/aria-activedescendant-has-tabindex': 2, 'jsx-a11y/interactive-supports-focus': 2, diff --git a/components/alert/__docs__/__snapshots__/storybook-stories.storyshot b/components/alert/__docs__/__snapshots__/storybook-stories.storyshot index 59945ee082..bf97ceaeb8 100644 --- a/components/alert/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/alert/__docs__/__snapshots__/storybook-stories.storyshot @@ -53,7 +53,7 @@ exports[`DOM snapshots SLDSAlert Custom Class Names 1`] = ` Logged in as John Smith (johnsmith@acme.com). Log out @@ -102,7 +102,7 @@ exports[`DOM snapshots SLDSAlert Custom Styles 1`] = ` Logged in as John Smith (johnsmith@acme.com). Log out @@ -146,7 +146,7 @@ exports[`DOM snapshots SLDSAlert Dismissable 1`] = ` Logged in as John Smith (johnsmith@acme.com). Log out @@ -211,7 +211,7 @@ exports[`DOM snapshots SLDSAlert Error 1`] = ` Your browser is currently not supported. Your Salesforce may be degraded. More Information @@ -255,7 +255,7 @@ exports[`DOM snapshots SLDSAlert Info 1`] = ` Logged in as John Smith (johnsmith@acme.com). Log out @@ -299,7 +299,7 @@ exports[`DOM snapshots SLDSAlert Offline 1`] = ` You are in offline mode. More information @@ -343,7 +343,7 @@ exports[`DOM snapshots SLDSAlert Warning 1`] = ` Your browser is outdated. Your Salesforce experience may be degraded. More Information diff --git a/components/alert/__examples__/close-alert.jsx b/components/alert/__examples__/close-alert.jsx index 47f7dc1241..c7034fa282 100644 --- a/components/alert/__examples__/close-alert.jsx +++ b/components/alert/__examples__/close-alert.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -33,10 +35,9 @@ class Example extends React.Component { heading: 'Logged in as John Smith (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} onRequestClose={() => { + action('onRequestClose')(); this.setState({ isOpen: false }); }} /> diff --git a/components/alert/__examples__/custom-class-name.jsx b/components/alert/__examples__/custom-class-name.jsx index 998f92a8bd..56b8a4f70e 100644 --- a/components/alert/__examples__/custom-class-name.jsx +++ b/components/alert/__examples__/custom-class-name.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -16,9 +18,7 @@ class Example extends React.Component { heading: 'Logged in as John Smith (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/custom-style.jsx b/components/alert/__examples__/custom-style.jsx index eeb9f9db87..db9976bb3a 100644 --- a/components/alert/__examples__/custom-style.jsx +++ b/components/alert/__examples__/custom-style.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -16,9 +18,7 @@ class Example extends React.Component { heading: 'Logged in as John Smith (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/dismissable.jsx b/components/alert/__examples__/dismissable.jsx index 28006439ee..c448f0a28f 100644 --- a/components/alert/__examples__/dismissable.jsx +++ b/components/alert/__examples__/dismissable.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -25,10 +27,9 @@ class Example extends React.Component { heading: 'Logged in as John Smith (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} onRequestClose={() => { + action('onRequestClose')(); this.setState({ isOpen: false }); }} /> diff --git a/components/alert/__examples__/error.jsx b/components/alert/__examples__/error.jsx index fcb98cce6c..e75c13f388 100644 --- a/components/alert/__examples__/error.jsx +++ b/components/alert/__examples__/error.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -16,9 +18,7 @@ class Example extends React.Component { 'Your browser is currently not supported. Your Salesforce may be degraded.', headingLink: 'More Information', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} variant="error" /> diff --git a/components/alert/__examples__/info.jsx b/components/alert/__examples__/info.jsx index 7f345b4e98..de3e59ad05 100644 --- a/components/alert/__examples__/info.jsx +++ b/components/alert/__examples__/info.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime @@ -15,9 +17,7 @@ class Example extends React.Component { heading: 'Logged in as John Smith (johnsmith@acme.com).', headingLink: 'Log out', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} /> diff --git a/components/alert/__examples__/offline.jsx b/components/alert/__examples__/offline.jsx index 280bd6b38b..37d93d1dc6 100644 --- a/components/alert/__examples__/offline.jsx +++ b/components/alert/__examples__/offline.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced with design-system-react at runtime @@ -14,9 +16,7 @@ class Example extends React.Component { heading: 'You are in offline mode.', headingLink: 'More information', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} variant="offline" /> diff --git a/components/alert/__examples__/warning.jsx b/components/alert/__examples__/warning.jsx index 839986bb4b..daa0d978b0 100644 --- a/components/alert/__examples__/warning.jsx +++ b/components/alert/__examples__/warning.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { action } from '@storybook/addon-actions'; + import Alert from '~/components/alert'; // `~` is replaced with design-system-react at runtime import AlertContainer from '~/components/alert/container'; // `~` is replaced import IconSettings from '~/components/icon-settings'; @@ -14,9 +16,7 @@ class Example extends React.Component { 'Your browser is outdated. Your Salesforce experience may be degraded.', headingLink: 'More Information', }} - onClickHeadingLink={() => { - console.log('Link clicked.'); - }} + onClickHeadingLink={action('onClickHeadingLink')} variant="warning" /> diff --git a/components/alert/index.jsx b/components/alert/index.jsx index b67fb9140e..e31c10deac 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -15,6 +15,7 @@ import checkProps from './check-props'; import componentDoc from './component.json'; import { ALERT } from '../../utilities/constants'; import DOMElementFocus from '../../utilities/dom-element-focus'; +import EventUtil from '../../utilities/event'; const propTypes = { /** @@ -163,7 +164,6 @@ class Alert extends React.Component { size: 'x-small', }); - /* eslint-disable no-script-url */ return (
{labels.headingLink} diff --git a/components/app-launcher/link.jsx b/components/app-launcher/link.jsx index 4a29f46d1b..7267df95bf 100644 --- a/components/app-launcher/link.jsx +++ b/components/app-launcher/link.jsx @@ -62,7 +62,7 @@ class AppLauncherLink extends React.Component { // ### Default Props static defaultProps = { - href: 'javascript:void(0);', // eslint-disable-line no-script-url + href: '#', }; render() { @@ -74,9 +74,12 @@ class AppLauncherLink extends React.Component { return ( { + if (this.props.href === '#') { + event.preventDefault(); + } if (this.props.onClick) { event.preventDefault(); this.props.onClick(event, { href: this.props.href }); diff --git a/components/app-launcher/tile.jsx b/components/app-launcher/tile.jsx index 8108f35779..153043f0ac 100644 --- a/components/app-launcher/tile.jsx +++ b/components/app-launcher/tile.jsx @@ -91,7 +91,7 @@ const defaultProps = { assistiveText: { dragIconText: 'Reorder', }, - href: 'javascript:void(0);', // eslint-disable-line no-script-url + href: '#', moreLabel: ' More', }; @@ -158,7 +158,10 @@ class AppLauncherTile extends React.Component {
+ this.props.href === '#' && event.preventDefault() + } > {this.props.title} diff --git a/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot b/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot index 5436cb1da8..8482af47d6 100644 --- a/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/breadcrumb/__docs__/__snapshots__/storybook-stories.storyshot @@ -15,7 +15,7 @@ exports[`DOM snapshots SLDSBreadcrumb 1 Item 1`] = ` className="slds-breadcrumb__item" > Parent Entity @@ -40,7 +40,7 @@ exports[`DOM snapshots SLDSBreadcrumb 2 Items 1`] = ` className="slds-breadcrumb__item" > Parent Entity @@ -50,7 +50,7 @@ exports[`DOM snapshots SLDSBreadcrumb 2 Items 1`] = ` className="slds-breadcrumb__item" > Parent Record Name @@ -112,7 +112,7 @@ exports[`DOM snapshots SLDSBreadcrumb Base with overflow menu 1`] = ` className="slds-breadcrumb__item" > Parent Entity @@ -121,7 +121,7 @@ exports[`DOM snapshots SLDSBreadcrumb Base with overflow menu 1`] = ` className="slds-breadcrumb__item" > Parent Record Name diff --git a/components/breadcrumb/__examples__/base-with-overflow-menu.jsx b/components/breadcrumb/__examples__/base-with-overflow-menu.jsx index b9484cb9c6..3b3c204194 100644 --- a/components/breadcrumb/__examples__/base-with-overflow-menu.jsx +++ b/components/breadcrumb/__examples__/base-with-overflow-menu.jsx @@ -9,8 +9,8 @@ class Example extends React.Component { render() { const trail = [ - Parent Entity, - Parent Record Name, + Parent Entity, + Parent Record Name, ]; return ( diff --git a/components/breadcrumb/__examples__/base.jsx b/components/breadcrumb/__examples__/base.jsx index 77bcf63da8..c127f16b37 100644 --- a/components/breadcrumb/__examples__/base.jsx +++ b/components/breadcrumb/__examples__/base.jsx @@ -8,10 +8,10 @@ class Example extends React.Component { render() { const trail = [ - + Parent Entity , - Parent Record Name, + Parent Record Name, ]; return ( diff --git a/components/breadcrumb/__examples__/one-item.jsx b/components/breadcrumb/__examples__/one-item.jsx index 8d3f21330d..0801b5a6d6 100644 --- a/components/breadcrumb/__examples__/one-item.jsx +++ b/components/breadcrumb/__examples__/one-item.jsx @@ -7,7 +7,7 @@ class Example extends React.Component { static displayName = 'BreadCrumbExample'; render() { - const trail = [Parent Entity]; + const trail = [Parent Entity]; return ( diff --git a/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot b/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot index 125bfc3e08..9fc9c90f65 100644 --- a/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot @@ -68,7 +68,8 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = ` >
( helpIcon: 'Help', icon: 'Builder', }} + events={actions('onClickBack', 'onClickHelp')} labels={{ back: 'Back', help: 'Help', diff --git a/components/builder-header/__examples__/base.jsx b/components/builder-header/__examples__/base.jsx index 1fad90003f..7defc54300 100644 --- a/components/builder-header/__examples__/base.jsx +++ b/components/builder-header/__examples__/base.jsx @@ -1,4 +1,6 @@ import React from 'react'; +import { actions, action } from '@storybook/addon-actions'; + import IconSettings from '../../icon-settings'; import BuilderHeader from '../../builder-header'; import BuilderHeaderNav from '../../builder-header/nav'; @@ -13,6 +15,7 @@ const Example = (props) => ( backIcon: 'Back', helpIcon: 'Help', }} + events={actions('onClickBack', 'onClickHelp')} labels={{ back: 'Back', help: 'Help', @@ -27,6 +30,7 @@ const Example = (props) => ( iconCategory="utility" iconName="settings" label="Link" + onClick={action('link/onClick')} /> ( { label: 'Menu Item One', value: 'A0' }, { label: 'Menu Item Two', value: 'B0' }, ]} + onSelect={action('dropdown/onSelect')} /> diff --git a/components/builder-header/__examples__/failed-save.jsx b/components/builder-header/__examples__/failed-save.jsx index 82fa2b3387..d8253f869c 100644 --- a/components/builder-header/__examples__/failed-save.jsx +++ b/components/builder-header/__examples__/failed-save.jsx @@ -70,7 +70,7 @@ const Example = (props) => (

Pellentesque magna tellus, dapibus vitae placerat nec, viverra vel mi.{' '} - + Learn More

diff --git a/components/builder-header/index.jsx b/components/builder-header/index.jsx index ccfc2fdf17..4a610455e5 100644 --- a/components/builder-header/index.jsx +++ b/components/builder-header/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import EventUtil from '../../utilities/event'; import Icon from '../icon'; @@ -202,9 +203,9 @@ const BuilderHeader = (props) => {
{
{ ...defaultProps.assistiveText, ...props.assistiveText, }; + return (
  • Footer text @@ -1133,7 +1134,8 @@ exports[`DOM snapshots SLDSCard w/o Header 1`] = ` className="slds-card__footer" > Footer text diff --git a/components/card/__docs__/storybook-stories.jsx b/components/card/__docs__/storybook-stories.jsx index 6ab68fd4b3..7c2c029cb8 100644 --- a/components/card/__docs__/storybook-stories.jsx +++ b/components/card/__docs__/storybook-stories.jsx @@ -130,7 +130,11 @@ const SetHeightCard = () => ( Footer text} // eslint-disable-line no-script-url + footer={ + event.preventDefault()}> + Footer text + + } heading="Card with set height" icon={} style={{ height: '300px' }} @@ -159,7 +163,11 @@ const DemoCardWithoutHeader = () => ( Footer text} // eslint-disable-line no-script-url + footer={ + event.preventDefault()}> + Footer text + + } hasNoHeader icon={} style={{ height: '300px' }} diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx index 8e1cd44aa4..3c39d03d79 100644 --- a/components/carousel/index.jsx +++ b/components/carousel/index.jsx @@ -105,7 +105,7 @@ class Carousel extends React.Component { * * `description`: Secondary string that is used to describe the item * * `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered * * `imageAssistiveText`: Image alt text, if not present heading will be used instead - * * `href`: Used for item link, if not provided 'javascript:void(0);' is used instead + * * `href`: Used for item link, if not provided '#' is used instead * * `src`: Item image src value */ items: PropTypes.array.isRequired, diff --git a/components/carousel/private/carousel-item.jsx b/components/carousel/private/carousel-item.jsx index 252bab3192..2e0a617ea0 100644 --- a/components/carousel/private/carousel-item.jsx +++ b/components/carousel/private/carousel-item.jsx @@ -15,59 +15,71 @@ import { CAROUSEL_ITEM } from '../../../utilities/constants'; /** * A carousel allows multiple pieces of featured content to occupy an allocated amount of space. */ -const CarouselItem = (props) => ( - + ); +}; CarouselItem.displayName = CAROUSEL_ITEM; @@ -132,7 +144,7 @@ CarouselItem.propTypes = { }; CarouselItem.defaultProps = { - href: 'javascript:void(0);', + href: '#', }; export default CarouselItem; diff --git a/components/color-picker/__docs__/__snapshots__/storybook-stories.storyshot b/components/color-picker/__docs__/__snapshots__/storybook-stories.storyshot index 2b9e7f1fd7..bed68a6efa 100644 --- a/components/color-picker/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/color-picker/__docs__/__snapshots__/storybook-stories.storyshot @@ -187,7 +187,8 @@ exports[`DOM snapshots SLDSColorPicker ColorPicker Menu Open 1`] = ` aria-controls="color-picker-tabs-color-picker-slds-tabs_panel-0" aria-selected="true" className="slds-is-active slds-tabs_default__link" - href="javascript:void(0);" + href="#" + onClick={[Function]} role="tab" tabIndex="0" > @@ -204,7 +205,8 @@ exports[`DOM snapshots SLDSColorPicker ColorPicker Menu Open 1`] = ` aria-controls="color-picker-tabs-color-picker-slds-tabs_panel-1" aria-selected="false" className="slds-tabs_default__link" - href="javascript:void(0);" + href="#" + onClick={[Function]} role="tab" tabIndex="-1" > diff --git a/components/component-docs.json b/components/component-docs.json index 38aaf6c3ee..863c0a7f9f 100644 --- a/components/component-docs.json +++ b/components/component-docs.json @@ -685,7 +685,7 @@ "required": false, "description": "The `href` attribute of the link. If the `onClick` callback is specified this URL will be prevented from changing the browser's location.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -789,7 +789,7 @@ "required": false, "description": "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.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -3006,7 +3006,7 @@ "name": "array" }, "required": true, - "description": "* **Array of item objects used by the default carousel item renderer.**\nEach object can contain:\n* `id`: The id of the carousel item. [REQUIRED]\n* `heading`: Primary string that will be used as the heading\n* `description`: Secondary string that is used to describe the item\n* `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered\n* `imageAssistiveText`: Image alt text, if not present heading will be used instead\n* `href`: Used for item link, if not provided 'javascript:void(0);' is used instead\n* `src`: Item image src value" + "description": "* **Array of item objects used by the default carousel item renderer.**\nEach object can contain:\n* `id`: The id of the carousel item. [REQUIRED]\n* `heading`: Primary string that will be used as the heading\n* `description`: Secondary string that is used to describe the item\n* `buttonLabel`: If assigned a call to button action will be rendered with this text, if unassigned no button is rendered\n* `imageAssistiveText`: Image alt text, if not present heading will be used instead\n* `href`: Used for item link, if not provided '#' is used instead\n* `src`: Item image src value" }, "itemsPerPanel": { "type": { @@ -5308,7 +5308,7 @@ "name": "node" }, "required": false, - "description": "Provide children of the type `` to define the structure of the data being represented and children of the type `` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" + "description": "Provide children of the type `` to define the structure of the data being represented and children of the type `` to define a menu which will be rendered for each item in the grid. Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" }, "className": { "type": { @@ -5431,7 +5431,7 @@ "name": "func" }, "required": false, - "description": "This function fires when infinite loading loads more data.\n\nThis will be called multiple times while the table is being scrolled within the `loadMoreOffset`. Please track whether or not loading is in progress and check it at the start of this function to avoid executing your callback too many times." + "description": "This function fires when infinite loading loads more data.\n\nThis will be called multiple times while the table is being scrolled within the `loadMoreOffset`. It'll also continue to be called while `hasMore` is `true` and the table has not yet loaded enough rows to allow a user to scroll. Please track whether or not loading is in progress and check it at the start of this function to avoid executing your callback too many times." }, "onRowChange": { "type": { @@ -5632,7 +5632,7 @@ "name": "element" }, "required": false, - "description": "Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" + "description": "Use a _higher-order component_ to customize a data table cell that will override the default cell rendering. `CustomDataTableCell` must have the same `displayName` as `DataTableCell` or it will be ignored. If you want complete control of the HTML, including the wrapping `td`, you don't have to use `DataTableCell`.\n```\nimport DataTableCell from 'design-system-react/data-table/cell';\nconst CustomDataTableCell = ({ children, ...props }) => (\n \n {children}\n \n);\nCustomDataTableCell.displayName = DataTableCell.displayName;\n\n\n \n \n \n \n \n\n```" }, "isDefaultSortDescending": { "type": { @@ -7507,6 +7507,18 @@ "params": [], "returns": null, "description": "Get the File's HTML id. Generate a new one if no ID present." + }, + { + "name": "handleOnClickImage", + "docblock": null, + "modifiers": [], + "params": [ + { + "name": "event", + "type": null + } + ], + "returns": null } ], "props": { @@ -7653,7 +7665,7 @@ "required": false, "description": "Href attribute for image", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -7795,7 +7807,7 @@ "required": false, "description": "Href attribute for image", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } } @@ -8848,7 +8860,7 @@ "required": false, "description": "The `href` attribute of the link. Please pass in bookmarkable URLs from your routing library. Use `GlobalNavigationBarButton` if a \"real URL\" is not desired. If the `onClick` callback is specified this URL will still be prevented from changing the browser's location.", "defaultValue": { - "value": "'javascript:void(0);'", + "value": "'#'", "computed": false } }, @@ -12747,6 +12759,18 @@ ], "returns": null }, + { + "name": "handleOnClick", + "docblock": null, + "modifiers": [], + "params": [ + { + "name": "event", + "type": null + } + ], + "returns": null + }, { "name": "restProps", "docblock": "Extracts a set of custom properties. A custom property is a property, which is not described in propTypes of a component.", diff --git a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot index 3f8704ba22..6e67fd45a3 100644 --- a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot @@ -85,7 +85,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` > Acme - 1,200 Widgets @@ -477,7 +477,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -592,7 +592,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -679,7 +679,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` title="bob@acme.com" > bob@acme.com @@ -794,7 +794,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -881,7 +881,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -987,7 +987,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = > Acme - 1,200 Widgets @@ -1354,7 +1354,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = title="jrogers@acme.com" > jrogers@acme.com @@ -1466,7 +1466,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -1553,7 +1553,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = title="bob@acme.com" > bob@acme.com @@ -1665,7 +1665,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -1752,7 +1752,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] = title="nathan@salesforce.com" > nathan@salesforce.com @@ -1858,7 +1858,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = > Acme - 1,200 Widgets @@ -2225,7 +2225,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = title="jrogers@acme.com" > jrogers@acme.com @@ -2337,7 +2337,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -2424,7 +2424,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = title="bob@acme.com" > bob@acme.com @@ -2536,7 +2536,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -2623,7 +2623,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] = title="nathan@salesforce.com" > nathan@salesforce.com @@ -4514,7 +4514,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="Cloudhub" > Cloudhub @@ -4597,7 +4597,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -4619,7 +4619,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="Cloudhub + Anypoint Connectors" > Cloudhub + Anypoint Connectors @@ -4702,7 +4702,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -4724,7 +4724,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="Cloudhub" > Cloudhub @@ -4807,7 +4807,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout (Default) 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -4956,7 +4956,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="Cloudhub" > Cloudhub @@ -5039,7 +5039,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5061,7 +5061,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="Cloudhub + Anypoint Connectors" > Cloudhub + Anypoint Connectors @@ -5144,7 +5144,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5166,7 +5166,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="Cloudhub" > Cloudhub @@ -5249,7 +5249,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Column Bordered 1`] = title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5398,7 +5398,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="Cloudhub" > Cloudhub @@ -5481,7 +5481,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5503,7 +5503,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="Cloudhub + Anypoint Connectors" > Cloudhub + Anypoint Connectors @@ -5586,7 +5586,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5608,7 +5608,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="Cloudhub" > Cloudhub @@ -5691,7 +5691,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - No Row Hover 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5840,7 +5840,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="Cloudhub" > Cloudhub @@ -5923,7 +5923,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -5945,7 +5945,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="Cloudhub + Anypoint Connectors" > Cloudhub + Anypoint Connectors @@ -6028,7 +6028,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -6050,7 +6050,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="Cloudhub" > Cloudhub @@ -6133,7 +6133,7 @@ exports[`DOM snapshots SLDSDataTable Basic Fluid Layout - Striped 1`] = ` title="jrogers@cloudhub.com" > jrogers@cloudhub.com @@ -6733,7 +6733,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` > Acme - 1,200 Widgets @@ -7467,7 +7467,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -7578,7 +7578,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -7661,7 +7661,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -7772,7 +7772,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -7855,7 +7855,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -7966,7 +7966,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 800 Widgets" > Acme - 800 Widgets @@ -8049,7 +8049,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -8160,7 +8160,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 744 Widgets" > Acme - 744 Widgets @@ -8243,7 +8243,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -8354,7 +8354,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="salesforce.com - 847 Widgets" > salesforce.com - 847 Widgets @@ -8437,7 +8437,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -8548,7 +8548,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 1,621 Widgets" > Acme - 1,621 Widgets @@ -8631,7 +8631,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -8742,7 +8742,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 430 Widgets" > Acme - 430 Widgets @@ -8825,7 +8825,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -8936,7 +8936,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="salesforce.com - 677 Widgets" > salesforce.com - 677 Widgets @@ -9019,7 +9019,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -9130,7 +9130,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 1,444 Widgets" > Acme - 1,444 Widgets @@ -9213,7 +9213,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -9324,7 +9324,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="Acme - 320 Widgets" > Acme - 320 Widgets @@ -9407,7 +9407,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -9518,7 +9518,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="salesforce.com - 4,000 Widgets" > salesforce.com - 4,000 Widgets @@ -9601,7 +9601,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -9841,7 +9841,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` > Acme - 1,200 Widgets @@ -10575,7 +10575,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -10686,7 +10686,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -10769,7 +10769,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -10880,7 +10880,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -10963,7 +10963,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -11074,7 +11074,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 800 Widgets" > Acme - 800 Widgets @@ -11157,7 +11157,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -11268,7 +11268,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 744 Widgets" > Acme - 744 Widgets @@ -11351,7 +11351,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -11462,7 +11462,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="salesforce.com - 847 Widgets" > salesforce.com - 847 Widgets @@ -11545,7 +11545,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -11656,7 +11656,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 1,621 Widgets" > Acme - 1,621 Widgets @@ -11739,7 +11739,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -11850,7 +11850,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 430 Widgets" > Acme - 430 Widgets @@ -11933,7 +11933,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -12044,7 +12044,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="salesforce.com - 677 Widgets" > salesforce.com - 677 Widgets @@ -12127,7 +12127,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -12238,7 +12238,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 1,444 Widgets" > Acme - 1,444 Widgets @@ -12321,7 +12321,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -12432,7 +12432,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="Acme - 320 Widgets" > Acme - 320 Widgets @@ -12515,7 +12515,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -12626,7 +12626,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="salesforce.com - 4,000 Widgets" > salesforce.com - 4,000 Widgets @@ -12709,7 +12709,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -12943,7 +12943,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` > Acme - 1,200 Widgets @@ -13677,7 +13677,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -13788,7 +13788,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -13871,7 +13871,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -13982,7 +13982,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -14065,7 +14065,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -14176,7 +14176,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 800 Widgets" > Acme - 800 Widgets @@ -14259,7 +14259,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -14370,7 +14370,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 744 Widgets" > Acme - 744 Widgets @@ -14453,7 +14453,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -14564,7 +14564,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="salesforce.com - 847 Widgets" > salesforce.com - 847 Widgets @@ -14647,7 +14647,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -14758,7 +14758,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 1,621 Widgets" > Acme - 1,621 Widgets @@ -14841,7 +14841,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -14952,7 +14952,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 430 Widgets" > Acme - 430 Widgets @@ -15035,7 +15035,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -15146,7 +15146,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="salesforce.com - 677 Widgets" > salesforce.com - 677 Widgets @@ -15229,7 +15229,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -15340,7 +15340,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 1,444 Widgets" > Acme - 1,444 Widgets @@ -15423,7 +15423,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -15534,7 +15534,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="Acme - 320 Widgets" > Acme - 320 Widgets @@ -15617,7 +15617,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="bob@acme.com" > bob@acme.com @@ -15728,7 +15728,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="salesforce.com - 4,000 Widgets" > salesforce.com - 4,000 Widgets @@ -15811,7 +15811,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -16435,7 +16435,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` > Acme - 1,200 Widgets @@ -17169,7 +17169,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -17280,7 +17280,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 200 Widgets" > Acme - 200 Widgets @@ -17363,7 +17363,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -17474,7 +17474,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="salesforce.com - 1,000 Widgets" > salesforce.com - 1,000 Widgets @@ -17557,7 +17557,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -17668,7 +17668,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 800 Widgets" > Acme - 800 Widgets @@ -17751,7 +17751,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -17862,7 +17862,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 744 Widgets" > Acme - 744 Widgets @@ -17945,7 +17945,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -18056,7 +18056,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="salesforce.com - 847 Widgets" > salesforce.com - 847 Widgets @@ -18139,7 +18139,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -18250,7 +18250,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 1,621 Widgets" > Acme - 1,621 Widgets @@ -18333,7 +18333,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -18444,7 +18444,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 430 Widgets" > Acme - 430 Widgets @@ -18527,7 +18527,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -18638,7 +18638,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="salesforce.com - 677 Widgets" > salesforce.com - 677 Widgets @@ -18721,7 +18721,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com @@ -18832,7 +18832,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 1,444 Widgets" > Acme - 1,444 Widgets @@ -18915,7 +18915,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="jrogers@acme.com" > jrogers@acme.com @@ -19026,7 +19026,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="Acme - 320 Widgets" > Acme - 320 Widgets @@ -19109,7 +19109,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="bob@acme.com" > bob@acme.com @@ -19220,7 +19220,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="salesforce.com - 4,000 Widgets" > salesforce.com - 4,000 Widgets @@ -19303,7 +19303,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = ` title="nathan@salesforce.com" > nathan@salesforce.com diff --git a/components/data-table/__examples__/advanced-single-select-fixed-header.jsx b/components/data-table/__examples__/advanced-single-select-fixed-header.jsx index 81e1345c47..ca0c1a65d3 100644 --- a/components/data-table/__examples__/advanced-single-select-fixed-header.jsx +++ b/components/data-table/__examples__/advanced-single-select-fixed-header.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/advanced-single-select.jsx b/components/data-table/__examples__/advanced-single-select.jsx index 81e1345c47..ca0c1a65d3 100644 --- a/components/data-table/__examples__/advanced-single-select.jsx +++ b/components/data-table/__examples__/advanced-single-select.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/advanced.jsx b/components/data-table/__examples__/advanced.jsx index 19f97196fc..653eaa3bf8 100644 --- a/components/data-table/__examples__/advanced.jsx +++ b/components/data-table/__examples__/advanced.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-column-bordered.jsx b/components/data-table/__examples__/basic-fluid-column-bordered.jsx index 8974561786..8985e5d229 100644 --- a/components/data-table/__examples__/basic-fluid-column-bordered.jsx +++ b/components/data-table/__examples__/basic-fluid-column-bordered.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-no-row-hover.jsx b/components/data-table/__examples__/basic-fluid-no-row-hover.jsx index 257a94f9df..947f0f626f 100644 --- a/components/data-table/__examples__/basic-fluid-no-row-hover.jsx +++ b/components/data-table/__examples__/basic-fluid-no-row-hover.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid-striped.jsx b/components/data-table/__examples__/basic-fluid-striped.jsx index 3cc3ff7377..cd296c7402 100644 --- a/components/data-table/__examples__/basic-fluid-striped.jsx +++ b/components/data-table/__examples__/basic-fluid-striped.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/basic-fluid.jsx b/components/data-table/__examples__/basic-fluid.jsx index dec5a95547..fcde3dff1d 100644 --- a/components/data-table/__examples__/basic-fluid.jsx +++ b/components/data-table/__examples__/basic-fluid.jsx @@ -8,7 +8,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx b/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx index 04df8d98df..543c51cd3e 100644 --- a/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx +++ b/components/data-table/__examples__/fixed-header-horizontal-scrolling.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/fixed-header.jsx b/components/data-table/__examples__/fixed-header.jsx index 02996646be..506a5f5133 100644 --- a/components/data-table/__examples__/fixed-header.jsx +++ b/components/data-table/__examples__/fixed-header.jsx @@ -10,7 +10,7 @@ import IconSettings from '~/components/icon-settings'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/infinite-scrolling.jsx b/components/data-table/__examples__/infinite-scrolling.jsx index 316cf8952c..71c52ad13e 100644 --- a/components/data-table/__examples__/infinite-scrolling.jsx +++ b/components/data-table/__examples__/infinite-scrolling.jsx @@ -133,7 +133,7 @@ const ITEMS = [ const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/__examples__/joined-with-page-header.jsx b/components/data-table/__examples__/joined-with-page-header.jsx index 650e59d8a3..d571822bee 100644 --- a/components/data-table/__examples__/joined-with-page-header.jsx +++ b/components/data-table/__examples__/joined-with-page-header.jsx @@ -16,7 +16,7 @@ import PageHeaderControl from '~/components/page-header/control'; const CustomDataTableCell = ({ children, ...props }) => ( { event.preventDefault(); }} diff --git a/components/data-table/column.jsx b/components/data-table/column.jsx index 80c5eccd3d..5fe0e18e37 100644 --- a/components/data-table/column.jsx +++ b/components/data-table/column.jsx @@ -30,7 +30,7 @@ DataTableColumn.propTypes = { * import DataTableCell from 'design-system-react/data-table/cell'; * const CustomDataTableCell = ({ children, ...props }) => ( * - * {children} + * {children} * * ); * CustomDataTableCell.displayName = DataTableCell.displayName; diff --git a/components/data-table/index.jsx b/components/data-table/index.jsx index c9a9c9e310..a6f77e3353 100644 --- a/components/data-table/index.jsx +++ b/components/data-table/index.jsx @@ -102,7 +102,7 @@ class DataTable extends React.Component { * import DataTableCell from 'design-system-react/data-table/cell'; * const CustomDataTableCell = ({ children, ...props }) => ( * - * {children} + * {children} * * ); * CustomDataTableCell.displayName = DataTableCell.displayName; diff --git a/components/data-table/private/header-cell.jsx b/components/data-table/private/header-cell.jsx index 00b64af027..9e6ab760cf 100644 --- a/components/data-table/private/header-cell.jsx +++ b/components/data-table/private/header-cell.jsx @@ -96,6 +96,8 @@ class DataTableHeaderCell extends React.Component { } handleSort = (e) => { + e.preventDefault(); + const oldSortDirection = this.props.sortDirection || this.state.sortDirection; // UX pattern: If sortable, and the DataTable's parent has not defined the sort order, then ascending (that is A->Z) is the default sort order on first click. Some columns, such as "last viewed" or "recently updated," should sort descending first, since that is what the user probably wants. Who wants to see the oldest files first? @@ -145,7 +147,7 @@ class DataTableHeaderCell extends React.Component { const fixedLayoutSubRenders = { sortable: (   - Today + Today diff --git a/components/date-picker/private/calendar.jsx b/components/date-picker/private/calendar.jsx index 7893546e32..31c0274bc5 100644 --- a/components/date-picker/private/calendar.jsx +++ b/components/date-picker/private/calendar.jsx @@ -306,10 +306,11 @@ class DatepickerCalendar extends React.Component { { + event.preventDefault(); this.handleSelectDate(event, { date: new Date() }); }} onKeyDown={this.props.onLastFocusableNodeKeyDown} diff --git a/components/files/__docs__/__snapshots__/storybook-stories.storyshot b/components/files/__docs__/__snapshots__/storybook-stories.storyshot index e63b8ecced..6bad1aeb1d 100644 --- a/components/files/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/files/__docs__/__snapshots__/storybook-stories.storyshot @@ -18,7 +18,8 @@ exports[`DOM snapshots SLDSFiles Cropped 1`] = `
    } image="/assets/images/placeholder-img@16x9.jpg" - href="javascript:void(0);" + href="https://example.com" crop="4-by-3" /> diff --git a/components/files/file.jsx b/components/files/file.jsx index e0deea1c6b..0ea3de3ade 100644 --- a/components/files/file.jsx +++ b/components/files/file.jsx @@ -103,7 +103,7 @@ const defaultProps = { moreActions: 'more actions', }, crop: '16-by-9', - href: 'javascript:void(0);', + href: '#', isLoading: false, hasNoVisibleTitle: false, }; @@ -136,6 +136,16 @@ class File extends React.Component { return this.props.id || this.generatedId; } + handleOnClickImage = (event) => { + if (this.props.href === '#') { + event.preventDefault(); + } + + if (this.props.onClickImage) { + this.props.onClickImage(event); + } + }; + render() { const assistiveText = { ...defaultProps.assistiveText, @@ -159,7 +169,7 @@ class File extends React.Component { 'slds-file__crop', this.props.crop ? `slds-file__crop_${this.props.crop}` : null )} - onClick={this.props.onClickImage} + onClick={this.handleOnClickImage} > + this.props.href === '#' && event.preventDefault() + } >
    {assistiveText.link} diff --git a/components/filter/index.jsx b/components/filter/index.jsx index 709b76d7af..01f4ac0fa6 100644 --- a/components/filter/index.jsx +++ b/components/filter/index.jsx @@ -1,8 +1,6 @@ /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */ /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */ -/* eslint-disable no-script-url */ - // # Filter // Implements part of the [Panel design pattern](https://www.lightningdesignsystem.com/components/panels) in React. diff --git a/components/global-header/__docs__/__snapshots__/storybook-stories.storyshot b/components/global-header/__docs__/__snapshots__/storybook-stories.storyshot index 50cbfc780e..8bb71a44be 100644 --- a/components/global-header/__docs__/__snapshots__/storybook-stories.storyshot +++ b/components/global-header/__docs__/__snapshots__/storybook-stories.storyshot @@ -9,14 +9,14 @@ exports[`DOM snapshots SLDSGlobalHeader Doc site Default 1`] = ` > Skip to Navigation Skip to Main Content @@ -501,14 +501,14 @@ exports[`DOM snapshots SLDSGlobalHeader Search + Navigation 1`] = ` > Skip to Navigation Skip to Main Content @@ -884,14 +884,14 @@ exports[`DOM snapshots SLDSGlobalHeader With custom 1`] = ` > Skip to Navigation Skip to Main Content diff --git a/components/global-header/__docs__/storybook-stories.jsx b/components/global-header/__docs__/storybook-stories.jsx index 1e78fdacdb..7eb1d8e238 100644 --- a/components/global-header/__docs__/storybook-stories.jsx +++ b/components/global-header/__docs__/storybook-stories.jsx @@ -17,11 +17,11 @@ import IconSettings from '../../icon-settings'; import Popover from '../../popover'; import { GLOBAL_HEADER } from '../../../utilities/constants'; +import EventUtil from '../../../utilities/event'; import Default from '../__examples__/default'; /* eslint-disable max-len */ -/* eslint-disable no-script-url */ /* eslint-disable react/prop-types */ const ipsum = @@ -50,8 +50,9 @@ const HeaderNotificationsCustomContent = (props) => (
    event.preventDefault()} >

    (

    Settings - + Log Out

    diff --git a/components/global-header/__examples__/default.jsx b/components/global-header/__examples__/default.jsx index be07226d71..3a259436f8 100644 --- a/components/global-header/__examples__/default.jsx +++ b/components/global-header/__examples__/default.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import EventUtil from '~/utilities/event'; import Combobox from '~/components/combobox'; import Dropdown from '~/components/menu-dropdown'; @@ -14,7 +15,6 @@ import IconSettings from '~/components/icon-settings'; import Popover from '~/components/popover'; /* eslint-disable max-len */ -/* eslint-disable no-script-url */ /* eslint-disable react/prop-types */ const ipsum = @@ -43,8 +43,9 @@ const HeaderNotificationsCustomContent = (props) => (
    event.preventDefault()} >

    (

    Settings - + Log Out

    diff --git a/components/global-header/index.jsx b/components/global-header/index.jsx index aad174acac..0ec837204f 100644 --- a/components/global-header/index.jsx +++ b/components/global-header/index.jsx @@ -145,12 +145,12 @@ class GlobalHeader extends React.Component { actions[GLOBAL_HEADER_PROFILE] ); - /* eslint-disable max-len, no-script-url */ + /* eslint-disable max-len */ return (
    {this.props.onSkipToNav ? ( @@ -159,7 +159,7 @@ class GlobalHeader extends React.Component { ) : null} {this.props.onSkipToContent ? ( @@ -191,7 +191,7 @@ class GlobalHeader extends React.Component { {this.props.navigation}
    ); - /* eslint-enable max-len, no-script-url */ + /* eslint-enable max-len */ } } diff --git a/components/global-navigation-bar/link.jsx b/components/global-navigation-bar/link.jsx index dc155ef3c4..757be515fb 100644 --- a/components/global-navigation-bar/link.jsx +++ b/components/global-navigation-bar/link.jsx @@ -18,12 +18,6 @@ import isFunction from 'lodash.isfunction'; // ## Constants import { GLOBAL_NAVIGATION_BAR_LINK } from '../../utilities/constants'; -function handleClick(event, href, onClick) { - event.preventDefault(); - - onClick(event, { href }); -} - /** * Wraps a link in the proper markup to support use in the GlobalNavigationBar. */ @@ -56,6 +50,16 @@ const GlobalNavigationBarLink = (props) => { } : null; + function handleOnClick(event) { + if (isFunction(onClick) || href === '#') { + event.preventDefault(); + } + + if (isFunction(onClick)) { + onClick(event, { href }); + } + } + return (
  • { href={href} className={classNames('slds-context-bar__label-action', className)} onBlur={onBlur} - onClick={ - isFunction(onClick) - ? (event) => handleClick(event, href, onClick) - : null - } + onClick={handleOnClick} onFocus={onFocus} onKeyDown={onKeyDown} onKeyPress={onKeyPress} @@ -181,7 +181,7 @@ GlobalNavigationBarLink.defaultProps = { assistiveText: { activeDescriptor: 'Current page:', }, - href: 'javascript:void(0);', // eslint-disable-line no-script-url + href: '#', }; export default GlobalNavigationBarLink; diff --git a/components/lookup/footer.jsx b/components/lookup/footer.jsx index 29e46fcdfb..9b2324e1bd 100644 --- a/components/lookup/footer.jsx +++ b/components/lookup/footer.jsx @@ -41,9 +41,12 @@ class DefaultFooter extends React.Component { onMouseDown={EventUtil.trapImmediate} > {/* eslint-enable jsx-a11y/no-static-element-interactions */} - {/* eslint-disable no-script-url */} - - {/* eslint-enable no-script-url */} + event.preventDefault()} + className={className} + > {/* eslint-enable jsx-a11y/no-static-element-interactions */} - {/* eslint-disable no-script-url */} - - {/* eslint-enable no-script-url */} + event.preventDefault()} + className={className} + > - {/* eslint-disable no-script-url */} { this.pills[this.state.selectedIndex] = pill; }} + onClick={(event) => event.preventDefault()} onKeyDown={this.handlePillKeyDown} > - {/* eslint-enable no-script-url */} {renderIcon} {selectedItem}