-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
725 additions
and
29 deletions.
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
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
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
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
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
39 changes: 39 additions & 0 deletions
39
polaris.shopify.com/content/components/overlays/hovercard.mdx
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,39 @@ | ||
| --- | ||
| title: HoverCard | ||
| shortDescription: Used to present a preview of a commerce object's key information when hovering a link to its detail page. | ||
| category: Overlays | ||
| keywords: | ||
| - hovercard | ||
| - link preview | ||
| - link details | ||
| - commerce object | ||
| examples: | ||
| - fileName: hovercard-with-child-activator.tsx | ||
| title: With child activator | ||
| description: A hover card that renders and is triggered to be `active` by its `children`. Use for commerce objects rendered by themselves within normal page content. | ||
| - fileName: hovercard-with-dynamic-activator.tsx | ||
| title: With dynamic activator | ||
| description: A HoverCard rendered without `children` that is triggered to be `active` and repositioned by dynamically setting the `activator` prop. Use when several of the same commerce object type are in close context, like a column of customer names in an index table of orders. | ||
| --- | ||
|
|
||
| # {frontmatter.title} | ||
|
|
||
| <Lede> | ||
|
|
||
| A hover card is an overlay only triggered by mouse over of a link. They are not triggered on focus, keyboard navigable, or visible to screen readers. Use to present a preview of a commerce object's key information when hovering a link to its detail page. | ||
|
|
||
| </Lede> | ||
|
|
||
| <Examples /> | ||
|
|
||
| <Props componentName={frontmatter.title} /> | ||
|
|
||
| ## Best practices | ||
|
|
||
| --- | ||
|
|
||
| ## Content guidelines | ||
|
|
||
| --- | ||
|
|
||
| ## Related components |
146 changes: 146 additions & 0 deletions
146
polaris.shopify.com/pages/examples/hovercard-with-child-activator.tsx
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,146 @@ | ||
| import React, {useState} from 'react'; | ||
| import { | ||
| ButtonGroup, | ||
| Box, | ||
| Button, | ||
| HoverCard, | ||
| Icon, | ||
| Link, | ||
| Text, | ||
| BlockStack, | ||
| InlineStack, | ||
| Card, | ||
| } from '@shopify/polaris'; | ||
| import type {PositionedOverlayProps} from '@shopify/polaris'; | ||
| import {LocationsMinor, OrdersMinor} from '@shopify/polaris-icons'; | ||
| import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; | ||
|
|
||
| function HoverCardWithChildActivator() { | ||
| const [active, setActive] = useState(false); | ||
| const [position, setPosition] = | ||
| useState<PositionedOverlayProps['preferredPosition']>('below'); | ||
|
|
||
| const handleChangePosition = | ||
| (position: PositionedOverlayProps['preferredPosition']) => () => { | ||
| setPosition(position); | ||
| }; | ||
|
|
||
| const activator = ( | ||
| <Link removeUnderline url="#"> | ||
| Saul Goodman | ||
| </Link> | ||
| ); | ||
|
|
||
| const customerHoverCardContent = ( | ||
| <Box padding="400"> | ||
| <BlockStack gap="400"> | ||
| <BlockStack gap="0"> | ||
| <Text as="span" variant="headingSm"> | ||
| <Link removeUnderline>Saul Goodman</Link> | ||
| </Text> | ||
| <Text as="span" variant="bodyMd"> | ||
| <Link url="mailto:help@bettercallsaul.com"> | ||
| help@bettercallsaul.com | ||
| </Link> | ||
| </Text> | ||
| <Text as="p" variant="bodyMd"> | ||
| <Link url="tel:+1505-842-5662">+1 505-842-5662</Link> | ||
| </Text> | ||
| </BlockStack> | ||
| <Box width="100%"> | ||
| <BlockStack gap="100"> | ||
| <InlineStack wrap={false} gap="100" align="start"> | ||
| <Icon tone="subdued" source={LocationsMinor} /> | ||
| <Text tone="subdued" as="p"> | ||
| Albequerque, NM, USA | ||
| </Text> | ||
| </InlineStack> | ||
| <InlineStack wrap={false} gap="100" align="start"> | ||
| <Box> | ||
| <Icon tone="subdued" source={OrdersMinor} /> | ||
| </Box> | ||
| <Text tone="subdued" as="p"> | ||
| 8 Orders | ||
| </Text> | ||
| </InlineStack> | ||
| </BlockStack> | ||
| </Box> | ||
| </BlockStack> | ||
| </Box> | ||
| ); | ||
|
|
||
| const positionControlBar = ( | ||
| <BlockStack gap="100" align="start" inlineAlign="center"> | ||
| <Text as="p" tone="subdued"> | ||
| Use the buttons below to change the hover card position | ||
| </Text> | ||
| <ButtonGroup variant="segmented"> | ||
| <Button | ||
| pressed={position === 'left'} | ||
| onClick={handleChangePosition('left')} | ||
| > | ||
| Left | ||
| </Button> | ||
| <Button | ||
| pressed={position === 'right'} | ||
| onClick={handleChangePosition('right')} | ||
| > | ||
| Right | ||
| </Button> | ||
| <Button | ||
| pressed={position === 'above'} | ||
| onClick={handleChangePosition('above')} | ||
| > | ||
| Above | ||
| </Button> | ||
| <Button | ||
| pressed={position === 'below'} | ||
| onClick={handleChangePosition('below')} | ||
| > | ||
| Below | ||
| </Button> | ||
| </ButtonGroup> | ||
| </BlockStack> | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| margin: '0 auto', | ||
| height: '300px', | ||
| width: '100%', | ||
| }} | ||
| > | ||
| <InlineStack align="center" blockAlign="center"> | ||
| <BlockStack gap="500"> | ||
| {positionControlBar} | ||
|
|
||
| <Card> | ||
| <BlockStack gap="300"> | ||
| <Text as="h2" variant="headingSm"> | ||
| Customer | ||
| </Text> | ||
|
|
||
| <HoverCard | ||
| active={active} | ||
| preferredPosition={position} | ||
| preferredAlignment="center" | ||
| content={customerHoverCardContent} | ||
| toggleActive={setActive} | ||
| > | ||
| {activator} | ||
| </HoverCard> | ||
| </BlockStack> | ||
| </Card> | ||
| <Box minHeight="100px" /> | ||
| </BlockStack> | ||
| </InlineStack> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default withPolarisExample(HoverCardWithChildActivator); |
Oops, something went wrong.