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

Jump to bottom

feat(pricing-table): add sticky header #8824

Merged
merged 25 commits into from
Jun 17, 2022
Merged

feat(pricing-table): add sticky header #8824

merged 25 commits into from
Jun 17, 2022

Conversation

jkaeser
Copy link
Contributor

@jkaeser jkaeser commented May 12, 2022

Related Ticket(s)

Resolves #8420

Description

Enhances the DDSPricingTable component by making the header sticky on scroll.

Changelog

New

  • Adds sticky header to DDSPricingTable components.

Changed

  • Exposes offset value from StickyHeader utility class via height getter.

jkaeser added 13 commits May 11, 2022 16:53
@jkaeser
feat(pricing-table): establish base fixed header behavior (carbon-des…
46ae134 
…ign-system#8420)
@jkaeser
feat(pricing-table): continue working on fixed header (carbon-design-…
2a9e686 
…system#8420)
@jkaeser
feat(pricing-table): move functionality into pricing table (carbon-de…
1b79efe 
…sign-system#8420)
@jkaeser
feat(pricing-table): create demo content for dev (carbon-design-syste…
e6ac50d 
…m#8420)
@jkaeser
feat(pricing-table): set fixed width on resize (carbon-design-system#…
dd732d0 
…8420)
@jkaeser
feat(pricing-table): incorporate StickyHeader utility (carbon-design-…
a9236c2 
…system#8420)
@jkaeser
feat(pricing-table): fully incorporate StickyHeader utility (carbon-d…
ce72f0b 
…esign-system#8420)
@jkaeser
feat(pricing-table): document utility functions (carbon-design-system…
e344541 
…#8420)
@jkaeser
feat(pricing-table): prevent visual bugs (carbon-design-system#8420)
ada024b
@jkaeser
feat(pricing-table): improve mobile behavior (carbon-design-system#8420)
ee957aa
@jkaeser
feat(pricing-table): prevent CI errors (carbon-design-system#8420)
5ef678d
@jkaeser
feat(pricing-table): properly access class property (carbon-design-sy…
744a600 
…stem#8420)
@jkaeser
feat(pricing-table): add offline mirror for new dependency (carbon-de…
1870354 
…sign-system#8420)
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 12, 2022 •
edited
Loading

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 12, 2022 •
edited
Loading

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 12, 2022 •
edited
Loading

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 12, 2022 •
edited
Loading

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 12, 2022 •
edited
Loading

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@proeung proeung added package: web components Work necessary for the IBM.com Library web components package adopter: AEM used when component or pattern will be used by this adopter feature flag labels May 12, 2022
@jkaeser jkaeser force-pushed the feat/pricing-table-sticky-header-8420 branch from 17057f6 to 2ecaf84 Compare May 13, 2022 12:53
@jkaeser jkaeser force-pushed the feat/pricing-table-sticky-header-8420 branch from 2ecaf84 to 366ca7e Compare May 13, 2022 13:08
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 13, 2022 •
edited
Loading

Deploy preview created for package "React (experimental)":
https://ibmdotcom-react-experimental.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented May 13, 2022 •
edited
Loading

Deploy preview created for package "Web Components (experimental)":
https://ibmdotcom-web-components-experimental.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html

Built with commit: ded0419816af5c0882c84becf9bac12e7cac5d47

@jkaeser jkaeser marked this pull request as ready for review May 13, 2022 13:50
@jkaeser jkaeser requested a review from a team as a code owner May 13, 2022 13:50
@jkaeser jkaeser requested review from Rasubra8 and Gopi916 May 13, 2022 13:50
@RichKummer
Copy link

Rerencing comment above:
https://user-images.githubusercontent.com/15643582/169105643-d1ef8a64-f568-4207-b3b8-7539a1211c59.mov

@jkaeser
Copy link
Contributor Author

jkaeser commented May 18, 2022

Rerencing comment above: https://user-images.githubusercontent.com/15643582/169105643-d1ef8a64-f568-4207-b3b8-7539a1211c59.mov

@RichKummer can you take another look? Should be fixed now.

@RichKummer
Copy link

Note for code freeze: @jwitkowski79 is exploring some design updates to the fixed header

@proeung proeung mentioned this pull request May 26, 2022
Closed
14 tasks
@jwitkowski79
Copy link

jwitkowski79 commented Jun 3, 2022 •
edited
Loading

@jkaeser @Putra Hello! We've resolved the design of the sticky table header and are ready to move forward with this. Details below:

  • When the header is in the sticky state, the table header should expand full width and the border-bottom should be removed.
  • Updated the box-shadow to match the Carbon box-shadow

Screen Shot 2022-06-03 at 9 18 10 AM

Updated design specs: https://ibm.box.com/s/ydxpyl9unhd9x572d4l9hzkva3vomcu0

cc: @RichKummer @oliviaflory

@jkaeser
Copy link
Contributor Author

jkaeser commented Jun 7, 2022

  • When the header is in the sticky state, the table header should expand full width and the border-bottom should be removed.
  • Updated the box-shadow to match the Carbon box-shadow

@jwitkowski79 @RichKummer I updated the fixed header according to the new specifications. Please take a look when you have chance. Thanks!

https://ibmdotcom-web-components-experimental.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8824/index.html?path=/story/components-pricing-table--with-subheaders

@RichKummer RichKummer mentioned this pull request Jun 13, 2022
Closed
@RichKummer
Copy link

@jkaeser - I took a look at the fixed header, it looks like the new styling has been incorporated for the removed horizontal rule and the Carbon box-shadow. I'll let @jwitkowski79 take a second look though.

Percy did catch a few things - I'm wondering if you just need to merge some changes from main? The build seems to rollback an update from #8935 shifting the ToC over to the left:
Screen Shot 2022-06-13 at 4 50 51 PM

@jwitkowski79
Copy link

@jkaeser This looks good! The only thing I was wondering is if we can smooth out the animation a bit more when the fixed sticky header drops in? I think it might need more of an ease in. Let me know if you want to hop into a call to review and discuss!

@jkaeser
Copy link
Contributor Author

jkaeser commented Jun 15, 2022

@jkaeser This looks good! The only thing I was wondering is if we can smooth out the animation a bit more when the fixed sticky header drops in? I think it might need more of an ease in. Let me know if you want to hop into a call to review and discuss!

@jwitkowski79 I added an animation to make the header slide in from the top when it becomes sticky. Let me know if this is along the lines of what you were thinking. Thanks!

@jwitkowski79
Copy link

@jkaeser This looks much better! Thanks!!

@jkaeser jkaeser removed the Needs design approval PRs on feature requests and new components have to get design approval before merge. label Jun 16, 2022
proeung
proeung approved these changes Jun 16, 2022
View reviewed changes
Copy link
Contributor

@proeung proeung left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@kennylam or @IgnacioBecerra Now that we got the design sign-off on this PR. Can we get your review so that this PR can be marked as "Ready to merge"?

IgnacioBecerra
IgnacioBecerra approved these changes Jun 16, 2022
View reviewed changes
Copy link
Contributor

@IgnacioBecerra IgnacioBecerra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, works great!! Thanks @jkaeser!

@IgnacioBecerra IgnacioBecerra added the Ready to merge Label for the pull requests that are ready to merge label Jun 16, 2022
@kodiakhq kodiakhq bot merged commit 40b94f7 into carbon-design-system:main Jun 17, 2022
@jkaeser jkaeser deleted the feat/pricing-table-sticky-header-8420 branch April 14, 2023 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@proeung proeung proeung approved these changes

@jwitkowski79 jwitkowski79 jwitkowski79 approved these changes

@IgnacioBecerra IgnacioBecerra IgnacioBecerra approved these changes

@Rasubra8 Rasubra8 Awaiting requested review from Rasubra8 Rasubra8 is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@Gopi916 Gopi916 Awaiting requested review from Gopi916 Gopi916 is a code owner automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@andy-blum andy-blum Awaiting requested review from andy-blum

@oliviaflory oliviaflory Awaiting requested review from oliviaflory

@kennylam kennylam Awaiting requested review from kennylam

Assignees
No one assigned
Labels
adopter: AEM used when component or pattern will be used by this adopter feature flag package: web components Work necessary for the IBM.com Library web components package Ready to merge Label for the pull requests that are ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Pricing table] Implement table header fixed scroll behavior
6 participants
@jkaeser @ibmdotcom-bot @RichKummer @jwitkowski79 @proeung @IgnacioBecerra