[BD-46] fix: stretch the message block to the full width #2219

monteri · 2023-04-24T09:36:09Z

Description

Add stretching the message block to the full width

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

openedx-webhooks · 2023-04-24T09:36:14Z

Thanks for the pull request, @monteri!

When this pull request is ready, tag your edX technical lead.

netlify · 2023-04-24T09:36:20Z

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a07db74`
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/644a92aa8f04d50008aab38e
😎 Deploy Preview	https://deploy-preview-2219--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

codecov · 2023-04-24T09:49:12Z

Codecov Report

Patch and project coverage have no change.

Comparison is base (e6b1f7a) 91.07% compared to head (e845a39) 91.07%.

❗ Current head e845a39 differs from pull request most recent head a07db74. Consider uploading reports for the commit a07db74 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2219   +/-   ##
=======================================
  Coverage   91.07%   91.07%           
=======================================
  Files         234      234           
  Lines        4122     4122           
  Branches      981      981           
=======================================
  Hits         3754     3754           
  Misses        361      361           
  Partials        7        7

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

adamstankiewicz · 2023-04-24T11:42:36Z

src/Card/Card.scss

@@ -422,6 +422,8 @@ a .pgn__card {
  border-radius: 0 0 .375rem .375rem;

  .pgn__card-status__message-content {
+    width: 100%;


Glad this is a simple fix. FWIW, flex-grow: 1; here would also do the trick, and may make a bit more sense given this element doesn't actually take up 100% of the parent's width (i.e., it grows to take up whatever space is remaining after the space taken up by the icon).

Yes, I checked this also work fine. Don't know whether there will be difference in some cases? Just curious. I replaced to flex-grow: 1;

adamstankiewicz · 2023-04-24T11:46:01Z

src/Card/Card.scss

@@ -422,6 +422,8 @@ a .pgn__card {
  border-radius: 0 0 .375rem .375rem;


It looks like the padding used for Card.Status is a bit more than the padding used for the other Card subcomponents like Card.Footer and Card.Section (1.5rem vs. 1.25rem respectively). Should the padding above (i.e., padding: 1.5rem;) be using the $card-spacer-x and/or $card-spacer-y variables to ensure the padding is consistent?

I tested with $card-spacer-x and $card-spacer-y and it looks good. I agree with your comment. Worth noting that it is important to hold the logic behind spacings and sizes in the component especially in such big as Card, Datatable etc. Then it is easier to extend and modify for Paragon users.

adamstankiewicz · 2023-04-24T11:51:27Z

src/Card/Card.scss

@@ -422,6 +422,8 @@ a .pgn__card {
  border-radius: 0 0 .375rem .375rem;


[curious] Should we be using the $card-border-radius SCSS variable here to be consistent with border radius throughout the Card (sub-)components?

Yes, it makes sense, updated

openedx-webhooks · 2023-04-28T01:22:05Z

@monteri 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

edx-semantic-release · 2023-04-28T01:36:31Z

🎉 This PR is included in version 20.32.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

edx-semantic-release · 2023-05-15T08:20:36Z

🎉 This PR is included in version 21.0.0-alpha.25 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix: stretch the message block to the full width

e845a39

openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Apr 24, 2023

monteri requested review from viktorrusakov, PKulkoRaccoonGang and adamstankiewicz April 24, 2023 09:37

monteri mentioned this pull request Apr 24, 2023

Card.Status does not quite support an ActionRow in its children #2214

Closed

1 task

adamstankiewicz reviewed Apr 24, 2023

View reviewed changes

viktorrusakov linked an issue Apr 24, 2023 that may be closed by this pull request

Card.Status does not quite support an ActionRow in its children #2214

Closed

1 task

fix: PR comment update

a07db74

adamstankiewicz approved these changes Apr 28, 2023

View reviewed changes

adamstankiewicz merged commit 5acea87 into openedx:master Apr 28, 2023
9 checks passed

edx-semantic-release added the released label Apr 28, 2023

edx-semantic-release added the released on @alpha label May 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BD-46] fix: stretch the message block to the full width #2219

[BD-46] fix: stretch the message block to the full width #2219

monteri commented Apr 24, 2023 •

edited

openedx-webhooks commented Apr 24, 2023

netlify bot commented Apr 24, 2023 •

edited

codecov bot commented Apr 24, 2023 •

edited

adamstankiewicz Apr 24, 2023

monteri Apr 27, 2023

adamstankiewicz Apr 24, 2023

monteri Apr 27, 2023 •

edited

adamstankiewicz Apr 24, 2023

monteri Apr 27, 2023

openedx-webhooks commented Apr 28, 2023

edx-semantic-release commented Apr 28, 2023

edx-semantic-release commented May 15, 2023

		@@ -422,6 +422,8 @@ a .pgn__card {
		border-radius: 0 0 .375rem .375rem;

[BD-46] fix: stretch the message block to the full width #2219

[BD-46] fix: stretch the message block to the full width #2219

Conversation

monteri commented Apr 24, 2023 • edited

Description

Deploy Preview

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Apr 24, 2023

netlify bot commented Apr 24, 2023 • edited

✅ Deploy Preview for paragon-openedx ready!

codecov bot commented Apr 24, 2023 • edited

Codecov Report

adamstankiewicz Apr 24, 2023

Choose a reason for hiding this comment

monteri Apr 27, 2023

Choose a reason for hiding this comment

adamstankiewicz Apr 24, 2023

Choose a reason for hiding this comment

monteri Apr 27, 2023 • edited

Choose a reason for hiding this comment

adamstankiewicz Apr 24, 2023

Choose a reason for hiding this comment

monteri Apr 27, 2023

Choose a reason for hiding this comment

openedx-webhooks commented Apr 28, 2023

edx-semantic-release commented Apr 28, 2023

edx-semantic-release commented May 15, 2023

monteri commented Apr 24, 2023 •

edited

netlify bot commented Apr 24, 2023 •

edited

codecov bot commented Apr 24, 2023 •

edited

monteri Apr 27, 2023 •

edited