diff --git a/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png b/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png index 887268d79953..0bb4e76c4a78 100644 Binary files a/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png and b/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png index c104f7c53fea..415505bd9e6d 100644 Binary files a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png index 4d79011c1e46..8fdc10e6095a 100644 Binary files a/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png index 69c2ac16ed57..7dcab0e0c688 100644 Binary files a/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png b/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png index cb91549f2838..6db6415d41e3 100644 Binary files a/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png and b/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index 47c7c08d55cd..6a0dc0a7a631 100644 Binary files a/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index bb0618a8e544..958f9c3c41b1 100644 Binary files a/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index d879afde9c2c..0afcc35c786d 100644 Binary files a/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index d43c6572c29a..c43e22c13bdd 100644 Binary files a/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index 9e7d767e4c2f..0dd70ad469e5 100644 Binary files a/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png index e9023ac71da8..637be4d2b9e3 100644 Binary files a/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml b/__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml index 8452622c55ce..86e831fbae00 100644 --- a/__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml @@ -18,4 +18,9 @@ - link "External" - link "Show Icon" - link "(Default) True" - - link "False" \ No newline at end of file + - link "False" + - link "Wrap" + - link "(Default) False" + - link "True [Multiline]" + - link "Examples" + - link "Variant Inline" \ No newline at end of file diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx index 4b33c1013874..0d6ee1d50c69 100644 --- a/packages/components/src/components/link/link.lite.tsx +++ b/packages/components/src/components/link/link.lite.tsx @@ -29,7 +29,8 @@ export default function DBLink(props: DBLinkProps) { data-size={props.size} data-hide-icon-trailing={getHideProp(props.showIcon ?? true)} data-variant={props.variant} - data-content={props.content || 'internal'}> + data-content={props.content || 'internal'} + data-wrap={getBooleanAsString(props.wrap)}> {props.text} diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss index 5dd0b8fc670a..cf1acfa5009b 100644 --- a/packages/components/src/components/link/link.scss +++ b/packages/components/src/components/link/link.scss @@ -18,7 +18,9 @@ } &[data-content="internal"] { - @include icons.set-icon("arrow_right", "after"); + &:not([data-variant="inline"]) { + @include icons.set-icon("arrow_right", "after"); + } &:not([data-hide-icon-trailing="true"])::after { vertical-align: top; @@ -26,7 +28,9 @@ } &[data-content="external"] { - @include icons.set-icon("arrow_up_right", "after"); + &:not([data-variant="inline"]) { + @include icons.set-icon("arrow_up_right", "after"); + } } &[data-content="internal"], diff --git a/packages/components/src/components/link/model.ts b/packages/components/src/components/link/model.ts index 8f6a4d5bb756..5a893c189994 100644 --- a/packages/components/src/components/link/model.ts +++ b/packages/components/src/components/link/model.ts @@ -5,10 +5,11 @@ import { GlobalState, LinkProps, ShowIconProps, - TextProps + TextProps, + WrapProps } from '../../shared/model'; -export const LinkVariantList = ['adaptive', 'brand'] as const; +export const LinkVariantList = ['adaptive', 'brand', 'inline'] as const; export type LinkVariantType = (typeof LinkVariantList)[number]; export const LinkSizeList = ['medium', 'small'] as const; @@ -37,7 +38,8 @@ export type DBLinkProps = DBLinkDefaultProps & ClickEventProps & LinkProps & ShowIconProps & - TextProps; + TextProps & + WrapProps; export type DBLinkDefaultState = {}; diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts index 8662fdf53b3f..807e78df61fd 100644 --- a/packages/components/src/components/navigation-item/model.ts +++ b/packages/components/src/components/navigation-item/model.ts @@ -10,7 +10,8 @@ import { NavigationBehaviorState, ShowIconProps, TextProps, - WidthProps + WidthProps, + WrapProps } from '../../shared/model'; import { NavigationItemSafeTriangle } from '../../utils/navigation'; @@ -35,11 +36,6 @@ export type DBNavigationItemDefaultProps = { * This is for mobile navigation only, if it is set the sub-navigation is a static overlay */ subNavigationExpanded?: boolean | string; - - /** - * Determines whether the text should wrap when its parent container is too small, preventing overflow. - */ - wrap?: boolean | string; }; export type DBNavigationItemProps = DBNavigationItemDefaultProps & @@ -47,6 +43,7 @@ export type DBNavigationItemProps = DBNavigationItemDefaultProps & ClickEventProps & IconProps & WidthProps & + WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps; diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts index 09818de36fe2..f9bbfac7c2b0 100644 --- a/packages/components/src/shared/model.ts +++ b/packages/components/src/shared/model.ts @@ -184,6 +184,13 @@ export type OverflowProps = { overflow?: boolean | string; }; +export type WrapProps = { + /** + * Determines whether the text should wrap when its parent container is too small, preventing overflow. + */ + wrap?: boolean | string; +} + export const OrientationList = ['horizontal', 'vertical'] as const; export type OrientationType = (typeof OrientationList)[number]; export type OrientationProps = { diff --git a/packages/components/src/styles/internal/_link-components.scss b/packages/components/src/styles/internal/_link-components.scss index 48a796b53e43..203b1b134480 100644 --- a/packages/components/src/styles/internal/_link-components.scss +++ b/packages/components/src/styles/internal/_link-components.scss @@ -6,7 +6,10 @@ %db-link-height { display: inline-block; - block-size: variables.$db-sizing-sm; + + &:not([data-wrap="true"]) { + block-size: variables.$db-sizing-sm; + } } %db-link-default-color { @@ -42,7 +45,7 @@ text-decoration-thickness: helpers.px-to-rem($pxValue: 1); text-decoration-line: underline; - &:not([data-variant="inline"]) { + &:not(:is([data-wrap="true"], [data-variant="inline"])) { white-space: nowrap; } diff --git a/showcases/angular-showcase/src/app/components/link/link.component.html b/showcases/angular-showcase/src/app/components/link/link.component.html index 35d43944f1eb..d2c5dccaa526 100644 --- a/showcases/angular-showcase/src/app/components/link/link.component.html +++ b/showcases/angular-showcase/src/app/components/link/link.component.html @@ -17,6 +17,7 @@ [size]="exampleProps?.size" [content]="exampleProps?.content" [showIcon]="exampleProps?.showIcon" + [wrap]="exampleProps?.wrap" >{{ exampleName }} diff --git a/showcases/react-showcase/src/components/link/index.tsx b/showcases/react-showcase/src/components/link/index.tsx index 71a1b4730bf0..3e02e11ba99a 100644 --- a/showcases/react-showcase/src/components/link/index.tsx +++ b/showcases/react-showcase/src/components/link/index.tsx @@ -12,7 +12,8 @@ const getLink = ({ size, content, children, - showIcon + showIcon, + wrap }: DBLinkProps) => ( + showIcon={showIcon} + wrap={wrap}> {children} ); diff --git a/showcases/shared/link.json b/showcases/shared/link.json index 2468cfefa5c6..c9a757433ff6 100644 --- a/showcases/shared/link.json +++ b/showcases/shared/link.json @@ -116,5 +116,37 @@ } } ] + }, + { + "name": "Wrap", + "examples": [ + { + "name": "(Default) False", + "props": { + "href": "#", + "wrap": false + } + }, + { + "name": "True [Multiline]", + "style": { "width": "2ch" }, + "props": { + "href": "#", + "wrap": true + } + } + ] + }, + { + "name": "Examples", + "examples": [ + { + "name": "Variant Inline", + "props": { + "href": "#", + "variant": "inline" + } + } + ] } ] diff --git a/showcases/vue-showcase/src/components/link/Link.vue b/showcases/vue-showcase/src/components/link/Link.vue index 9ed20f30f09e..e235e648f355 100644 --- a/showcases/vue-showcase/src/components/link/Link.vue +++ b/showcases/vue-showcase/src/components/link/Link.vue @@ -16,6 +16,7 @@ import DefaultComponent from "../DefaultComponent.vue"; :size="exampleProps?.size" :content="exampleProps?.content" :showIcon="exampleProps?.showIcon" + :wrap="exampleProps?.wrap" > {{ exampleName }}