initial draft of actionIcon prop for Card component #1479

kalebjdavenport · 2022-07-15T12:58:17Z

Description

This is an initial draft of actionIcon property on the <Card /> component. The commit tests are not passing because I have not finished setting up .prettierrc.

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 · 2022-07-15T12:58:19Z

Thanks for the pull request, @TheEarlyNerd! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

supporting documentation
Open edX discussion forum threads
timeline information ("this must be merged by XX date", and why that is)
partner information ("this is a course on edx.org")
any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

⚠️ We can't start reviewing your pull request until you've submitted a signed contributor agreement or indicated your institutional affiliation. Please see the CONTRIBUTING file for more information. If you've signed an agreement in the past, you may need to re-sign. See The New Home of the Open edX Codebase for details.

netlify · 2022-07-15T12:58:22Z

✅ Deploy Preview for paragon-openedx ready!

Name	Link
🔨 Latest commit	`304143b`
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/62f1c0085e3c110008785c54
😎 Deploy Preview	https://deploy-preview-1479--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.

natabene · 2022-07-26T17:58:20Z

Ugh, our bot tagged this as an OSPR due to the ongoing issue with CLA list. Once you hear from me about the CLA, this will be ok to merge. Removing the OSPR tag for now.

codecov · 2022-08-05T22:20:56Z

Codecov Report

Merging #1479 (6685dac) into master (dfc009c) will decrease coverage by 0.12%.
The diff coverage is 44.44%.

❗ Current head 6685dac differs from pull request most recent head 304143b. Consider uploading reports for the commit 304143b to get more accurate results

@@            Coverage Diff             @@
##           master    #1479      +/-   ##
==========================================
- Coverage   91.44%   91.32%   -0.13%     
==========================================
  Files         205      206       +1     
  Lines        3483     3492       +9     
  Branches      816      818       +2     
==========================================
+ Hits         3185     3189       +4     
- Misses        283      288       +5     
  Partials       15       15

Impacted Files	Coverage Δ
src/Card/CardActionIcon.jsx	`37.50% <37.50%> (ø)`
src/Card/index.jsx	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

adamstankiewicz · 2022-08-09T02:07:11Z

src/Card/Card.scss

@@ -86,6 +86,13 @@
  }
 }

+.pgn__card-close-container {


It may make sense to make the class name more generic here, e.g. .pgn__card__action-icon-container, since this could represent more than just a close icon button.

adamstankiewicz · 2022-08-09T02:10:01Z

src/Card/CardActionIcon.jsx

+        <div
+          className={classNames(
+            className,
+            'd-flex flex-wrap pgn__card-close-container',


Inside of Paragon components, we should avoid using CSS utility classes from Bootstrap as they usually include !important which hinders theming of the component; should a consumer want to override the component styles, having !important here could make that difficult. See this ADR for more details.

adamstankiewicz · 2022-08-09T02:18:05Z

src/Card/CardActionIcon.jsx

+          <IconButton
+            src={MoreVert}
+            iconAs={Icon}
+            alt="See more"


Paragon support i118n now, so we should avoid hardcoding any English strings. Let's use react-intl here to render a translated message instead (docs).

adamstankiewicz · 2022-08-09T02:19:26Z

src/Card/CardActionIcon.jsx

+            variant={variant}
+            invertColors={variant === 'dark'}
+            isActive={isActive}
+            className="mr-2"


Avoid CSS utility class

adamstankiewicz · 2022-08-09T02:19:33Z

src/Card/CardActionIcon.jsx

+      <div
+        className={classNames(
+          className,
+          'd-flex flex-wrap pgn__card-close-container',


Avoid CSS utility class

adamstankiewicz · 2022-08-09T02:19:43Z

src/Card/CardActionIcon.jsx

+          variant={variant}
+          invertColors={variant === 'dark'}
+          isActive={isActive}
+          className="mr-2"


Avoid CSS utility class

adamstankiewicz · 2022-08-09T13:13:26Z

src/Card/index.jsx

@@ -28,7 +31,10 @@ const Card = React.forwardRef(({
      })}
      ref={ref}
      tabIndex={isClickable ? '0' : '-1'}
-    />
+    >
+      {actionIcon ? <CardActionIcon actionIcon={actionIcon} variant="dark" /> : undefined}


[curious] I'm wondering if it would make sense to have the consumer render a Card.ActionIcon sub-component in the children of Card to render this component, rather than relying on an actionIcon prop at the top-level Card component to be more in line with the other sub-components part of Card, e.g.

<Card> <Card.ActionIcon /> </Card>

adamstankiewicz · 2022-08-09T13:46:56Z

src/Card/CardActionIcon.jsx

+    isActive,
+    variant,
+  }, ref) => {
+    if (actionIcon === 'overflow') {


Hmm, I feel CardActionIcon could probably be implemented in a bit more flexible way, that would allow consumers to customize it for any IconButton icon for the intended use case.

I'm thinking we could treat CardActionIcon essentially as a pass-thru component to IconButton, but with the extra styles to correctly position it in the Card, where Card.ActionIcon would take pass (?) of its props down to the underlying IconButton, perhaps with restrictions on which variants are valid for Card.ActionIcon.

With Card.ActionIcon as a sub-component, in theory, it could then be wrapped / composed by OverlayTrigger to optionally add a tooltip/popover to it., if needed.

<Card> <Card.ActionIcon src={Close} alt="Close" variant="dark" /> </Card>

Just a thought. Curious to hear your thoughts on how to make this a bit more flexible to support more use cases (e.g., using different icons, changing the IconButton variant, opting in to using a ModalPopup or Tooltip alongside the Card.ActionIcon, etc.).

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Jul 15, 2022

natabene removed the open-source-contribution PR author is not from Axim or 2U label Jul 26, 2022

kalebjdavenport force-pushed the kaleb/1406-create-a-saveforlater-variant-of-the-card-component-engineering branch from ea54faa to 48d2baf Compare August 5, 2022 22:20

kalebjdavenport marked this pull request as ready for review August 5, 2022 22:22

kalebjdavenport requested a review from adamstankiewicz August 5, 2022 22:23

kalebjdavenport force-pushed the kaleb/1406-create-a-saveforlater-variant-of-the-card-component-engineering branch 2 times, most recently from b981523 to 3027215 Compare August 6, 2022 22:41

feanil mentioned this pull request Aug 8, 2022

[GH Request] CLA list verification for whuang1202 bilaltahir21 TheEarlyNerd openedx/axim-engineering#390

Closed

kalebjdavenport force-pushed the kaleb/1406-create-a-saveforlater-variant-of-the-card-component-engineering branch 4 times, most recently from 0f2b635 to 0b67220 Compare August 9, 2022 01:42

feat: added card actionIcon prop with 'dismiss' and 'overflow'

304143b

kalebjdavenport force-pushed the kaleb/1406-create-a-saveforlater-variant-of-the-card-component-engineering branch from 0b67220 to 304143b Compare August 9, 2022 02:01

adamstankiewicz reviewed Aug 9, 2022

View reviewed changes

kalebjdavenport closed this Jan 27, 2023

adamstankiewicz deleted the kaleb/1406-create-a-saveforlater-variant-of-the-card-component-engineering branch January 27, 2023 21:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

initial draft of actionIcon prop for Card component #1479

initial draft of actionIcon prop for Card component #1479

kalebjdavenport commented Jul 15, 2022

openedx-webhooks commented Jul 15, 2022

netlify bot commented Jul 15, 2022 •

edited

Loading

natabene commented Jul 26, 2022

codecov bot commented Aug 5, 2022 •

edited

Loading

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

adamstankiewicz Aug 9, 2022

initial draft of actionIcon prop for Card component #1479

initial draft of actionIcon prop for Card component #1479

Conversation

kalebjdavenport commented Jul 15, 2022

Description

Deploy Preview

Merge Checklist

Post-merge Checklist

openedx-webhooks commented Jul 15, 2022

netlify bot commented Jul 15, 2022 • edited Loading

✅ Deploy Preview for paragon-openedx ready!

natabene commented Jul 26, 2022

codecov bot commented Aug 5, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Jul 15, 2022 •

edited

Loading

codecov bot commented Aug 5, 2022 •

edited

Loading