From dc8304ea9c9602d8092ab114570197f1a6bb31ab Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 18 Oct 2024 01:28:57 +0200 Subject: [PATCH 1/6] more --- .../{disabledStateExample.tsx => diabled.tsx} | 0 .../{defaultStateExample.tsx => enabled.tsx} | 0 docs/examples/iconbuttonlink/active.tsx | 22 +++++++++ docs/examples/iconbuttonlink/disabled.tsx | 34 ++++++++++++++ docs/examples/iconbuttonlink/enabled.tsx | 19 ++++++++ docs/pages/web/iconbutton.tsx | 22 ++++----- docs/pages/web/iconbuttonlink.tsx | 46 +++++++++++++++---- packages/gestalt/src/IconButtonLink.tsx | 7 +++ packages/gestalt/src/Link/InternalLink.tsx | 4 +- .../gestalt/src/SideNavigationTopItem.tsx | 2 +- 10 files changed, 133 insertions(+), 23 deletions(-) rename docs/examples/iconbutton/{disabledStateExample.tsx => diabled.tsx} (100%) rename docs/examples/iconbutton/{defaultStateExample.tsx => enabled.tsx} (100%) create mode 100644 docs/examples/iconbuttonlink/active.tsx create mode 100644 docs/examples/iconbuttonlink/disabled.tsx create mode 100644 docs/examples/iconbuttonlink/enabled.tsx diff --git a/docs/examples/iconbutton/disabledStateExample.tsx b/docs/examples/iconbutton/diabled.tsx similarity index 100% rename from docs/examples/iconbutton/disabledStateExample.tsx rename to docs/examples/iconbutton/diabled.tsx diff --git a/docs/examples/iconbutton/defaultStateExample.tsx b/docs/examples/iconbutton/enabled.tsx similarity index 100% rename from docs/examples/iconbutton/defaultStateExample.tsx rename to docs/examples/iconbutton/enabled.tsx diff --git a/docs/examples/iconbuttonlink/active.tsx b/docs/examples/iconbuttonlink/active.tsx new file mode 100644 index 0000000000..bfe3fb0454 --- /dev/null +++ b/docs/examples/iconbuttonlink/active.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Flex, IconButtonLink } from 'gestalt'; + +export default function Example() { + const reactRouterPath = '/iconbuttonlink'; + + return ( + + { + event.preventDefault(); + dangerouslyDisableOnNavigation(); + }} + target="blank" + /> + + ); +} diff --git a/docs/examples/iconbuttonlink/disabled.tsx b/docs/examples/iconbuttonlink/disabled.tsx new file mode 100644 index 0000000000..7cbd2187e5 --- /dev/null +++ b/docs/examples/iconbuttonlink/disabled.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Flex, IconButtonLink } from 'gestalt'; + +export default function Example() { + const reactRouterPath = '/iconbuttonlink'; + + return ( + + { + event.preventDefault(); + dangerouslyDisableOnNavigation(); + }} + target="blank" + /> + { + event.preventDefault(); + dangerouslyDisableOnNavigation(); + }} + target="blank" + /> + + ); +} diff --git a/docs/examples/iconbuttonlink/enabled.tsx b/docs/examples/iconbuttonlink/enabled.tsx new file mode 100644 index 0000000000..c49461af84 --- /dev/null +++ b/docs/examples/iconbuttonlink/enabled.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Flex, IconButtonLink } from 'gestalt'; + +export default function Example() { + return ( + + { + event.preventDefault(); + dangerouslyDisableOnNavigation(); + }} + target="blank" + /> + + ); +} diff --git a/docs/pages/web/iconbutton.tsx b/docs/pages/web/iconbutton.tsx index 39d2dd1924..9456c59dfa 100644 --- a/docs/pages/web/iconbutton.tsx +++ b/docs/pages/web/iconbutton.tsx @@ -1,5 +1,5 @@ -import defaultStateExample from 'docs/examples/iconbutton/defaultStateExample'; -import disabledStateExample from 'docs/examples/iconbutton/disabledStateExample'; +import disabledStateExample from 'docs/examples/iconbutton/diabled'; +import defaultStateExample from 'docs/examples/iconbutton/enabled'; import focusOnDarkBackground from 'docs/examples/iconbutton/focusOnDarkBackground'; import selectedStateExample from 'docs/examples/iconbutton/selectedStateExample'; import { IconButton, Pog } from 'gestalt'; @@ -160,6 +160,15 @@ If IconButton is disabled, it's also unreachable from keyboard navigation.`} } /> + + } + /> + @@ -330,15 +339,6 @@ Follow these guidelines for \`bgColor\` title="Custom SVG icon" /> - - } - /> - + + + + + } /> + + + - + title="States" + > + + + + + diff --git a/packages/gestalt/src/IconButtonLink.tsx b/packages/gestalt/src/IconButtonLink.tsx index 44b17f2c87..f62fa60918 100644 --- a/packages/gestalt/src/IconButtonLink.tsx +++ b/packages/gestalt/src/IconButtonLink.tsx @@ -15,6 +15,10 @@ type Props = { * Label for screen readers to announce IconButtonLink. */ accessibilityLabel: string; + /** + * When set to 'page' or 'section', it displays the item in "active" state. See the [active state](https://gestalt.pinterest.systems/web/iconbuttonlink#Active-state) guidelines to learn more. + */ + active?: 'page' | 'section'; /** * Primary colors to apply to the IconButtonLink background. */ @@ -101,6 +105,7 @@ type Props = { const IconButtonLinkWithForwardRef = forwardRef(function IconButtonLink( { + active, href, rel, target, @@ -148,6 +153,7 @@ const IconButtonLinkWithForwardRef = forwardRef(functi const buttonComponent = ( (functi icon={icon} iconColor={iconColor} padding={padding} + selected={active && ['page', 'section'].includes(active)} size={size} /> diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx index 7d3621e960..d3e622123a 100644 --- a/packages/gestalt/src/Link/InternalLink.tsx +++ b/packages/gestalt/src/Link/InternalLink.tsx @@ -250,9 +250,9 @@ const InternalLinkWithForwardRef = forwardRef(function // @ts-expect-error TS2322 Types of property '"aria-selected"' are incompatible. Type '"section" | undefined' is not assignable to type 'Booleanish | undefined' ( return (
  • setFocused(false)} onFocus={() => setFocused(true)} From 20811b3b5278bf663934bc3544537c41542bbbc8 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 18 Oct 2024 01:34:02 +0200 Subject: [PATCH 2/6] mire --- docs/examples/iconbutton/{diabled.tsx => disabled.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/examples/iconbutton/{diabled.tsx => disabled.tsx} (100%) diff --git a/docs/examples/iconbutton/diabled.tsx b/docs/examples/iconbutton/disabled.tsx similarity index 100% rename from docs/examples/iconbutton/diabled.tsx rename to docs/examples/iconbutton/disabled.tsx From 0aba125ad1af0c4f25198c286910af75e62e71ed Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 18 Oct 2024 01:35:44 +0200 Subject: [PATCH 3/6] mire --- docs/pages/web/iconbutton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/web/iconbutton.tsx b/docs/pages/web/iconbutton.tsx index 9456c59dfa..f56270e28a 100644 --- a/docs/pages/web/iconbutton.tsx +++ b/docs/pages/web/iconbutton.tsx @@ -1,4 +1,4 @@ -import disabledStateExample from 'docs/examples/iconbutton/diabled'; +import disabledStateExample from 'docs/examples/iconbutton/disabled'; import defaultStateExample from 'docs/examples/iconbutton/enabled'; import focusOnDarkBackground from 'docs/examples/iconbutton/focusOnDarkBackground'; import selectedStateExample from 'docs/examples/iconbutton/selectedStateExample'; From a376886a15225c4d5c8f63464adabc18357c3528 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 18 Oct 2024 01:36:23 +0200 Subject: [PATCH 4/6] mire --- docs/pages/web/iconbuttonlink.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/web/iconbuttonlink.tsx b/docs/pages/web/iconbuttonlink.tsx index 73d15515c2..6dc04224f4 100644 --- a/docs/pages/web/iconbuttonlink.tsx +++ b/docs/pages/web/iconbuttonlink.tsx @@ -11,10 +11,10 @@ import PageHeader from '../../docs-components/PageHeader'; import QualityChecklist from '../../docs-components/QualityChecklist'; import SandpackExample from '../../docs-components/SandpackExample'; import active from '../../examples/iconbuttonlink/active'; +import disabled from '../../examples/iconbuttonlink/disabled'; +import enabled from '../../examples/iconbuttonlink/enabled'; import localizationLabels from '../../examples/iconbuttonlink/localizationLabels'; import main from '../../examples/iconbuttonlink/main'; -import enabled from '../../examples/iconbuttonlink/enabled'; -import disabled from '../../examples/iconbuttonlink/disabled'; export default function DocsPage({ generatedDocGen }: DocType) { return ( From d6935188d0e4260b32235a2c7c7114f5b7cdedba Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 18 Oct 2024 02:05:14 +0200 Subject: [PATCH 5/6] mire --- packages/gestalt/src/Link/InternalLink.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/gestalt/src/Link/InternalLink.tsx b/packages/gestalt/src/Link/InternalLink.tsx index d3e622123a..63f762b6e2 100644 --- a/packages/gestalt/src/Link/InternalLink.tsx +++ b/packages/gestalt/src/Link/InternalLink.tsx @@ -250,9 +250,17 @@ const InternalLinkWithForwardRef = forwardRef(function // @ts-expect-error TS2322 Types of property '"aria-selected"' are incompatible. Type '"section" | undefined' is not assignable to type 'Booleanish | undefined' Date: Fri, 18 Oct 2024 19:45:16 +0200 Subject: [PATCH 6/6] mre --- docs/examples/iconbuttonlink/active.tsx | 2 +- docs/examples/iconbuttonlink/disabled.tsx | 4 ++-- docs/examples/iconbuttonlink/enabled.tsx | 2 +- docs/examples/iconbuttonlink/main.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/examples/iconbuttonlink/active.tsx b/docs/examples/iconbuttonlink/active.tsx index bfe3fb0454..281cdae047 100644 --- a/docs/examples/iconbuttonlink/active.tsx +++ b/docs/examples/iconbuttonlink/active.tsx @@ -7,7 +7,7 @@ export default function Example() { return ( { diff --git a/docs/examples/iconbuttonlink/main.tsx b/docs/examples/iconbuttonlink/main.tsx index 166b6e5f89..129ece602e 100644 --- a/docs/examples/iconbuttonlink/main.tsx +++ b/docs/examples/iconbuttonlink/main.tsx @@ -4,8 +4,8 @@ export default function Example() { return ( { event.preventDefault();