Skip to content

Conversation

davebcn87
Copy link
Contributor

@davebcn87 davebcn87 commented Sep 29, 2025

Background

This PR adds comprehensive component examples to the Admin UI Extensions documentation for all components in the Actions category. These examples were automatically parsed and imported from the existing Polaris markdown documentation.

Solution

  • Enhanced Documentation Parser: Improved the markdown parsing script to support both .doc.ts and .ab.doc.ts files (App Bridge components)
  • Automated Example Generation: Extracted examples from Polaris markdown documentation and generated individual HTML example files
  • TypeScript Integration: Updated component documentation files with proper examples sections and TypeScript-safe character escaping

Components Updated

Actions Category (6 components, 49 examples total):

  • Button (14 examples):

    • Basic usage
    • Bulk actions
    • Component interactions
    • Delete confirmation
    • Form states
    • Icon only button
    • Link buttons
    • Loading state for merchant actions
    • Navigation to admin sections
    • Product save form
    • Tones
    • Toolbar icon buttons
    • Variants
    • With icon
  • ButtonGroup (6 examples + 1 updated):

    • Basic usage
    • Bulk actions in data tables
    • Destructive actions pattern
    • Form action buttons
    • Segmented appearance
    • Toolbar buttons with icons
  • Clickable (6 examples):

    • Accessibility with aria attributes
    • Basic button usage
    • Card with clickable action
    • Disabled link with aria
    • Form submit button
    • Link mode
  • ClickableChip (5 examples):

    • As a link
    • Basic usage
    • Disabled state
    • Multiple chips with proper spacing
    • With icon and remove button
  • Link (11 examples):

    • Basic links in text
    • Critical context links
    • Download links
    • External links
    • Links in banner context
    • Links in banner
    • Links in box container
    • Links in subdued text
    • Links with auto tone
    • Links with different tones
    • Links with language attribute
  • Menu (6 examples):

    • Basic menu
    • Customer actions menu
    • Menu with icons
    • Menu with links and disabled items
    • Menu with sections
    • Settings menu

Technical Changes

  • Updated .doc.ts files for all 6 Actions components
  • Enhanced parsing script with improved comma insertion logic and character escaping
  • Preserved existing default.html example files while adding new ones
  • Added comprehensive action component examples covering buttons, navigation, menus, and interactive elements

🎩 Testing Steps

  1. Run the documentation build:

    yarn docs:admin examples-actions
  2. Navigate to shopify-dev repo and test locally at docs/api/app-home/polaris-web-components/actions/

  3. Verify the newly added examples are displayed correctly for each component:

    • Button, ButtonGroup - test different variants, states, and groupings
    • Clickable - verify accessibility features and interaction modes
    • ClickableChip - test chip interactions and removal functionality
    • Link - confirm navigation behavior and styling variants
    • Menu - validate menu structures, sections, and item interactions
  4. Test that existing default.html examples still work as expected

Quality Assurance

  • All examples are sourced from official Polaris documentation
  • Examples include proper descriptions and usage context
  • TypeScript compilation passes without errors
  • Maintains backward compatibility with existing examples
  • Comprehensive coverage of action patterns, navigation, and interactive behaviors

Checklist

  • I have 🎩'd these changes
  • I have updated relevant documentation

@davebcn87 davebcn87 changed the title Examples actions Added examples to admin Actions components Sep 29, 2025
@davebcn87 davebcn87 marked this pull request as ready for review September 29, 2025 10:55
@davebcn87 davebcn87 force-pushed the examples-actions branch 2 times, most recently from 4061a1c to 2b8077f Compare September 30, 2025 12:00
@davebcn87 davebcn87 force-pushed the examples-structure-2 branch from 65c76cd to 2f81a08 Compare October 1, 2025 11:01
@davebcn87 davebcn87 force-pushed the examples-structure-2 branch from 2f81a08 to 45cd0e7 Compare October 1, 2025 14:23
@davebcn87 davebcn87 force-pushed the examples-structure-2 branch from 45cd0e7 to 06e2870 Compare October 1, 2025 14:40
@davebcn87 davebcn87 force-pushed the examples-structure-2 branch 2 times, most recently from 7bdb69c to ff921ac Compare October 3, 2025 15:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant