@gitlab/ui 114.6.0 → 114.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -25,6 +25,39 @@ and also Vue Router and Nuxt links.
|
|
|
25
25
|
<gl-link href="#foo">Link</gl-link>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
## External link indicator
|
|
29
|
+
|
|
30
|
+
The `show-external-icon` prop displays a "↗" character after the link text to indicate external links.
|
|
31
|
+
This feature is available for **inline**, **UI (default)**, and **meta** variants only.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!-- External link with indicator -->
|
|
35
|
+
<gl-link href="https://kubernetes.io/docs" target="_blank" show-external-icon>
|
|
36
|
+
Kubernetes documentation
|
|
37
|
+
</gl-link>
|
|
38
|
+
<!-- Renders as: Kubernetes documentation ↗ -->
|
|
39
|
+
|
|
40
|
+
<!-- Different variants with external indicator -->
|
|
41
|
+
<gl-link variant="inline" href="https://prometheus.io" target="_blank" show-external-icon>
|
|
42
|
+
Learn more about Prometheus monitoring
|
|
43
|
+
</gl-link>
|
|
44
|
+
|
|
45
|
+
<gl-link variant="meta" href="https://docker.com" target="_blank" show-external-icon>
|
|
46
|
+
Docker Hub
|
|
47
|
+
</gl-link>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**Requirements for the external icon to appear:**
|
|
51
|
+
|
|
52
|
+
- `show-external-icon` prop must be `true`.
|
|
53
|
+
- `href` prop must be provided.
|
|
54
|
+
- `target="_blank"` must be set.
|
|
55
|
+
- Destination domain must be [determined as external](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/b5e4b0b4241455ed0fa45e0f6f5b83a3b76755ff/packages/gitlab-ui/src/directives/safe_link/safe_link.js#L12).
|
|
56
|
+
- Link variant must be `inline`, `meta`, or default (UI).
|
|
57
|
+
|
|
58
|
+
**Note:** The external icon is not available for `mention` or `unstyled` variants as these have
|
|
59
|
+
specific design purposes that don't align with external link indication.
|
|
60
|
+
|
|
28
61
|
## Link type
|
|
29
62
|
|
|
30
63
|
By specifying a value in the `href` prop, a standard link (`<a>`) element will be rendered. To
|
|
@@ -15,6 +15,7 @@ import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/uti
|
|
|
15
15
|
import {
|
|
16
16
|
linkVariantOptions,
|
|
17
17
|
linkVariantInline,
|
|
18
|
+
linkVariantMeta,
|
|
18
19
|
linkVariantUnstyled,
|
|
19
20
|
isVue3,
|
|
20
21
|
} from '../../../utils/constants';
|
|
@@ -130,7 +131,7 @@ export default {
|
|
|
130
131
|
default: null,
|
|
131
132
|
},
|
|
132
133
|
/**
|
|
133
|
-
*
|
|
134
|
+
* Controls ↗ character visibility for external links
|
|
134
135
|
*/
|
|
135
136
|
showExternalIcon: {
|
|
136
137
|
type: Boolean,
|
|
@@ -169,10 +170,11 @@ export default {
|
|
|
169
170
|
isVue3RouterLink() {
|
|
170
171
|
return this.tag === VUE_ROUTER_LINK_TAG && isVue3;
|
|
171
172
|
},
|
|
172
|
-
|
|
173
|
+
shouldShowExternalIcon() {
|
|
174
|
+
const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
|
|
173
175
|
return (
|
|
174
176
|
this.showExternalIcon &&
|
|
175
|
-
this.variant
|
|
177
|
+
allowedVariants.includes(this.variant) &&
|
|
176
178
|
this.href &&
|
|
177
179
|
isExternalURL(this.target, this.href)
|
|
178
180
|
);
|
|
@@ -247,7 +249,7 @@ export default {
|
|
|
247
249
|
{
|
|
248
250
|
disabled: this.disabled,
|
|
249
251
|
active: this.active,
|
|
250
|
-
'gl-link-
|
|
252
|
+
'gl-link-external': this.shouldShowExternalIcon,
|
|
251
253
|
},
|
|
252
254
|
];
|
|
253
255
|
},
|