feat(fade-in-out): introducing new components #4608

IgnacioBecerra · 2020-12-03T01:37:41Z

Related Ticket(s)

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.

Screen.Recording.2021-01-08.at.12.50.42.PM.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

This reverts commit caea15c.

…on-for-ibm-dotcom

asudoh

Good to see the progress @IgnacioBecerra!

asudoh · 2020-12-03T01:51:46Z

packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js

+            entry.target.style.transitionTimingFunction = motion(
+              'entrance',
+              'expressive'
+            );
+            entry.target.style.transitionDuration = delay;
+            entry.target.style.opacity = 1;
+            if (!iterations) {
+              observer.unobserve(entry.target);
+            }
+          } else {
+            entry.target.style.transitionTimingFunction = motion(
+              'exit',
+              'expressive'
+            );
+            entry.target.style.transitionDuration = delay;
+            entry.target.style.opacity = 0;


Would you be able to add/remove a CSS class, instead of applying inline style?

ibmdotcom-bot · 2020-12-03T02:01:23Z

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

Built with commit: 9b49564b5491d5bc9a4d5984bed9d4ec7be945ea

ibmdotcom-bot · 2020-12-03T02:09:27Z

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

Built with commit: 9b49564b5491d5bc9a4d5984bed9d4ec7be945ea

packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js

asudoh · 2020-12-03T15:53:48Z

packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js


      const observer = new IntersectionObserver(function handleIntersect(
        entries
      ) {
+        root.style.setProperty('--delay', delay);


Probably we can simply let application set the CSS custom property in the application CSS?

The func specs detailed an option to allow adopters to provide their custom delay, this is in case the adopter wants to use different delays for different components (e.g. target boxA for 3s and boxB for 1s or so).

I see and the custom delay can be done by:

.app--some-area-containing-scroll-into-view { --dds-delay: 3s }

Ah I see! That's definitely a better way to allow the adopter to have their own delay within their own CSS file.

packages/utilities/src/utilities/scrollIntoView/scroll-into-view.scss

…on-for-ibm-dotcom

asudoh

Thank you for the updates @IgnacioBecerra!

packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js

asudoh · 2020-12-04T01:13:11Z

packages/styles/scss/internal/scroll-into-view/_scroll-into-view.scss

+@import '../../globals/imports';
+
+:root {
+  --#{$dds-prefix}--delay: 400ms;


My apologies for another name change request, but I figured that the variable should be more specific of what it does (instead of using name implying a general purpose):

Suggested change

--#{$dds-prefix}--delay: 400ms;

--#{$dds-prefix}--scroll-into-view-delay: 400ms;

You're right, the more specific the better to avoid any potential conflicts 👍

asudoh

LGTM 👍 - Thanks @IgnacioBecerra!

ibmdotcom-bot · 2020-12-04T15:28:45Z

Deploy preview created for package Utilities:
https://ibmdotcom-utilities.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/4608/index.html

Built with commit: b367d52d60b99e97efbb652989696858abdc1e91

jeffchew

Adding notes here from what we discussed offline:

Create a story in the Dotcom Shell with the utility enabled, so we can see it in action
The JSDocs generation isn't quite right, from my notes:
- it doesn't look like scrollIntoView is showing up in the JSDoc generation, but viewportMargin is: https://ibmdotcom-utilities.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/4608/global.html#viewportMargin. you might need to make viewportMargin and options into private variables (add @private to the JSDoc description of those), and move the JSDoc declaration to on top of scrollIntoView. Also, rename viewportMargin and options to _viewportMargin and _options

asudoh

Thanks @IgnacioBecerra for the update!

packages/react/src/components/FadeInOut/FadeInOut.js

packages/web-components/src/components/fade-in-out/fade-in-out.ts

asudoh

Thanks @IgnacioBecerra! The last naming nit - While we use _ prefix for private/protected properties/methods, we don't use it for closure variables even if we meant it as private. And please make sure the CI passes. Almost there!

packages/web-components/src/components/fade-in-out/fade-in-out.ts

packages/react/src/components/FadeInOut/FadeInOut.js

asudoh

LGTM 👍 - Let's see our designers' input - Thanks @IgnacioBecerra!

jeffchew

Thank you for all of the updates @IgnacioBecerra ! As mentioned in slack, now that FadeInOut is its own component now, it makes sense to have it as its own storybook story, along with Docs tab on how adopters can use.

jeffchew · 2021-01-14T04:40:10Z

@IgnacioBecerra looking good so far! For React, I don't think the knobs are necessary since they are related to the dotcom shell and not fade specifically. We can probably remove those for the fade storybook stories.

EDIT: same for web components

jeffchew · 2021-01-14T04:42:49Z

packages/styles/scss/internal/scroll-into-view/_scroll-into-view.scss

@@ -0,0 +1,24 @@
+/**


Not sure if this file technically belongs in internal, maybe move to components since it is part of a component now. Be sure to update corresponding documentation too.

photodow

Looking good! 👍

jeffchew · 2021-01-14T17:13:40Z

@IgnacioBecerra looks good! before I approve can you check on the CI checks? Probably need to update snapshot files.

IgnacioBecerra · 2021-01-14T17:15:40Z

@jeffchew Yup, ran into a merge conflict with the new image update, just pushed a fix for that. Let's hope the CI passes

jeffchew · 2021-01-14T18:52:41Z

@IgnacioBecerra not critical, but looks like the dotcom shell default in web components has a missing headline now:

) ### 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

IgnacioBecerra added 7 commits November 24, 2020 12:55

fix(megamenu): fixed uncentered arrow icon in safari

caea15c

Revert "fix(megamenu): fixed uncentered arrow icon in safari"

e0827fd

This reverts commit caea15c.

Merge branch 'master' of https://github.com/carbon-design-system/carb…

d7c4f8b

…on-for-ibm-dotcom

Merge branch 'master' of https://github.com/carbon-design-system/carb…

370161c

…on-for-ibm-dotcom

Merge branch 'master' of https://github.com/carbon-design-system/carb…

7ac3c4e

…on-for-ibm-dotcom

Merge branch 'master' of https://github.com/carbon-design-system/carb…

b3bf936

…on-for-ibm-dotcom

feat(scroll-into-view): introducing new utility

f2f28e0

asudoh reviewed Dec 3, 2020

View reviewed changes

feat(scroll-into-view): adding and removing classes instead

d697a49

asudoh reviewed Dec 3, 2020

View reviewed changes

IgnacioBecerra added 5 commits December 3, 2020 08:36

feat(scroll-into-view): using prefixes

f2f6b40

feat(scroll-into-view): updated dependencies

65cd0cc

feat(scroll-into-view): dependency fix

348cff7

feat(scroll-into-view): changed sass file location

e55580c

fix(scroll-into-view): removed dependency

879fe94

IgnacioBecerra marked this pull request as ready for review December 3, 2020 22:20

Merge branch 'master' of https://github.com/carbon-design-system/carb…

a9d195d

…on-for-ibm-dotcom

asudoh reviewed Dec 4, 2020

View reviewed changes

IgnacioBecerra added 2 commits December 3, 2020 20:44

feat(scroll-into-view): slight refactoring

6e07260

feat(scroll-into-view): removed unneeded dependency

610ce46

asudoh approved these changes Dec 4, 2020

View reviewed changes

Merge branch 'master' into scroll-fade-animation

0b34be4

jeffchew added the package: utilities Work necessary for the Carbon for IBM.com utilities package label Dec 4, 2020

Merge branch 'master' into scroll-fade-animation

7c23d01

jeffchew requested changes Dec 4, 2020

View reviewed changes

feat(scroll-into-view): added story and fixed jsdoc

ed05f92

asudoh reviewed Jan 12, 2021

View reviewed changes

packages/react/src/components/FadeInOut/FadeInOut.js Outdated Show resolved Hide resolved

packages/react/src/components/FadeInOut/FadeInOut.js Outdated Show resolved Hide resolved

packages/web-components/src/components/fade-in-out/fade-in-out.ts Outdated Show resolved Hide resolved

feat(fade-in-out): addressed feedback

86772a5

asudoh reviewed Jan 12, 2021

View reviewed changes

feat(fade-in-out): renamed closure variables

b38bd30

asudoh approved these changes Jan 12, 2021

View reviewed changes

IgnacioBecerra requested a review from photodow January 12, 2021 14:36

jeffchew requested changes Jan 13, 2021

View reviewed changes

IgnacioBecerra added 3 commits January 13, 2021 17:51

chore(fade-in-out): separated into individual stories

a4683a2

Merge branch 'master' into scroll-fade-animation

6a22d06

chore(fade-in-out): added missing semicolon

beb0771

jeffchew reviewed Jan 14, 2021

View reviewed changes

photodow approved these changes Jan 14, 2021

View reviewed changes

IgnacioBecerra added 3 commits January 14, 2021 07:23

chore(fade-in-out): moved scss to components, removed knobs

0eb0cd1

Merge branch 'master' into scroll-fade-animation

c643950

chore(dotcom-shell): update with new images

b367d52

jeffchew removed the package: utilities Work necessary for the Carbon for IBM.com utilities package label Jan 14, 2021

IgnacioBecerra added 4 commits January 14, 2021 11:55

fix(dotcom-shell): reintroduced heading

3e1acb0

Merge branch 'master' into scroll-fade-animation

a364613

chore(dotcom-shell): reintroduced link list heading

6604d52

fix(dotcom-shell): updating content item horizontal eyebrow

399aa63

jeffchew approved these changes Jan 14, 2021

View reviewed changes

jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Jan 14, 2021

Merge branch 'master' into scroll-fade-animation

9b49564

kodiakhq bot merged commit 0b6a05a into carbon-design-system:master Jan 14, 2021

jeffchew mentioned this pull request Jan 19, 2021

Carbon for ibm.com Jan 2021 Release Plan (v1.15.0) #4079

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(fade-in-out): introducing new components #4608

feat(fade-in-out): introducing new components #4608

IgnacioBecerra commented Dec 3, 2020 •

edited

Loading

asudoh left a comment

asudoh Dec 3, 2020

ibmdotcom-bot commented Dec 3, 2020 •

edited

Loading

ibmdotcom-bot commented Dec 3, 2020 •

edited

Loading

asudoh Dec 3, 2020

IgnacioBecerra Dec 3, 2020 •

edited

Loading

asudoh Dec 4, 2020

IgnacioBecerra Dec 4, 2020

asudoh left a comment

asudoh Dec 4, 2020

IgnacioBecerra Dec 4, 2020

asudoh left a comment

ibmdotcom-bot commented Dec 4, 2020 •

edited

Loading

jeffchew left a comment

asudoh left a comment

asudoh left a comment

asudoh left a comment

jeffchew left a comment

jeffchew commented Jan 14, 2021 •

edited

Loading

jeffchew Jan 14, 2021

photodow left a comment

jeffchew commented Jan 14, 2021

IgnacioBecerra commented Jan 14, 2021

jeffchew commented Jan 14, 2021

	--#{$dds-prefix}--delay: 400ms;
	--#{$dds-prefix}--scroll-into-view-delay: 400ms;

feat(fade-in-out): introducing new components #4608

feat(fade-in-out): introducing new components #4608

Conversation

IgnacioBecerra commented Dec 3, 2020 • edited Loading

Related Ticket(s)

Description

Storybook Variation

Changelog

asudoh left a comment

Choose a reason for hiding this comment

asudoh Dec 3, 2020

Choose a reason for hiding this comment

ibmdotcom-bot commented Dec 3, 2020 • edited Loading

ibmdotcom-bot commented Dec 3, 2020 • edited Loading

asudoh Dec 3, 2020

Choose a reason for hiding this comment

IgnacioBecerra Dec 3, 2020 • edited Loading

Choose a reason for hiding this comment

asudoh Dec 4, 2020

Choose a reason for hiding this comment

IgnacioBecerra Dec 4, 2020

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

asudoh Dec 4, 2020

Choose a reason for hiding this comment

IgnacioBecerra Dec 4, 2020

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

ibmdotcom-bot commented Dec 4, 2020 • edited Loading

jeffchew left a comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

jeffchew left a comment

Choose a reason for hiding this comment

jeffchew commented Jan 14, 2021 • edited Loading

jeffchew Jan 14, 2021

Choose a reason for hiding this comment

photodow left a comment

Choose a reason for hiding this comment

jeffchew commented Jan 14, 2021

IgnacioBecerra commented Jan 14, 2021

jeffchew commented Jan 14, 2021

IgnacioBecerra commented Dec 3, 2020 •

edited

Loading

ibmdotcom-bot commented Dec 3, 2020 •

edited

Loading

ibmdotcom-bot commented Dec 3, 2020 •

edited

Loading

IgnacioBecerra Dec 3, 2020 •

edited

Loading

ibmdotcom-bot commented Dec 4, 2020 •

edited

Loading

jeffchew commented Jan 14, 2021 •

edited

Loading