docs(material/card): add more examples #23247

rameshworsht · 2021-07-26T23:10:44Z

Introduce more examples with actions, footer, image size, and subtitles.

Demo: https://stackblitz.com/edit/angular-ivy-zanf7t?file=src%2Fmain.ts

Close Issue: #22844

google-cla · 2021-07-26T23:10:51Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

What to do if you already signed the CLA

Individual signers

It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

rameshworsht · 2021-07-26T23:17:00Z

@googlebot I signed it!

crisbeto · 2021-08-01T09:46:37Z

src/components-examples/material/card/card-footer/card-footer-example.html

+    <button mat-button>SHARE</button>
+  </mat-card-actions>
+  <mat-card-footer>
+    <!-- <mat-progress-bar mode="indeterminate"></mat-progress-bar> -->


Should this be removed?

crisbeto · 2021-08-01T09:46:46Z

src/components-examples/material/card/card-footer/card-footer-example.html

+    <p>This card indeterminates progress bar and divider.</p>
+    <p>{{ longText }}</p>
+  </mat-card-content>
+  <!-- <mat-divider [inset]="true"></mat-divider> -->


Should this be removed?

crisbeto · 2021-08-01T09:47:05Z

src/components-examples/material/card/card-footer/card-footer-example.html

+  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  <mat-card-title>Shiba Inu</mat-card-title>
+  <mat-card-content>
+    <p>This card indeterminates progress bar and divider.</p>


This says that the card has a progress bar and a divider, but they're both commented out.

Introduce more examples with actions, footer, image size, and subtitles.

rameshworsht · 2021-08-02T00:08:42Z

@crisbeto I have added the divider and progress-bar for the footer example. Thank you for reviewing my pr. 🙏🏼

crisbeto · 2021-08-02T14:24:53Z

src/components-examples/material/card/card-footer/card-footer-example.html

+  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+  <mat-card-title>Shiba Inu</mat-card-title>
+  <mat-card-content>
+    <p>This card has divider and indeterminates progress as footer</p>


indeterminates -> indeterminate

crisbeto · 2021-08-02T14:30:53Z

src/components-examples/material/card/card-footer/card-footer-example.html

+    <p>This card has divider and indeterminates progress as footer</p>
+    <p>{{ longText }}</p>
+  </mat-card-content>
+  <mat-divider [inset]="true"></mat-divider>


[inset]="true" can be simplified to inset.

crisbeto · 2021-08-02T14:31:42Z

src/components-examples/material/card/card-media-size/card-media-size-example.html

@@ -0,0 +1,49 @@
+<!-- Cards with media area -->
+<h2>Cards with media area</h2>


This header should be removed since the docs add a header separately.

crisbeto · 2021-08-02T14:32:11Z

src/components-examples/material/card/card-media-size/card-media-size-example.html

+    {{longText}}
+  </mat-card-content>
+</mat-card>
+<br/>


The cards should have a margin-bottom instead of using br for spacing.

remove br and add margin and clean up

crisbeto

LGTM

* docs(material/card): add more examples Introduce more examples with actions, footer, image size, and subtitles. * docs(material/card): add the divider and progress bar for footer * docs(material/card): incorporate feedback remove br and add margin and clean up (cherry picked from commit dc9a905)

angular-automatic-lock-bot · 2021-10-01T00:02:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

rameshworsht requested a review from andrewseguin as a code owner July 26, 2021 23:10

google-cla bot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label Jul 26, 2021

google-cla bot added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jul 26, 2021

rameshworsht force-pushed the docs/card/examples-22844 branch 2 times, most recently from 3371667 to e87c6ac Compare July 27, 2021 00:10

crisbeto reviewed Aug 1, 2021

View reviewed changes

rameshworsht added 2 commits August 1, 2021 15:15

docs(material/card): add more examples

0da7125

Introduce more examples with actions, footer, image size, and subtitles.

docs(material/card): add the divider and progress bar for footer

b274c19

rameshworsht force-pushed the docs/card/examples-22844 branch from 2704c94 to b274c19 Compare August 1, 2021 19:15

crisbeto reviewed Aug 2, 2021

View reviewed changes

docs(material/card): incorporate feedback

d9e6c89

remove br and add margin and clean up

rameshworsht force-pushed the docs/card/examples-22844 branch from 7213c05 to d9e6c89 Compare August 2, 2021 17:16

crisbeto approved these changes Aug 5, 2021

View reviewed changes

crisbeto added docs This issue is related to documentation merge safe P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Aug 5, 2021

crisbeto added the action: merge The PR is ready for merge by the caretaker label Aug 30, 2021

mmalerba merged commit dc9a905 into angular:master Aug 31, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 1, 2021

		@@ -0,0 +1,49 @@
		<!-- Cards with media area -->
		<h2>Cards with media area</h2>

docs(material/card): add more examples #23247

docs(material/card): add more examples #23247

Uh oh!

Conversation

rameshworsht commented Jul 26, 2021

Uh oh!

google-cla bot commented Jul 26, 2021

What to do if you already signed the CLA

Individual signers

Corporate signers

Uh oh!

rameshworsht commented Jul 26, 2021

Uh oh!

crisbeto Aug 1, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Aug 1, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Aug 1, 2021

Choose a reason for hiding this comment

Uh oh!

rameshworsht commented Aug 2, 2021

Uh oh!

crisbeto Aug 2, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Aug 2, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Aug 2, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto Aug 2, 2021

Choose a reason for hiding this comment

Uh oh!

crisbeto left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Oct 1, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants