Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(card): added text wrapping to cta text #7451

Merged
merged 16 commits into from
Nov 8, 2021
Merged

fix(card): added text wrapping to cta text #7451

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
02d3279
chore(card-group): fixed card border-top and grid mode transition
BrunnoM7 Oct 15, 2021
0ac183b
Merge branch 'master' of https://github.com/carbon-design-system/carb…
BrunnoM7 Oct 18, 2021
93d9716
fix(card): cta text wrap
BrunnoM7 Oct 20, 2021
241d126
fix(card): revert scss applied solution via props
BrunnoM7 Oct 22, 2021
74f9958
fix(card): fixed padding-right on CTA text
BrunnoM7 Oct 25, 2021
237e451
Merge branch 'master' into fix/card-cta-text-wrap
shixiedesign Oct 28, 2021
d4ec50a
Merge branch 'master' of https://github.com/carbon-design-system/carb…
BrunnoM7 Nov 3, 2021
0663a64
fix(card): revert changes to card feature
BrunnoM7 Nov 4, 2021
dba7948
Revert "chore(card-group): fixed card border-top and grid mode transi…
BrunnoM7 Nov 4, 2021
1119ee2
Merge branch 'master' of https://github.com/carbon-design-system/carb…
BrunnoM7 Nov 4, 2021
eabafba
fix(card): fixed icon placement on react feature card
BrunnoM7 Nov 4, 2021
7a36262
Merge branch 'master' into fix/card-cta-text-wrap
jeffchew Nov 5, 2021
1079d57
Merge branch 'master' into fix/card-cta-text-wrap
kodiakhq[bot] Nov 5, 2021
9f91ad4
Merge branch 'master' into fix/card-cta-text-wrap
kodiakhq[bot] Nov 5, 2021
fc915d4
Merge branch 'master' into fix/card-cta-text-wrap
kodiakhq[bot] Nov 5, 2021
15d0a52
Merge branch 'master' into fix/card-cta-text-wrap
kodiakhq[bot] Nov 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/styles/scss/components/card/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,14 @@
}
}

:host(#{$dds-prefix}-card-footer) a,
:host(#{$dds-prefix}-card-cta-footer) a,
:host(#{$dds-prefix}-card-in-card-footer) a {
@include carbon--breakpoint('md') {
padding-right: $carbon--spacing-07;
}
}

:host(#{$dds-prefix}-feature-cta-footer) a {
svg,
::slotted(svg[slot='icon']) {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/scss/components/link-with-icon/_link-with-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
.#{$prefix}--link-with-icon__container,
:host(#{$dds-prefix}-callout-link-with-icon),
:host(#{$dds-prefix}-card-cta-footer),
:host(#{$dds-prefix}-card-footer),
:host(#{$dds-prefix}-link-with-icon),
:host(#{$dds-prefix}-link-list-item),
:host(#{$dds-prefix}-link-list-item-cta),
Expand Down
12 changes: 11 additions & 1 deletion packages/web-components/src/components/card/card-footer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,12 @@ class DDSCardFooter extends DDSLinkWithIcon {
@property({ attribute: 'parent-href', reflect: true })
parentHref?: string;

/**
* Positions the icon inline with text when `true`
*/
@property({ type: Boolean })
iconInline = true;

/**
* The slot in parent `<dds-card>`.
*/
Expand All @@ -112,11 +118,15 @@ class DDSCardFooter extends DDSLinkWithIcon {
this.shadowRoot?.querySelector(`a`)?.removeAttribute('aria-label');
}

const { iconPlacement, _staticNode: staticNode, _linkNode: linkNode } = this;
const { iconInline, iconPlacement, _staticNode: staticNode, _linkNode: linkNode } = this;
const targetNode = linkNode ?? staticNode;
targetNode!.classList.add(`${prefix}--card__footer`);
targetNode!.classList.add(`${ddsPrefix}-ce--card__footer`);
targetNode!.classList.toggle(`${prefix}--card__footer__icon-left`, iconPlacement === ICON_PLACEMENT.LEFT);

if (iconInline && iconPlacement === ICON_PLACEMENT.RIGHT) {
targetNode!.classList.add(`${prefix}--link-with-icon--inline-icon`);
}
}

static get stableSelector() {
Expand Down