-
Notifications
You must be signed in to change notification settings - Fork 158
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.
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
feat(fade-in-out): introducing new components #4608
Merged
kodiakhq
merged 69 commits into
carbon-design-system:master
from
IgnacioBecerra:scroll-fade-animation
Jan 14, 2021
Merged
Changes from 58 commits
Commits
Show all changes
69 commits
Select commit
Hold shift + click to select a range
caea15c
fix(megamenu): fixed uncentered arrow icon in safari
IgnacioBecerra e0827fd
Revert "fix(megamenu): fixed uncentered arrow icon in safari"
IgnacioBecerra d7c4f8b
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 370161c
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 7ac3c4e
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra b3bf936
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra f2f28e0
feat(scroll-into-view): introducing new utility
IgnacioBecerra d697a49
feat(scroll-into-view): adding and removing classes instead
IgnacioBecerra f2f6b40
feat(scroll-into-view): using prefixes
IgnacioBecerra 65cd0cc
feat(scroll-into-view): updated dependencies
IgnacioBecerra 348cff7
feat(scroll-into-view): dependency fix
IgnacioBecerra e55580c
feat(scroll-into-view): changed sass file location
IgnacioBecerra 879fe94
fix(scroll-into-view): removed dependency
IgnacioBecerra a9d195d
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 6e07260
feat(scroll-into-view): slight refactoring
IgnacioBecerra 610ce46
feat(scroll-into-view): removed unneeded dependency
IgnacioBecerra 0b34be4
Merge branch 'master' into scroll-fade-animation
jeffchew 7c23d01
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra ed05f92
feat(scroll-into-view): added story and fixed jsdoc
IgnacioBecerra 461edc1
Merge branch 'scroll-fade-animation' of https://github.com/IgnacioBec…
IgnacioBecerra 8264ddf
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra 40bbba9
chore(scroll-into-view): update screenshots
IgnacioBecerra 077b0dd
Merge branch 'scroll-fade-animation' of https://github.com/IgnacioBec…
IgnacioBecerra e5eedd1
chore(snapshots): more snapshots!
IgnacioBecerra 35eb572
feat(scroll-into-view): added web component story variation
IgnacioBecerra d62d6d4
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 5392a08
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 90a961a
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 41fbdd5
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 95f4af5
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 72c1a97
feat(scroll-into-view): improved based on feedback
IgnacioBecerra a9a4511
Merge branch 'master' of https://github.com/IgnacioBecerra/ibm-dotcom…
IgnacioBecerra 0425ce4
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra 54c0f5b
feat(scroll-into-view): added variation to web component dotcom shell
IgnacioBecerra 2cffb6f
feat(scroll-into-view): replaced eventlistener for resize observer
IgnacioBecerra a82d128
Update packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js
IgnacioBecerra 794ec81
feat(scroll-into-view): update parameter to include future options
IgnacioBecerra 67e7e32
Merge branch 'scroll-fade-animation' of https://github.com/IgnacioBec…
IgnacioBecerra 93768f9
chore(scroll-into-view): update snapshots
IgnacioBecerra 671764b
Merge branch 'master' of https://github.com/carbon-design-system/carb…
IgnacioBecerra 8df2faf
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra 4671464
chore(scroll-into-view): updated snapshots again
IgnacioBecerra 972fbc2
Update packages/utilities/src/utilities/scrollIntoView/scrollIntoView.js
IgnacioBecerra 7cacbe7
feat(scroll-into-view): changed margin calculation and logo effect
IgnacioBecerra 84b6fe4
fix(scroll-into-view): typecasting as htmlelement
IgnacioBecerra afa297e
feat(scroll-into-view): refactored code and stories
IgnacioBecerra 1749f5c
chore(snapshots): updated snapshots
IgnacioBecerra 20cc29f
feat(scroll-into-view): using css rules for staggered delays
IgnacioBecerra 3f4450a
feat(fade-in-out): reimplemented into web and react components
IgnacioBecerra 8379ff1
feat(fade-in-out): addressed changes in web component
IgnacioBecerra 39bc570
feat(fade-in-out): addressed changes in react
IgnacioBecerra e7c06ad
chore(fade-in-out): ignore typescript warning
IgnacioBecerra e46286c
chore(fade-in-out): updated react snapshot
IgnacioBecerra 43ce5aa
feat(fade-in-out): addressed feedback
IgnacioBecerra b4291d5
chore(fade-in-out): update snapshots
IgnacioBecerra 79e7913
feat(fade-in-out): component wrapping
IgnacioBecerra 86772a5
feat(fade-in-out): addressed feedback
IgnacioBecerra b38bd30
feat(fade-in-out): renamed closure variables
IgnacioBecerra a4683a2
chore(fade-in-out): separated into individual stories
IgnacioBecerra 6a22d06
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra beb0771
chore(fade-in-out): added missing semicolon
IgnacioBecerra 0eb0cd1
chore(fade-in-out): moved scss to components, removed knobs
IgnacioBecerra c643950
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra b367d52
chore(dotcom-shell): update with new images
IgnacioBecerra 3e1acb0
fix(dotcom-shell): reintroduced heading
IgnacioBecerra a364613
Merge branch 'master' into scroll-fade-animation
IgnacioBecerra 6604d52
chore(dotcom-shell): reintroduced link list heading
IgnacioBecerra 399aa63
fix(dotcom-shell): updating content item horizontal eyebrow
IgnacioBecerra 9b49564
Merge branch 'master' into scroll-fade-animation
kodiakhq[bot] File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
packages/react/src/components/DotcomShell/__stories__/dotcom-shell.stories.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2021 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
.bx--logo-grid__logo, | ||
.bx--card-group__cards__col, | ||
.bx--content-item-wrapper > .bx--content-item { | ||
&:nth-of-type(3n) { | ||
--dds--fade-in-out-delay: 0; | ||
} | ||
&:nth-of-type(3n + 1) { | ||
--dds--fade-in-out-delay: 250ms; | ||
} | ||
&:nth-of-type(3n + 2) { | ||
--dds--fade-in-out-delay: 500ms; | ||
} | ||
&:nth-of-type(3n + 3) { | ||
--dds--fade-in-out-delay: 750ms; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,200 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2021 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
import React, { useCallback, useEffect, useRef } from 'react'; | ||
import { breakpoints } from '@carbon/layout'; | ||
import PropTypes from 'prop-types'; | ||
import settings from 'carbon-components/es/globals/js/settings'; | ||
const { prefix } = settings; | ||
|
||
/** | ||
* Amount of columns used for calculation. | ||
* | ||
* @private | ||
*/ | ||
const colSpan = 3; | ||
|
||
/** | ||
* Utility handles fade transition for selected elements. | ||
* | ||
* @example | ||
* import { FadeInOut } from '@carbon/ibmdotcom-react'; | ||
* import '@carbon/ibmdotcom-styles/scss/internal/scroll-into-view/_scroll-into-view.scss'; | ||
* | ||
* As an example, the function can be called to target all instances of the | ||
* elements in a list: | ||
* | ||
* const list = '.bx--content-block, .bx--content-group'; | ||
* | ||
* For default values of 400ms and 'one and done' play: | ||
* <FadeInOut selectorTargets={selectorTargets}> | ||
* // some content | ||
* </FadeInOut> | ||
* | ||
* With 'continuous play' option: | ||
* <FadeInOut selectorTargets={selectorTargets} keepAnimations={true}> | ||
* // some content | ||
* </FadeInOut> | ||
* | ||
* For custom delay time, set within targeted class in the application's CSS code as such: | ||
* | ||
* .bx--content-block { | ||
* --#{$dds-prefix}--fade-in-out-delay: 250ms; | ||
* } | ||
* | ||
*/ | ||
const FadeInOut = ({ children, selectorTargets, keepAnimations }) => { | ||
/** | ||
* Outer div component ref for using with query selector. | ||
* | ||
* @private | ||
*/ | ||
const componentRef = useRef(null); | ||
|
||
/** | ||
* Intersection Observer that watches outer viewport. | ||
* | ||
* @private | ||
*/ | ||
const rootObserver = useRef(null); | ||
|
||
/** | ||
* Intersection observer that watches the inner viewport. | ||
* | ||
* @private | ||
*/ | ||
const innerObserver = useRef(null); | ||
|
||
/** | ||
* Resize observer to trigger rootMargin recalculations | ||
* | ||
* @private | ||
*/ | ||
const resizeObserver = useRef(null); | ||
|
||
/** | ||
* Create observers upon render and update. | ||
*/ | ||
useEffect(() => { | ||
rootObserver.current = new IntersectionObserver(handleExit); | ||
resizeObserver.current = new ResizeObserver(handleResize); | ||
|
||
if (selectorTargets) { | ||
componentRef.current?.querySelectorAll(selectorTargets).forEach(item => { | ||
rootObserver?.current.observe(item); | ||
}); | ||
} | ||
resizeObserver.current.observe(document.documentElement); | ||
|
||
return () => { | ||
rootObserver.current.disconnect(); | ||
innerObserver.current.disconnect(); | ||
resizeObserver.current.disconnect(); | ||
rootObserver.current = null; | ||
innerObserver.current = null; | ||
resizeObserver.current = null; | ||
}; | ||
}, [componentRef, selectorTargets, handleEntrance, handleResize]); | ||
|
||
/** | ||
* Handler to add recalculated rootMargin to a new instance of | ||
* inner observer after clearing old one first. | ||
* | ||
* The calculation is done to retrieve the best fitting top and bottom | ||
* margin for the fade animation to trigger/remove from elements in a | ||
* user's screen. | ||
* | ||
* The resulting value is the optimal point where a user's attention will be | ||
* grabbed by the animation without restricting their view and perception of | ||
* the adopting website. The displayed elements will keep the user's attention | ||
* for a longer time as they scroll down the website. | ||
* | ||
* @private | ||
*/ | ||
const handleResize = useCallback(() => { | ||
if (innerObserver.current) { | ||
innerObserver.current.disconnect(); | ||
innerObserver.current = null; | ||
} | ||
|
||
innerObserver.current = new IntersectionObserver(handleEntrance, { | ||
rootMargin: `-${( | ||
(document.documentElement.clientHeight * colSpan) / | ||
breakpoints.max.columns | ||
).toString()}px 0px`, | ||
}); | ||
|
||
if (selectorTargets) { | ||
componentRef.current?.querySelectorAll(selectorTargets).forEach(item => { | ||
innerObserver?.current.observe(item); | ||
}); | ||
} | ||
}, [componentRef, innerObserver, selectorTargets, handleEntrance]); | ||
|
||
/** | ||
* Handler to add fade animation to element | ||
* | ||
* @param {*} records observed elements | ||
* @private | ||
* | ||
*/ | ||
const handleEntrance = useCallback( | ||
records => { | ||
records.forEach(({ intersectionRatio, target }) => { | ||
if (intersectionRatio > 0) { | ||
target.classList.remove(`${prefix}--fade-out`); | ||
target.classList.add(`${prefix}--fade-in`); | ||
if (!keepAnimations) { | ||
rootObserver.current.unobserve(target); | ||
innerObserver.current.unobserve(target); | ||
} | ||
} | ||
}); | ||
}, | ||
[keepAnimations, rootObserver, innerObserver] | ||
); | ||
|
||
/** | ||
* Handler to remove element from view | ||
* | ||
* @param {*} records observed elements | ||
* @private | ||
* | ||
*/ | ||
function handleExit(records) { | ||
records.forEach(({ intersectionRatio, target }) => { | ||
if (intersectionRatio == 0) { | ||
target.classList.remove(`${prefix}--fade-in`); | ||
target.classList.add(`${prefix}--fade-out`); | ||
} | ||
}); | ||
} | ||
|
||
return <div ref={componentRef}>{children}</div>; | ||
}; | ||
|
||
FadeInOut.propTypes = { | ||
/** | ||
* Component(s) to render within the component | ||
*/ | ||
children: PropTypes.oneOfType([ | ||
PropTypes.arrayOf(PropTypes.node), | ||
PropTypes.node, | ||
]).isRequired, | ||
|
||
/** | ||
* List of elements to be targeted | ||
*/ | ||
selectorTargets: PropTypes.string, | ||
|
||
/** | ||
* Boolean to define if animation is continuous | ||
*/ | ||
keepAnimations: PropTypes.bool, | ||
}; | ||
|
||
export default FadeInOut; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2021 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
export { default as FadeInOut } from './FadeInOut'; |
24 changes: 24 additions & 0 deletions
24
packages/styles/scss/internal/scroll-into-view/_scroll-into-view.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2021 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
@import '../../globals/vars'; | ||
@import '../../globals/imports'; | ||
|
||
:root { | ||
--#{$dds-prefix}--fade-in-out-delay: 0s; | ||
} | ||
|
||
.#{$prefix}--fade-in { | ||
transition-timing-function: carbon--motion(entrance, expressive); | ||
transition-duration: $duration--slow-01; | ||
transition-delay: var(--#{$dds-prefix}--fade-in-out-delay); | ||
opacity: 1; | ||
} | ||
|
||
.#{$prefix}--fade-out { | ||
opacity: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
/** | ||
* Copyright IBM Corp. 2016, 2021 | ||
* | ||
* This source code is licensed under the Apache-2.0 license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
/* stylelint-disable selector-type-no-unknown */ | ||
dds-logo-grid-item, | ||
dds-card-group-item, | ||
dds-cta-section-item { | ||
&:nth-of-type(3n) { | ||
--dds--fade-in-out-delay: 0; | ||
} | ||
&:nth-of-type(3n + 1) { | ||
--dds--fade-in-out-delay: 250ms; | ||
} | ||
&:nth-of-type(3n + 2) { | ||
--dds--fade-in-out-delay: 500ms; | ||
} | ||
&:nth-of-type(3n + 3) { | ||
--dds--fade-in-out-delay: 750ms; | ||
} | ||
} | ||
/* stylelint-enable selector-type-no-unknown */ |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if this file technically belongs in
internal
, maybe move tocomponents
since it is part of a component now. Be sure to update corresponding documentation too.