-
Notifications
You must be signed in to change notification settings - Fork 50
Footer Help and Resource List Patterns #3523
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
Merged
Merged
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
142939e
Add footerHelp, resourceList, and actionMenu patterns with examples a…
mpshopify f9a6882
Fix Aria labels
mpshopify 98e5255
Removed action menu
mpshopify 5119500
Remove action menu doc file
mpshopify df23cd0
Add aspectRatio comment to empty state examples
mpshopify c3d4e3f
fix for PR comments
mpshopify 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
Binary file added
BIN
+8.18 KB
packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/footerHelp.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+30.1 KB
packages/ui-extensions/docs/surfaces/admin/screenshots/patterns/resourceList.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or 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 hidden or 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
1 change: 1 addition & 0 deletions
1
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.html
This file contains hidden or 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
1 change: 1 addition & 0 deletions
1
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/emptyState.jsx
This file contains hidden or 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
3 changes: 3 additions & 0 deletions
3
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.html
This file contains hidden or 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,3 @@ | ||
| <s-stack alignItems="center"> | ||
| <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text> | ||
| </s-stack> |
3 changes: 3 additions & 0 deletions
3
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/footerHelp.jsx
This file contains hidden or 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,3 @@ | ||
| <s-stack alignItems="center"> | ||
| <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text> | ||
| </s-stack> |
This file contains hidden or 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 hidden or 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
2 changes: 1 addition & 1 deletion
2
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/mediaCard.html
This file contains hidden or 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 hidden or 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
58 changes: 58 additions & 0 deletions
58
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.html
This file contains hidden or 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,58 @@ | ||
| <s-section padding="none"> | ||
| <s-stack gap="small-200"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center"> | ||
| <s-text-field icon="search" placeholder="Filter customers"></s-text-field> | ||
| <s-button commandFor="tagged-with">Tagged with</s-button> | ||
| <s-popover placement="bottom-start" id="tagged-with"> | ||
| <s-stack gap="small-200" padding="small-200"> | ||
| <s-text-field value="VIP" placeholder="Add tag"></s-text-field> | ||
| <s-link href="">Clear</s-link> | ||
| </s-stack> | ||
| </s-popover> | ||
| </s-grid> | ||
| <s-button variant="secondary">Save</s-button> | ||
| </s-grid> | ||
|
|
||
| <s-stack paddingInline="base"> | ||
| <s-clickable-chip removable>Tagged with VIP</s-clickable-chip> | ||
| </s-stack> | ||
|
|
||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base"> | ||
| <s-checkbox label="Showing 2 customers"></s-checkbox> | ||
| <s-select> | ||
| <s-option value="newest">Newest update</s-option> | ||
| <s-option value="oldest">Oldest update</s-option> | ||
| </s-select> | ||
| </s-grid> | ||
|
|
||
| <s-stack> | ||
| <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center"> | ||
| <s-stack direction="inline" gap="small" alignItems="center"> | ||
| <s-checkbox></s-checkbox> | ||
| <s-avatar></s-avatar> | ||
| <s-stack> | ||
| <s-heading>Mae Jemison</s-heading> | ||
| <s-text>Decatur, USA</s-text> | ||
| </s-stack> | ||
| </s-stack> | ||
| <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button> | ||
| </s-grid> | ||
| </s-clickable> | ||
| <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center"> | ||
| <s-stack direction="inline" gap="small" alignItems="center"> | ||
| <s-checkbox></s-checkbox> | ||
| <s-avatar></s-avatar> | ||
| <s-stack> | ||
| <s-heading>Ellen Ochoa</s-heading> | ||
| <s-text>Los Angeles, USA</s-text> | ||
| </s-stack> | ||
| </s-stack> | ||
| <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button> | ||
| </s-grid> | ||
| </s-clickable> | ||
| </s-stack> | ||
| </s-stack> | ||
| </s-section> | ||
58 changes: 58 additions & 0 deletions
58
packages/ui-extensions/src/surfaces/admin/components/patterns/examples/resourceList.jsx
This file contains hidden or 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,58 @@ | ||
| <s-section padding="none"> | ||
| <s-stack gap="small-200"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center"> | ||
| <s-text-field icon="search" placeholder="Filter customers"></s-text-field> | ||
| <s-button commandFor="tagged-with">Tagged with</s-button> | ||
| <s-popover placement="bottom-start" id="tagged-with"> | ||
mpshopify marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| <s-stack gap="small-200" padding="small-200"> | ||
| <s-text-field value="VIP" placeholder="Add tag"></s-text-field> | ||
| <s-link href="">Clear</s-link> | ||
| </s-stack> | ||
| </s-popover> | ||
| </s-grid> | ||
| <s-button variant="secondary">Save</s-button> | ||
| </s-grid> | ||
|
|
||
| <s-stack paddingInline="base"> | ||
| <s-clickable-chip removable>Tagged with VIP</s-clickable-chip> | ||
| </s-stack> | ||
|
|
||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base"> | ||
| <s-checkbox label="Showing 2 customers"></s-checkbox> | ||
| <s-select> | ||
| <s-option value="newest">Newest update</s-option> | ||
| <s-option value="oldest">Oldest update</s-option> | ||
| </s-select> | ||
| </s-grid> | ||
|
|
||
| <s-stack> | ||
| <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small"> | ||
mpshopify marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center"> | ||
| <s-stack direction="inline" gap="small" alignItems="center"> | ||
| <s-checkbox></s-checkbox> | ||
| <s-avatar></s-avatar> | ||
| <s-stack> | ||
| <s-heading>Mae Jemison</s-heading> | ||
| <s-text>Decatur, USA</s-text> | ||
| </s-stack> | ||
| </s-stack> | ||
| <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button> | ||
| </s-grid> | ||
| </s-clickable> | ||
| <s-clickable borderstyle="solid none none none" border="base" paddingInline="base" paddingBlock="small"> | ||
| <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center"> | ||
| <s-stack direction="inline" gap="small" alignItems="center"> | ||
| <s-checkbox></s-checkbox> | ||
| <s-avatar></s-avatar> | ||
| <s-stack> | ||
| <s-heading>Ellen Ochoa</s-heading> | ||
| <s-text>Los Angeles, USA</s-text> | ||
| </s-stack> | ||
| </s-stack> | ||
| <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button> | ||
| </s-grid> | ||
| </s-clickable> | ||
| </s-stack> | ||
| </s-stack> | ||
| </s-section> | ||
48 changes: 48 additions & 0 deletions
48
packages/ui-extensions/src/surfaces/admin/components/patterns/footerHelp.ab.doc.ts
This file contains hidden or 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,48 @@ | ||
| import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; | ||
|
|
||
| const data: ReferenceEntityTemplateSchema = { | ||
| name: 'Footer help', | ||
| isOneColumnLayout: false, | ||
| overviewPreviewDescription: | ||
| 'Footer help is used to refer merchants to more information related to the product or feature they’re using.', | ||
|
|
||
| description: `Footer help is used to refer merchants to more information related to the product or feature they’re using. | ||
|
|
||
| | Used to | Examples | | ||
| | --- | --- | | ||
| | Refer merchants to related help docs | Learn more about [shipping zones]| | ||
| | Offer support as a secondary option | [Contact us] about email marketing | | ||
|
|
||
| --- | ||
|
|
||
|
|
||
|
|
||
| `, | ||
| isVisualComponent: true, | ||
| category: 'Patterns', | ||
| subCategory: 'Compositions', | ||
| thumbnail: '/assets/templated-apis-screenshots/admin/patterns/footerHelp.png', | ||
| defaultExample: { | ||
| codeblock: { | ||
| title: 'Footer help', | ||
| tabs: [ | ||
| { | ||
| title: 'Preview', | ||
| code: 'examples/footerHelp.html', | ||
mpshopify marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| language: 'preview', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
|
|
||
| related: [ | ||
| { | ||
| name: 'Built for Shopify', | ||
| subtitle: 'Requirements', | ||
| url: '/docs/apps/launch/built-for-shopify/requirements', | ||
| type: 'component', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default data; | ||
51 changes: 51 additions & 0 deletions
51
packages/ui-extensions/src/surfaces/admin/components/patterns/resourceList.ab.doc.ts
This file contains hidden or 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,51 @@ | ||
| import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; | ||
|
|
||
| const data: ReferenceEntityTemplateSchema = { | ||
| name: 'Resource list', | ||
| isOneColumnLayout: false, | ||
| overviewPreviewDescription: | ||
| 'A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.', | ||
|
|
||
| description: `A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it. | ||
| . | ||
|
|
||
| | Used to | Examples | | ||
| | --- | --- | | ||
| | Display collections of similar resources | Campaigns, subscribers, social posts, templates| | ||
| | Help merchants find and select items | Search subscribers by email; Filter campaigns by status | | ||
| | Perform bulk actions on selected items | Tag subscribers; Archive campaigns; Publish selected posts | | ||
|
|
||
| --- | ||
|
|
||
|
|
||
|
|
||
| `, | ||
| isVisualComponent: true, | ||
| category: 'Patterns', | ||
| subCategory: 'Compositions', | ||
| thumbnail: | ||
| '/assets/templated-apis-screenshots/admin/patterns/resourceList.png', | ||
| defaultExample: { | ||
| codeblock: { | ||
| title: 'Resource list', | ||
| tabs: [ | ||
| { | ||
| title: 'Preview', | ||
| code: 'examples/resourceList.html', | ||
mpshopify marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| language: 'preview', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
|
|
||
| related: [ | ||
| { | ||
| name: 'Built for Shopify', | ||
| subtitle: 'Requirements', | ||
| url: '/docs/apps/launch/built-for-shopify/requirements', | ||
| type: 'component', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default data; | ||
This file contains hidden or 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
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.
Uh oh!
There was an error while loading. Please reload this page.