Skip to content

Commit

Permalink
fix: expose avatar inputs as part of card header (#4638)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
The avatar in card header needs to set size
  • Loading branch information
@droshev
droshev committed Feb 11, 2021
1 parent 525018b commit 29a31ea
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 35 deletions.
36 changes: 35 additions & 1 deletion apps/docs/src/app/core/component-docs/card/examples/card-example.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,41 @@ <h2 fd-card-title>Card Title</h2>
<h3>Card header with avatar, subtitle, counter and badge</h3>
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://picsum.photos/id/1018/400" ariaLabel="avatar image" title="avatar image"></fd-avatar>
<fd-avatar image="http://picsum.photos/id/1018/400" circle="true" size="s" ariaLabel="avatar image" title="avatar image"></fd-avatar>
<h2 fd-card-title>Card Title</h2>
<h3 fd-card-subtitle>Card Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
</fd-card-header>
<fd-card-content>
<ul fd-list [noBorder]="true">
<li fd-list-item>
<span fd-list-title>
item 1
</span>
</li>
<li fd-list-item>
<span fd-list-title>
item 2
</span>
</li>
<li fd-list-item>
<span fd-list-title>
item 3
</span>
</li>
<li fd-list-item>
<span fd-list-title>
item 4
</span>
</li>
</ul>
</fd-card-content>
</fd-card>

<h3>Card header with icon avatar, subtitle, counter and badge</h3>
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar glyph="cart" circle="true" size="s" ariaLabel="avatar image" title="avatar image"></fd-avatar>
<h2 fd-card-title>Card Title</h2>
<h3 fd-card-subtitle>Card Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down
14 changes: 7 additions & 7 deletions ...c/app/core/component-docs/carousel/examples/carousel-dynamic-items-example.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card One</h2>
<h3 fd-card-subtitle>Card One Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -53,7 +53,7 @@ <h3 fd-card-subtitle>Card One Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Two Title</h2>
<h3 fd-card-subtitle>Card Two Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -90,7 +90,7 @@ <h3 fd-card-subtitle>Card Two Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Three Title</h2>
<h3 fd-card-subtitle>Card Three Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -127,7 +127,7 @@ <h3 fd-card-subtitle>Card Three Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Four Title</h2>
<h3 fd-card-subtitle>Card Four Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -201,7 +201,7 @@ <h3 fd-card-subtitle>Card Five Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Six Title</h2>
<h3 fd-card-subtitle>Card Six Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -238,7 +238,7 @@ <h3 fd-card-subtitle>Card Six Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Seven Title</h2>
<h3 fd-card-subtitle>Card Seven Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -275,7 +275,7 @@ <h3 fd-card-subtitle>Card Seven Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Eight Title</h2>
<h3 fd-card-subtitle>Card Eight Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down
16 changes: 8 additions & 8 deletions ...ore/component-docs/carousel/examples/carousel-multiple-active-item-example.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card One</h2>
<h3 fd-card-subtitle>Card One Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -41,7 +41,7 @@ <h3 fd-card-subtitle>Card One Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Two Title</h2>
<h3 fd-card-subtitle>Card Two Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -78,7 +78,7 @@ <h3 fd-card-subtitle>Card Two Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Three Title</h2>
<h3 fd-card-subtitle>Card Three Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -115,7 +115,7 @@ <h3 fd-card-subtitle>Card Three Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Four Title</h2>
<h3 fd-card-subtitle>Card Four Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -152,7 +152,7 @@ <h3 fd-card-subtitle>Card Four Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Five Title</h2>
<h3 fd-card-subtitle>Card Five Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -189,7 +189,7 @@ <h3 fd-card-subtitle>Card Five Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Six Title</h2>
<h3 fd-card-subtitle>Card Six Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -226,7 +226,7 @@ <h3 fd-card-subtitle>Card Six Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Seven Title</h2>
<h3 fd-card-subtitle>Card Seven Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down Expand Up @@ -263,7 +263,7 @@ <h3 fd-card-subtitle>Card Seven Subtitle</h3>
<div style="width: 300px; padding: 1rem;">
<fd-card badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://placeimg.com/400/400/nature/4/"></fd-avatar>
<fd-avatar image="http://placeimg.com/400/400/nature/4/" circle="true" size="s"></fd-avatar>
<h2 fd-card-title>Card Eight Title</h2>
<h3 fd-card-subtitle>Card Eight Subtitle</h3>
<span fd-card-counter status="positive">3 of 10</span>
Expand Down
2 changes: 1 addition & 1 deletion ...mponent-docs/fixed-card-layout/examples/default/fixed-card-layout-examples.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ <h2 fd-card-title>Table card</h2>
</ng-container>
<fd-card *fdCardDef badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://picsum.photos/id/1018/400" ariaLabel="avatar image" title="avatar image">
<fd-avatar image="http://picsum.photos/id/1018/400" circle="true" size="s" ariaLabel="avatar image" title="avatar image">
</fd-avatar>
<h2 fd-card-title>Card Title</h2>
<h3 fd-card-subtitle>Card Subtitle</h3>
Expand Down
4 changes: 2 additions & 2 deletions ...ed-card-layout/examples/disabled-drag-drop/fixed-card-layout-disabled-drag.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ <h2 fd-card-title>Table card</h2>
</fd-card>
<fd-card *fdCardDef badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://picsum.photos/id/1018/400" ariaLabel="avatar image" title="avatar image">
<fd-avatar image="http://picsum.photos/id/1018/400" circle="true" size="s" ariaLabel="avatar image" title="avatar image">
</fd-avatar>
<h2 fd-card-title>Card Title</h2>
<h3 fd-card-subtitle>Card Subtitle</h3>
Expand Down Expand Up @@ -291,7 +291,7 @@ <h2 fd-card-title>Table card</h2>
</fd-card>
<fd-card *fdCardDef badge="New" cardType="list">
<fd-card-header>
<fd-avatar image="http://picsum.photos/id/1018/400" ariaLabel="avatar image" title="avatar image">
<fd-avatar image="http://picsum.photos/id/1018/400" circle="true" size="s" ariaLabel="avatar image" title="avatar image">
</fd-avatar>
<h2 fd-card-title>Card Title</h2>
<h3 fd-card-subtitle>Card Subtitle</h3>
Expand Down
14 changes: 1 addition & 13 deletions libs/core/src/lib/card/card-header.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,4 @@
<ng-container *ngIf="_avatar">
<fd-avatar
class="fd-card__avatar"
size="s"
[id]="_avatar.id"
[circle]="true"
[image]="_avatar.image"
[label]="_avatar.abbreviate"
[ariaLabel]="_avatar.ariaLabel"
[ariaLabelledby]="_avatar.ariaLabelledby"
role="presentation"
></fd-avatar>
</ng-container>
<ng-content select="fd-avatar"></ng-content>

<div class="fd-card__header-text">
<!-- Title -->
Expand Down
17 changes: 14 additions & 3 deletions libs/core/src/lib/card/card-header.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import {
Component,
OnInit,
AfterContentInit,
ChangeDetectionStrategy,
ElementRef,
ContentChild,
Input,
HostBinding
HostBinding,
Renderer2
} from '@angular/core';

import { applyCssClass, CssClassBuilder } from '../utils/public_api';
Expand All @@ -19,7 +21,7 @@ import { CardSubtitleDirective } from './card-subtitle.directive';
templateUrl: './card-header.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CardHeaderComponent implements OnInit, CssClassBuilder {
export class CardHeaderComponent implements OnInit, CssClassBuilder, AfterContentInit {
/** @hidden */
@Input()
@HostBinding('attr.tabindex')
Expand All @@ -37,13 +39,22 @@ export class CardHeaderComponent implements OnInit, CssClassBuilder {
_subtitle: CardSubtitleDirective;

/** @hidden */
constructor(private _elementRef: ElementRef<HTMLElement>) {}
constructor(private _elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {}

/** @hidden */
ngOnInit(): void {
this.buildComponentCssClass();
}

/** @hidden */
ngAfterContentInit(): void {
/** Add fd-card__avatar class to fd-avatar */
const avatar = this.elementRef().nativeElement.querySelector('fd-avatar');
if (avatar) {
this.renderer.addClass(avatar, 'fd-card__avatar');
}
}

@applyCssClass
/** @hidden */
buildComponentCssClass(): string[] {
Expand Down

0 comments on commit 29a31ea

Please sign in to comment.