diff --git a/docs/examples/sidenavigation/disableItemExample.tsx b/docs/examples/sidenavigation/disableItemExample.tsx new file mode 100644 index 0000000000..126204cbe8 --- /dev/null +++ b/docs/examples/sidenavigation/disableItemExample.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Box, SideNavigation } from 'gestalt'; + +export default function Example() { + return ( + + + event.preventDefault()} + /> + + event.preventDefault()} + subtext="Disabled thanksgiving section" + /> + + + event.preventDefault()} + /> + + + event.preventDefault()} + /> + event.preventDefault()} + /> + + + + + + ); +} diff --git a/docs/examples/sidenavigation/subtextItemExample.tsx b/docs/examples/sidenavigation/subtextItemExample.tsx new file mode 100644 index 0000000000..576ac1c14c --- /dev/null +++ b/docs/examples/sidenavigation/subtextItemExample.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Box, SideNavigation } from 'gestalt'; + +export default function Example() { + return ( + + + event.preventDefault()} + subtext="Reporting subtext" + /> + + event.preventDefault()} + subtext="8.5m+ users" + /> + + + event.preventDefault()} + subtext="2.3m+ users" + /> + + + event.preventDefault()} + subtext="100k+ users" + /> + event.preventDefault()} + subtext="50k+ users" + /> + + + + + + ); +} diff --git a/docs/pages/web/sidenavigation.tsx b/docs/pages/web/sidenavigation.tsx index 5d12cbb352..2b1cd4e258 100644 --- a/docs/pages/web/sidenavigation.tsx +++ b/docs/pages/web/sidenavigation.tsx @@ -20,6 +20,7 @@ import correctIconExample from '../../examples/sidenavigation/correctIconExample import correctLengthExample from '../../examples/sidenavigation/correctLengthExample'; import counterExample from '../../examples/sidenavigation/counterExample'; import customIconsExample from '../../examples/sidenavigation/customIconsExample'; +import disableItemExample from '../../examples/sidenavigation/disableItemExample'; import displayExpandable from '../../examples/sidenavigation/displayExpandable'; import displayExpanded from '../../examples/sidenavigation/displayExpanded'; import displayStatic from '../../examples/sidenavigation/displayStatic'; @@ -40,6 +41,7 @@ import notificationsExample from '../../examples/sidenavigation/notificationsExa import primaryAction from '../../examples/sidenavigation/primaryAction'; import sectionsExample from '../../examples/sidenavigation/sectionsExample'; import subcomponent from '../../examples/sidenavigation/subcomponent'; +import subtextItemExample from '../../examples/sidenavigation/subtextItemExample'; const DOC_NAMES = [ 'SideNavigation', @@ -337,6 +339,26 @@ Note that \`dismissButton.accessibilityLabel\` is optional as DefaultLabelProvid sandpackExample={} /> + + + } + /> + + + + } + /> + { ).toJSON(); expect(tree).toMatchSnapshot(); }); + + it('renders disabled item', () => { + const tree = create( + + + , + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders subtext on an item', () => { + const tree = create( + + + , + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/packages/gestalt/src/SideNavigation/ItemContent.tsx b/packages/gestalt/src/SideNavigation/ItemContent.tsx index 1043bba187..728b6ba3f4 100644 --- a/packages/gestalt/src/SideNavigation/ItemContent.tsx +++ b/packages/gestalt/src/SideNavigation/ItemContent.tsx @@ -17,6 +17,27 @@ import Indicator from '../Indicator'; import Text from '../Text'; import { Indexable } from '../zIndex'; +function getTextColor({ + active, + disabled, + subtext, +}: { + active?: string; + disabled?: boolean; + subtext?: boolean; +}) { + if (active) { + return 'inverse'; + } + if (disabled) { + return 'disabled'; + } + if (subtext) { + return 'subtle'; + } + return 'default'; +} + export const NESTING_MARGIN_START_MAP = { '0': TOKEN_SPACE_400, '1': TOKEN_SPACE_1200, @@ -56,6 +77,8 @@ type Props = { counter?: Counter; icon?: IconType; label: string; + subtext?: string; + disabled?: boolean; notificationAccessibilityLabel?: string; primaryAction?: PrimaryAction; setCompression: (arg1: 'compress' | 'none') => void; @@ -70,6 +93,8 @@ export default function ItemContent({ counter, icon, label, + subtext, + disabled, primaryAction, notificationAccessibilityLabel, setCompression, @@ -115,7 +140,8 @@ export default function ItemContent({ const inactiveItemColor = hovered ? 'secondary' : undefined; const itemColor = active ? 'selected' : inactiveItemColor; - const textColor = active ? 'inverse' : 'default'; + const mainTextColor = getTextColor({ active, disabled }); + const subTextColor = getTextColor({ active, disabled, subtext: true }); const counterColor = active ? 'inverse' : 'subtle'; const nestingMargin = isMobile @@ -164,7 +190,7 @@ export default function ItemContent({ {typeof icon === 'string' ? ( - - {label} - {(badge || notificationAccessibilityLabel) && ( - - {/* Adds a pause for screen reader users between the text content */} - {`, `} - {!notificationAccessibilityLabel && badge ? ( - - ) : null} - {notificationAccessibilityLabel ? ( - - ) : null} - - )} + + + + {label} + {subtext && ( + + {subtext} + + )} + + {(badge || notificationAccessibilityLabel) && !disabled && ( + + {/* Adds a pause for screen reader users between the text content */} + {`, `} + {!notificationAccessibilityLabel && badge ? ( + + ) : null} + {notificationAccessibilityLabel ? ( + + ) : null} + + )} + )} diff --git a/packages/gestalt/src/SideNavigationNestedItem.tsx b/packages/gestalt/src/SideNavigationNestedItem.tsx index 94fa8c79f7..a6638ed158 100644 --- a/packages/gestalt/src/SideNavigationNestedItem.tsx +++ b/packages/gestalt/src/SideNavigationNestedItem.tsx @@ -14,10 +14,18 @@ type Props = { number: string; accessibilityLabel: string; }; + /** + * Indicates if row item is disabled and therefore inactive and non-interactive. See [disabled variant](https://gestalt.pinterest.systems/web/sidenavigation#Disabled) to learn more. + */ + disabled?: boolean; /** * Directs users to the url when item is selected. */ href: string; + /** + * Provides optional additional information about a row item. See [subtext variant](https://gestalt.pinterest.systems/web/sidenavigation#Subtext) to learn more. + */ + subtext?: string; /** * Label for the item. */ @@ -55,7 +63,7 @@ type Props = { */ const SideNavigationNestedItemWithForwardRef = forwardRef( function SideNavigationNestedItem( - { active, counter, href, label, onClick, primaryAction }: Props, + { active, counter, disabled, subtext, href, label, onClick, primaryAction }: Props, ref, ) { return ( @@ -63,10 +71,12 @@ const SideNavigationNestedItemWithForwardRef = forwardRef( ref={ref} active={active} counter={counter} + disabled={disabled} href={href} label={label} onClick={onClick} primaryAction={primaryAction} + subtext={subtext} /> ); }, diff --git a/packages/gestalt/src/SideNavigationTopItem.tsx b/packages/gestalt/src/SideNavigationTopItem.tsx index 0c2af884cd..e7367c1694 100644 --- a/packages/gestalt/src/SideNavigationTopItem.tsx +++ b/packages/gestalt/src/SideNavigationTopItem.tsx @@ -26,6 +26,10 @@ export type Props = { number: string; accessibilityLabel: string; }; + /** + * Indicates if row item is disabled and therefore inactive and non-interactive. See [disabled variant](https://gestalt.pinterest.systems/web/sidenavigation#Disabled) to learn more. + */ + disabled?: boolean; /** * Directs users to the url when item is selected. */ @@ -49,6 +53,10 @@ export type Props = { event: React.MouseEvent | React.KeyboardEvent; dangerouslyDisableOnNavigation: () => void; }) => void; + /** + * Provides optional additional information about a row item. See [subtext variant](https://gestalt.pinterest.systems/web/sidenavigation#Subtext) to learn more. + */ + subtext?: string; /** * Label for the item. */ @@ -84,8 +92,10 @@ const SideNavigationTopItemWithForwardRef = forwardRef( href, badge, counter, + disabled, icon, label, + subtext, primaryAction, notificationAccessibilityLabel, onClick, @@ -108,6 +118,7 @@ const SideNavigationTopItemWithForwardRef = forwardRef(
  • setFocused(false)} onFocus={() => setFocused(true)} @@ -125,14 +136,16 @@ const SideNavigationTopItemWithForwardRef = forwardRef(
    • diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap index 8c1d910d8c..9a0904b150 100644 --- a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap +++ b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap @@ -141,7 +141,23 @@ exports[`SideNavigation renders Header + Footer 1`] = ` - test +
    +
    +
    +
    + test +
    +
    +
    +
    @@ -343,37 +359,57 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`] - test
    - , +
    +
    + test +
    +
    + , +
    +
    - - New - +
    + + New + +
    +
    @@ -475,25 +511,51 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`] - test
    - , +
    +
    + test +
    +
    + className="FlexItem" + > +
    +
    + , +
    +
    +
    +
    @@ -658,7 +720,23 @@ exports[`SideNavigation renders Sections 1`] = ` - test +
    +
    +
    +
    + test +
    +
    +
    +
    @@ -781,7 +859,158 @@ exports[`SideNavigation renders basic Item 1`] = ` - test +
    +
    +
    +
    + test +
    +
    +
    +
    +     + + + + + + + + + + + + + +`; + +exports[`SideNavigation renders disabled item 1`] = ` +
    - Halloween - -
    -
    -
    +
    +
    +
    + Halloween +
    +
    +
    +
    + +
    +
    +
    - Christmas +
    +
    +
    +
    + Christmas +
    +
    +
    +
    - Luxury Christmas +
    +
    +
    +
    + Luxury Christmas +
    +
    +
    +
    @@ -1640,7 +1981,23 @@ exports[`SideNavigation renders expanded group 1`] = ` - Classic Christmas +
    +
    +
    +
    + Classic Christmas +
    +
    +
    +
    - West Coast +
    +
    +
    +
    + West Coast +
    +
    +
    +
    @@ -1793,7 +2166,23 @@ exports[`SideNavigation renders expanded group 1`] = ` - East Coast +
    +
    +
    +
    + East Coast +
    +
    +
    +
    @@ -1921,7 +2310,23 @@ exports[`SideNavigation renders static group 1`] = ` - Christmas +
    +
    +
    +
    + Christmas +
    +
    +
    +
    @@ -1979,7 +2384,23 @@ exports[`SideNavigation renders static group 1`] = ` - Luxury Christmas +
    +
    +
    +
    + Luxury Christmas +
    +
    +
    +
    @@ -2016,7 +2437,23 @@ exports[`SideNavigation renders static group 1`] = ` - Classic Christmas +
    +
    +
    +
    + Classic Christmas +
    +
    +
    +
    @@ -2074,7 +2511,23 @@ exports[`SideNavigation renders static group 1`] = ` - West Coast +
    +
    +
    +
    + West Coast +
    +
    +
    +
    @@ -2130,7 +2583,23 @@ exports[`SideNavigation renders static group 1`] = ` - East Coast +
    +
    +
    +
    + East Coast +
    +
    +
    +
    @@ -2150,3 +2619,155 @@ exports[`SideNavigation renders static group 1`] = ` `; + +exports[`SideNavigation renders subtext on an item 1`] = ` +     +`;