From cb61945baac57bd6bc00e66979c5444b8810c1c6 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 16 Jul 2025 11:53:02 +0100 Subject: [PATCH 1/6] =?UTF-8?q?updated=20the=20=E2=80=9CHow=20to=20use?= =?UTF-8?q?=E2=80=9D=20sections=20related=20to=20`@isHrefExternal`=20for?= =?UTF-8?q?=20different=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../button/partials/code/how-to-use.md | 5 ++++- .../dropdown/partials/code/how-to-use.md | 22 ++++++++++--------- .../link/inline/partials/code/how-to-use.md | 10 ++++----- .../standalone/partials/code/how-to-use.md | 12 +++++----- .../interactive/partials/code/how-to-use.md | 7 +++--- 5 files changed, 32 insertions(+), 24 deletions(-) diff --git a/website/docs/components/button/partials/code/how-to-use.md b/website/docs/components/button/partials/code/how-to-use.md index 10cc61875dd..ecd94537d4b 100644 --- a/website/docs/components/button/partials/code/how-to-use.md +++ b/website/docs/components/button/partials/code/how-to-use.md @@ -114,18 +114,21 @@ If you’re passing an `@href` or a `@route` argument to the component, this wil !!! Info The `Hds::Button` component uses the generic `Hds::Interactive` component. For more details about how this utility component works, please refer to [its documentation page](/utilities/interactive). + !!! #### With @href If you pass an `@href` argument, an `` link will be generated. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument but can be overridden. If the `href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` and it will not add the `target` and `rel` attributes. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### With @route If you pass a `@route` argument, an `` link will be generated using a `` Ember component. All of the standard arguments for the `` components are supported (eg. `models/model/query/current-when/replace`). diff --git a/website/docs/components/dropdown/partials/code/how-to-use.md b/website/docs/components/dropdown/partials/code/how-to-use.md index a000c6bf200..4bde0071ff9 100644 --- a/website/docs/components/dropdown/partials/code/how-to-use.md +++ b/website/docs/components/dropdown/partials/code/how-to-use.md @@ -219,7 +219,13 @@ To change this behavior, you can use the `@preserveContentInDom` argument so tha ### ListItem::Interactive `ListItem::Interactive` renders the correct element based on the passing of a `@route`, `@href`, or the addition of a click event (e.g., -`\{{on "click" this.myAction}}`). Internally, the component uses the [Hds::Interactive](/utilities/interactive) utility component. +`\{{on "click" this.myAction}}`). + +!!! Info + +The `ListItem::Interactive` component uses the generic `Hds::Interactive` component. For more details about how this utility component works, please refer to [its documentation page](/utilities/interactive). + +!!! #### Rendering a button @@ -245,13 +251,6 @@ You can pass an `@icon` argument to add a leading icon: #### Rendering a link with `@href` -!!! Info - -**Internal Link?** - -When using the `@href` argument, you’re indicating an external link (instead of a route). So, a few relevant HTML attributes are added—`target="_blank"` and `rel="noopener noreferrer"`. However, if the `@href` really _does_ point to an internal link or uses a different protocol (e.g., `mailto` or `ftp`), pass `@isHrefExternal={{false}}` to the component and it will not add any extra HTML attributes. -!!! - If you pass an `@href` argument, a link (`` element) will be generated: ```handlebars @@ -261,8 +260,9 @@ If you pass an `@href` argument, a link (`` element) will be generated: ``` +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. -To indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`. +To visually indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### Rendering a LinkTo (with `@route`) Pass a `@route` to render Ember ``. If the route is external to your current engine, pass `@isRouteExternal={{true}}` to use `` instead of ``. For more details see the [Hds::Interactive component](/utilities/interactive/) documentation. All the standard arguments for the `` components are supported (e.g., `models/model/query/current-when/replace`). @@ -384,4 +386,4 @@ When using the “generic” ListItem, the product team is responsible for imple -``` \ No newline at end of file +``` diff --git a/website/docs/components/link/inline/partials/code/how-to-use.md b/website/docs/components/link/inline/partials/code/how-to-use.md index d2c22434629..8057890b383 100644 --- a/website/docs/components/link/inline/partials/code/how-to-use.md +++ b/website/docs/components/link/inline/partials/code/how-to-use.md @@ -47,23 +47,23 @@ Inline Links use the generic `Hds::Interactive` component. Learn more about [how #### With `@href` -To generate an `` link, pass an `@href` argument with a URL as the value. +To generate an `` link, pass an `@href` argument with a URL as the value. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars Lorem ipsum dolor sit amet consectetur adipiscing elit. ``` -If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{true}}` to the component and it will omit the `target` and `rel` attributes. +If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. -#### With `@route` +#### With `@route` All the standard arguments for the `` components are supported (e.g., `models/model/query/current-when/replace`). ##### For `` -To generate an `` link using a `` Ember component, pass a `@route` argument. +To generate an `` link using a `` Ember component, pass a `@route` argument. ```handlebars Lorem ipsum dolor sit amet consectetur adipiscing elit. diff --git a/website/docs/components/link/standalone/partials/code/how-to-use.md b/website/docs/components/link/standalone/partials/code/how-to-use.md index 78efb9df2ba..80d6e1332e2 100644 --- a/website/docs/components/link/standalone/partials/code/how-to-use.md +++ b/website/docs/components/link/standalone/partials/code/how-to-use.md @@ -31,7 +31,7 @@ There are two available colors for a Standalone Link: `primary` and `secondary`. ```handlebars -``` +``` ### Size @@ -53,21 +53,23 @@ Standalone Links use the generic `Hds::Interactive` component. Learn more about #### With `@href` -To generate an `` link, pass an `@href` argument with a URL as the value. +To generate an `` link, pass an `@href` argument with a URL as the value. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### With `@route` All the standard arguments for the `` components are supported (eg. `models/model/query/current-when/replace`). ##### For `` -To generate an `` link using a `` Ember component, pass a `@route` argument. +To generate an `` link using a `` Ember component, pass a `@route` argument. ```handlebars @@ -75,4 +77,4 @@ To generate an `` link using a `` Ember component, pass a `@route` ar ##### For `` -If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `` instead of ``. \ No newline at end of file +If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `` instead of ``. diff --git a/website/docs/utilities/interactive/partials/code/how-to-use.md b/website/docs/utilities/interactive/partials/code/how-to-use.md index accd2b391eb..cb2af1617c3 100644 --- a/website/docs/utilities/interactive/partials/code/how-to-use.md +++ b/website/docs/utilities/interactive/partials/code/how-to-use.md @@ -7,7 +7,7 @@ This component is intended only for internal Helios use. If you need to use it, ### Default use for `