From e9262fee76a4cf2e483b3d1cebff229ea866fce6 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Thu, 21 Nov 2019 12:06:51 -0600 Subject: [PATCH 1/9] v1.17.2 --- lerna.json | 2 +- packages/example/package.json | 4 ++-- packages/gatsby-theme-carbon/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lerna.json b/lerna.json index bb2aa0ec3..cdce3ff10 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "1.17.1", + "version": "1.17.2", "npmClient": "yarn", "useWorkspaces": true, "publish": { diff --git a/packages/example/package.json b/packages/example/package.json index aea249069..3813e0885 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "1.17.1", + "version": "1.17.2", "license": "Apache 2.0", "scripts": { "develop": "gatsby develop", @@ -15,7 +15,7 @@ }, "dependencies": { "gatsby": "^2.4.2", - "gatsby-theme-carbon": "^1.17.1", + "gatsby-theme-carbon": "^1.17.2", "react": "^16.8.6", "react-dom": "^16.8.6" } diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index 0453412d9..50750c218 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-theme-carbon", - "version": "1.17.1", + "version": "1.17.2", "main": "index.js", "author": "vpicone (@vpicone)", "repository": { From 1780aa407d239c32399b107565d8f949638b368f Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Thu, 21 Nov 2019 12:08:04 -0600 Subject: [PATCH 2/9] v1.17.3 --- lerna.json | 2 +- packages/example/package.json | 4 ++-- packages/gatsby-theme-carbon/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lerna.json b/lerna.json index cdce3ff10..ed824bbfc 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*"], - "version": "1.17.2", + "version": "1.17.3", "npmClient": "yarn", "useWorkspaces": true, "publish": { diff --git a/packages/example/package.json b/packages/example/package.json index 3813e0885..0365ad204 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "1.17.2", + "version": "1.17.3", "license": "Apache 2.0", "scripts": { "develop": "gatsby develop", @@ -15,7 +15,7 @@ }, "dependencies": { "gatsby": "^2.4.2", - "gatsby-theme-carbon": "^1.17.2", + "gatsby-theme-carbon": "^1.17.3", "react": "^16.8.6", "react-dom": "^16.8.6" } diff --git a/packages/gatsby-theme-carbon/package.json b/packages/gatsby-theme-carbon/package.json index 50750c218..fe6a045f1 100644 --- a/packages/gatsby-theme-carbon/package.json +++ b/packages/gatsby-theme-carbon/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-theme-carbon", - "version": "1.17.2", + "version": "1.17.3", "main": "index.js", "author": "vpicone (@vpicone)", "repository": { From a2dea559480a9658ede169f79c3edd3f63bb2d48 Mon Sep 17 00:00:00 2001 From: Josefina Mancilla Date: Wed, 3 Jun 2020 17:01:10 -0500 Subject: [PATCH 3/9] feat: closing func, disabled focus, styles --- .../src/components/Container/Container.js | 3 ++ .../src/components/LeftNav/LeftNav.js | 19 +++++++++--- .../src/components/Switcher/Switcher.js | 29 +++++++++++++++++-- .../components/Switcher/Switcher.module.scss | 2 -- 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js index bab47c2fa..a535be8ff 100644 --- a/packages/gatsby-theme-carbon/src/components/Container/Container.js +++ b/packages/gatsby-theme-carbon/src/components/Container/Container.js @@ -50,6 +50,9 @@ const Container = ({ children, homepage, theme }) => { />
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js index f96a360c3..3c2a0a4ce 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js @@ -11,9 +11,12 @@ import LeftNavWrapper from './LeftNavWrapper'; import { sideNavDark } from './LeftNav.module.scss'; const LeftNav = (props) => { - const { leftNavIsOpen, leftNavScrollTop, setLeftNavScrollTop } = useContext( - NavContext - ); + const { + leftNavIsOpen, + leftNavScrollTop, + setLeftNavScrollTop, + toggleNavState, + } = useContext(NavContext); const sideNavRef = useRef(); const sideNavListRef = useRef(); @@ -36,9 +39,17 @@ const LeftNav = (props) => { const navItems = useNavItems(); + const closeSwitcher = () => { + toggleNavState('switcherIsOpen', 'close'); + }; + // TODO: replace old addon website styles with sass modules, move to wrapper return ( - + { const { switcherIsOpen } = useContext(NavContext); + // --------------------------- + // automated max height + const listRef = useRef(null); + const [height, setHeight] = useState(null); + + // calculate and update height + useEffect(() => { + switcherIsOpen + ? setHeight(listRef.current.offsetHeight + 40) + : setHeight(0); + }, [listRef, switcherIsOpen]); + + const lgBreakpoint = window.matchMedia('(min-width: 1056px)'); // returns true if screen width matches media query + const styles = { + container: (isLg, isOpen) => ({ + /* eslint no-unused-expressions: [2, { allowShortCircuit: true, allowTernary: true }] */ + maxHeight: !isLg && isOpen ? '100%' : `${height}px`, + }), + }; + // --------------------------- + return ( ); }; @@ -33,13 +55,14 @@ export const SwitcherLink = ({ const href = disabled || !hrefProp ? undefined : hrefProp; const className = disabled ? linkDisabled : link; const { switcherIsOpen } = useContext(NavContext); + const openTabIndex = disabled ? '-1' : 0; return (
  • Date: Wed, 3 Jun 2020 17:01:50 -0500 Subject: [PATCH 4/9] chore: add comment --- .../gatsby-theme-carbon/src/components/Container/Container.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js index a535be8ff..3d5f9fa34 100644 --- a/packages/gatsby-theme-carbon/src/components/Container/Container.js +++ b/packages/gatsby-theme-carbon/src/components/Container/Container.js @@ -50,8 +50,7 @@ const Container = ({ children, homepage, theme }) => { />
    Date: Wed, 3 Jun 2020 17:07:17 -0500 Subject: [PATCH 5/9] fix: accidentally deleted onclick for close --- .../gatsby-theme-carbon/src/components/Container/Container.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js index 3d5f9fa34..a03ca4dd2 100644 --- a/packages/gatsby-theme-carbon/src/components/Container/Container.js +++ b/packages/gatsby-theme-carbon/src/components/Container/Container.js @@ -51,6 +51,7 @@ const Container = ({ children, homepage, theme }) => {
    Date: Wed, 3 Jun 2020 17:08:02 -0500 Subject: [PATCH 6/9] chore: clean up comments --- .../gatsby-theme-carbon/src/components/Switcher/Switcher.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js index dbacedf37..4560810bf 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js @@ -6,8 +6,6 @@ import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss'; const Switcher = ({ children }) => { const { switcherIsOpen } = useContext(NavContext); - // --------------------------- - // automated max height const listRef = useRef(null); const [height, setHeight] = useState(null); @@ -25,7 +23,6 @@ const Switcher = ({ children }) => { maxHeight: !isLg && isOpen ? '100%' : `${height}px`, }), }; - // --------------------------- return ( From ee368e89aa4c386197feb6c3e1900fc83bcc8aeb Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Tue, 16 Jun 2020 13:55:11 -0500 Subject: [PATCH 8/9] fix: eslint cleanup --- .../src/components/Switcher/Switcher.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js index 89df1a71a..06df4d6b4 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js @@ -5,23 +5,21 @@ import NavContext from '../../util/context/NavContext'; import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss'; const Switcher = ({ children }) => { + const lgBreakpoint = useMedia('min-width: 1056px'); const { switcherIsOpen } = useContext(NavContext); - const listRef = useRef(null); const [height, setHeight] = useState(null); // calculate and update height useEffect(() => { - switcherIsOpen - ? setHeight(listRef.current.offsetHeight + 40) - : setHeight(0); + if (switcherIsOpen) { + setHeight(listRef.current.offsetHeight + 40); + } else { + setHeight(0); + } }, [listRef, switcherIsOpen]); - const lgBreakpoint = useMedia('min-width: 1056px'); - const styles = { - /* eslint no-unused-expressions: [2, { allowShortCircuit: true, allowTernary: true }] */ - maxHeight: !lgBreakpoint && switcherIsOpen ? '100%' : `${height}px`, - }; + const maxHeight = !lgBreakpoint && switcherIsOpen ? '100%' : `${height}px`; return ( From f3d25804a29110c06e3cf987bcdb5ce2bd0e50b5 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Tue, 16 Jun 2020 14:52:14 -0500 Subject: [PATCH 9/9] Update packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss --- .../src/components/Switcher/Switcher.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss index 8ce765d6a..c966a748d 100644 --- a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss +++ b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.module.scss @@ -32,9 +32,6 @@ border-bottom: 1px solid $inverse-02; box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2); @include carbon--breakpoint("lg") { - // https://css-tricks.com/using-css-transitions-auto-dimensions/ - // Tied to the height of the app switcher. Allows for animating up to auto. - // Matching the height exactly is imperitive to keep the correct animation timing. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); // header__menu shadow } }