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

[Pricing table] Implement table header fixed scroll behavior #8420

Closed
14 tasks
proeung opened this issue Feb 28, 2022 · 1 comment · Fixed by #8824
Closed
14 tasks

[Pricing table] Implement table header fixed scroll behavior #8420

proeung opened this issue Feb 28, 2022 · 1 comment · Fixed by #8824
Assignees
@jkaeser @IgnacioBecerra
Labels
adopter: AEM used when component or pattern will be used by this adopter dev Needs some dev work DPO Consulting feature flag Needs design approval PRs on feature requests and new components have to get design approval before merge. owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package priority: high

Comments

@proeung
Copy link
Contributor

proeung commented Feb 28, 2022 •
edited
Loading

Engineering info:

User Story

As a [user role below]:
Carbon for ibm.com developer

I need to:
create/change the Pricing table

so that I can:
provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

Acceptance criteria

  • Include README for the web component and corresponding styles
  • Create Web Components styles in styles package
  • Do not create knobs in Storybook that include JSON objects
  • Break out Storybook stories into multiple variation stories, if applicable
  • Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
  • Minimum 80% unit test coverage
  • add the trigger to create the React Wrapper
  • create the React storybook stories and related documentation
  • Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
  • Use the Visual QA checklist to verify design quality
  • Update the e2e test scripts, if needed.
  • Confirm e2e test results have no major errors.
  • A comment is posted in the Prod QA issue ([Pricing table]: Web Components: Prod QA testing of  #8392) when development is finished.
  • The dev complete label is added to the Prod QA issue ([Pricing table]: Web Components: Prod QA testing of  #8392).
@proeung proeung added adopter: AEM used when component or pattern will be used by this adopter dev Needs some dev work DPO Consulting owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package priority: high labels Feb 28, 2022
@jkaeser jkaeser mentioned this issue Apr 6, 2022
Merged
@proeung proeung reopened this Apr 26, 2022
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): establish base fixed header behavior (carbon-des…
84e0c1d 
…ign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): continue working on fixed header (carbon-design-…
fe8c07f 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): temporary commit (carbon-design-system#8420)
623a6d4
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): move functionality into pricing table (carbon-de…
471a7b7 
…sign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): temp content (carbon-design-system#8420)
42be28d
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): temp changes (carbon-design-system#8420)
748b5bd
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): set fixed width on resize (carbon-design-system#…
7c2f759 
…8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): incorporate StickyHeader utility (carbon-design-…
114b6dd 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): fully incorporate StickyHeader utility (carbon-d…
1be29fa 
…esign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): document utility functions (carbon-design-system…
947cbf1 
…#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): prevent visual bugs (carbon-design-system#8420)
52b155d
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): improve mobile behavior (carbon-design-system#8420)
8466059
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): temp dev commit (carbon-design-system#8420)
f4a1e6e
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): continue working on fixed header (carbon-design-…
b05b4d2 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): move functionality into pricing table (carbon-de…
9af54c6 
…sign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): create demo content for dev (carbon-design-syste…
a47348f 
…m#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): set fixed width on resize (carbon-design-system#…
d197a23 
…8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 11, 2022
@jkaeser
feat(pricing-table): incorporate StickyHeader utility (carbon-design-…
e088dcb 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): continue working on fixed header (carbon-design-…
2a9e686 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): move functionality into pricing table (carbon-de…
1b79efe 
…sign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): create demo content for dev (carbon-design-syste…
e6ac50d 
…m#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): set fixed width on resize (carbon-design-system#…
dd732d0 
…8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): incorporate StickyHeader utility (carbon-design-…
a9236c2 
…system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): fully incorporate StickyHeader utility (carbon-d…
ce72f0b 
…esign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): document utility functions (carbon-design-system…
e344541 
…#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): prevent visual bugs (carbon-design-system#8420)
ada024b
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): improve mobile behavior (carbon-design-system#8420)
ee957aa
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): prevent CI errors (carbon-design-system#8420)
5ef678d
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): properly access class property (carbon-design-sy…
744a600 
…stem#8420)
@jkaeser jkaeser mentioned this issue May 12, 2022
Merged
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 12, 2022
@jkaeser
feat(pricing-table): add offline mirror for new dependency (carbon-de…
1870354 
…sign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 13, 2022
@jkaeser
feat(pricing-table): clean up and remove unused methods (carbon-desig…
17057f6 
…n-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 13, 2022
@jkaeser
feat(pricing-table): clean up and remove unused methods (carbon-desig…
2ecaf84 
…n-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 13, 2022
@jkaeser
feat(pricing-table): clean up and remove unused methods (carbon-desig…
366ca7e 
…n-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 16, 2022
@jkaeser
feat(pricing-table): prevent animation jitters (carbon-design-system#…
477f0a2 
…8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 16, 2022
@jkaeser
feat(pricing-table): revert story changes (carbon-design-system#8420)
9cf191c
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 17, 2022
@jkaeser
feat(pricing-table): define buffer value (carbon-design-system#8420)
3a4b09a
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 18, 2022
@jkaeser
feat(pricing-table): reduce space above CTA when sticky (carbon-desig…
c1b6a52 
…n-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 18, 2022
@jkaeser
feat(pricing-table): reset intersection observers on resize (carbon-d…
2d37724 
…esign-system#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue May 18, 2022
@jkaeser
feat(pricing-table): avoid CI issues (carbon-design-system#8420)
eb4320e
@proeung proeung added the Needs design approval PRs on feature requests and new components have to get design approval before merge. label May 26, 2022
@proeung
Copy link
Contributor Author

proeung commented May 26, 2022

Marking this issue as "on-hold" pending additional design exploration from @jwitkowski79 and @RichKummer (see - #8824). This feature might not be able to get in for the v1.35.0 code freeze period.

jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Jun 3, 2022
@jkaeser
feat(pricing-table): make sticky header full width (carbon-design-sys…
ba9fe1f 
…tem#8420)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Jun 15, 2022
@jkaeser
feat(pricing-table): animate sticky header slide in (carbon-design-sy…
c6ed441 
…stem#8420)
@kodiakhq kodiakhq bot closed this as completed in #8824 Jun 17, 2022
kodiakhq bot pushed a commit that referenced this issue Jun 17, 2022
@jkaeser
feat(pricing-table): add sticky header (#8824)
40b94f7 
### 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.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@proeung proeung reopened this Jun 17, 2022
@proeung proeung closed this as completed Jun 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jkaeser jkaeser

@IgnacioBecerra IgnacioBecerra

Labels
adopter: AEM used when component or pattern will be used by this adopter dev Needs some dev work DPO Consulting feature flag Needs design approval PRs on feature requests and new components have to get design approval before merge. owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package priority: high
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(pricing-table): add sticky header jkaeser/carbon-for-ibm-dotcom
3 participants
@proeung @jkaeser @IgnacioBecerra