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

Component: Create the MVP animation / fade utility #4281

Closed
4 tasks
RobertaJHahn opened this issue Oct 21, 2020 · 1 comment
Closed
4 tasks

Component: Create the MVP animation / fade utility #4281

RobertaJHahn opened this issue Oct 21, 2020 · 1 comment
Assignees
@IgnacioBecerra
Labels
dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package package: web components Work necessary for the IBM.com Library web components package priority: medium
Milestone
Sprint 21-01

Comments

@RobertaJHahn
Copy link

RobertaJHahn commented Oct 21, 2020 •
edited
Loading

User Story

As a [user role below]:
IBM.com Library developer

I need to:
create the animation / fade component

so that I can:
provide the ibm.com adopter developers with a utility that will enable them to include animation in the ibm.com web pages they build

Additional information

Acceptance criteria

  • Include README for the web component and corresponding styles
  • Minimum 80% unit test coverage
  • Add this feature to the React NextJS test page for testing
  • A comment is posted in the Prod QA issue, tagging Praveen when development is finished
@RobertaJHahn RobertaJHahn added dev Needs some dev work package: utilities Work necessary for the Carbon for IBM.com utilities package labels Oct 21, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-22 milestone Oct 21, 2020
@RobertaJHahn RobertaJHahn mentioned this issue Nov 9, 2020
Closed
5 tasks
@RobertaJHahn RobertaJHahn changed the title Utility: Create the animation / fade utility Utility: Create the MVP animation / fade utility Nov 18, 2020
@jeffchew
Copy link
Member

jeffchew commented Dec 1, 2020

Look into using Intersection Observer API for this.

@IgnacioBecerra IgnacioBecerra mentioned this issue Dec 3, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Jan 14, 2021
@IgnacioBecerra
feat(fade-in-out): introducing new components (#4608)
0b6a05a 
### Related Ticket(s)
#4281

### Description

Utility made for adopters that will enable them to include fade in/out animations for the ibm.com web pages they build.

`fadeInOut` also includes parameter of 
`keepAnimation`: to define whether the animation persists after the first activation (defaults to `true`)

`fadeInOut` also supports custom delay duration by setting `--#{$dds-prefix}--scroll-into-view-delay` to the desired delay inside the targeted class declaration.


https://user-images.githubusercontent.com/24970122/104062914-2c0bd900-51b0-11eb-92df-b81717d1ccc4.mov



``` 
import '@carbon/ibmdotcom-styles/scss/internal/scroll-into-view/_scroll-into-view.scss';

const selectorTargets = 'bx--content-block, bx--content-group'

// React
import { FadeInOut } from '@carbon/ibmdotcom-react';
<FadeInOut selectorTargets={selectorTargets} keepAnimations={false} />

// Web Component
import '@carbon/ibmdotcom-web-components/es/components/fade-in-out/fade-in-out.js';
<dds-fade-in-out .selectorTargets="${selectorTargets}"></dds-fade-in-out>


// custom-app.scss
.bx--content-block {
    --#{$dds-prefix}--fade-in-out-delay: 3s; // custom delay
}

```

### Storybook Variation
Added a new Storybook variation for `Dotcom Shell`, `With Fade Animations` for testing purposes.
Under `Other` knobs, one can adjust the delay in seconds to give an idea of the custom delay that can be used. 


### Changelog

**New**

- `fade-in-out` React and Web Component introduced
- `With Fade Animations` Storybook variations for `Dotcom Shell` for testing purposes

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@RobertaJHahn RobertaJHahn changed the title Utility: Create the MVP animation / fade utility Component: Create the MVP animation / fade utility Feb 9, 2021
@RobertaJHahn RobertaJHahn added package: react Work necessary for the Carbon for IBM.com react components package package: web components Work necessary for the IBM.com Library web components package and removed package: utilities Work necessary for the Carbon for IBM.com utilities package labels Feb 9, 2021
IgnacioBecerra added a commit to IgnacioBecerra/ibm-dotcom-library that referenced this issue Feb 22, 2021
@IgnacioBecerra
feat(fade-in-out): introducing new components (carbon-design-system#4608
826592b 
)

### Related Ticket(s)
carbon-design-system#4281

### Description

Utility made for adopters that will enable them to include fade in/out animations for the ibm.com web pages they build.

`fadeInOut` also includes parameter of 
`keepAnimation`: to define whether the animation persists after the first activation (defaults to `true`)

`fadeInOut` also supports custom delay duration by setting `--#{$dds-prefix}--scroll-into-view-delay` to the desired delay inside the targeted class declaration.


https://user-images.githubusercontent.com/24970122/104062914-2c0bd900-51b0-11eb-92df-b81717d1ccc4.mov



``` 
import '@carbon/ibmdotcom-styles/scss/internal/scroll-into-view/_scroll-into-view.scss';

const selectorTargets = 'bx--content-block, bx--content-group'

// React
import { FadeInOut } from '@carbon/ibmdotcom-react';
<FadeInOut selectorTargets={selectorTargets} keepAnimations={false} />

// Web Component
import '@carbon/ibmdotcom-web-components/es/components/fade-in-out/fade-in-out.js';
<dds-fade-in-out .selectorTargets="${selectorTargets}"></dds-fade-in-out>


// custom-app.scss
.bx--content-block {
    --#{$dds-prefix}--fade-in-out-delay: 3s; // custom delay
}

```

### Storybook Variation
Added a new Storybook variation for `Dotcom Shell`, `With Fade Animations` for testing purposes.
Under `Other` knobs, one can adjust the delay in seconds to give an idea of the custom delay that can be used. 


### Changelog

**New**

- `fade-in-out` React and Web Component introduced
- `With Fade Animations` Storybook variations for `Dotcom Shell` for testing purposes

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package package: web components Work necessary for the IBM.com Library web components package priority: medium
Projects
None yet
Milestone
Sprint 21-01
Development

No branches or pull requests
3 participants
@jeffchew @IgnacioBecerra @RobertaJHahn