Skip to content

Commit 4f153ea

Browse files
M1zzclaude
M1zz
and
claude
committed
fix: reorder panels (Guidelines first) and rename nav to HIG Playground
- Move HIG Guidelines section above Controls panel in all 15 demo pages - Rename navigation link from "Playground" to "HIG Playground" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 7a810e1 commit 4f153ea

17 files changed

Lines changed: 526 additions & 496 deletions

‎site/en/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
<div class="nav">
7777
<a href="https://github.com/M1zz/HIGLab/blob/main/GETTING_STARTED.md" data-i18n="nav_start">🌱 Get Started</a>
7878
<a href="roadmap.html" data-i18n="nav_roadmap">🗺️ Roadmap</a>
79-
<a href="../hig-playground/" data-i18n="nav_playground">🎨 Playground</a>
79+
<a href="../hig-playground/" data-i18n="nav_playground">🎨 HIG Playground</a>
8080
<a href="#ai-reference">🤖 AI Reference</a>
8181
<a href="https://github.com/M1zz/HIGLab">GitHub</a>
8282
<a href="https://youtube.com/@leeo25" data-i18n="nav_channel">YouTube</a>

‎site/hig-playground/components/action-sheets.html‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -523,43 +523,6 @@ <h1 class="page-title">Action Sheets</h1>
523523
<!-- Right Panel -->
524524
<div class="right-panel">
525525

526-
<!-- Controls -->
527-
<div class="controls-panel">
528-
<div class="controls-header">&#9881;&#65039; Controls</div>
529-
<div class="controls-body">
530-
<!-- Number of Actions -->
531-
<div class="control-group">
532-
<label>Number of Actions</label>
533-
<div class="control-options" id="actionCountOptions">
534-
<div class="control-option active" data-value="2">2</div>
535-
<div class="control-option" data-value="3">3</div>
536-
<div class="control-option" data-value="4">4</div>
537-
</div>
538-
</div>
539-
<!-- Toggles -->
540-
<div class="control-group">
541-
<div class="control-toggle">
542-
<span class="control-toggle-label">Has Destructive Action</span>
543-
<div class="toggle-switch" id="toggleDestructive"></div>
544-
</div>
545-
</div>
546-
<div class="control-group">
547-
<div class="control-toggle">
548-
<span class="control-toggle-label">Show Title &amp; Message</span>
549-
<div class="toggle-switch on" id="toggleTitle"></div>
550-
</div>
551-
</div>
552-
</div>
553-
</div>
554-
555-
<!-- Code Preview -->
556-
<div class="code-preview">
557-
<div class="code-preview-header">
558-
<span>SwiftUI Code</span>
559-
<button class="copy-btn" onclick="copyCode()">Copy</button>
560-
</div>
561-
<div class="code-preview-body" id="codePreview"></div>
562-
</div>
563526

564527
<!-- Guidelines -->
565528
<div class="guidelines">
@@ -599,6 +562,45 @@ <h4>&#10007; Don't</h4>
599562
</div>
600563
</div>
601564

565+
<!-- Controls -->
566+
<div class="controls-panel">
567+
<div class="controls-header">&#9881;&#65039; Controls</div>
568+
<div class="controls-body">
569+
<!-- Number of Actions -->
570+
<div class="control-group">
571+
<label>Number of Actions</label>
572+
<div class="control-options" id="actionCountOptions">
573+
<div class="control-option active" data-value="2">2</div>
574+
<div class="control-option" data-value="3">3</div>
575+
<div class="control-option" data-value="4">4</div>
576+
</div>
577+
</div>
578+
<!-- Toggles -->
579+
<div class="control-group">
580+
<div class="control-toggle">
581+
<span class="control-toggle-label">Has Destructive Action</span>
582+
<div class="toggle-switch" id="toggleDestructive"></div>
583+
</div>
584+
</div>
585+
<div class="control-group">
586+
<div class="control-toggle">
587+
<span class="control-toggle-label">Show Title &amp; Message</span>
588+
<div class="toggle-switch on" id="toggleTitle"></div>
589+
</div>
590+
</div>
591+
</div>
592+
</div>
593+
594+
<!-- Code Preview -->
595+
<div class="code-preview">
596+
<div class="code-preview-header">
597+
<span>SwiftUI Code</span>
598+
<button class="copy-btn" onclick="copyCode()">Copy</button>
599+
</div>
600+
<div class="code-preview-body" id="codePreview"></div>
601+
</div>
602+
603+
602604
</div>
603605
</div>
604606

‎site/hig-playground/components/alerts.html‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -593,6 +593,49 @@ <h1 class="page-title">Alerts</h1>
593593
<!-- Right Panel -->
594594
<div class="right-panel">
595595

596+
597+
<!-- Guidelines -->
598+
<div class="guidelines">
599+
<div class="guidelines-header">&#128218; HIG Guidelines</div>
600+
<div class="guidelines-body">
601+
<div class="do-dont">
602+
<div class="do-card">
603+
<h4>&#10003; Do</h4>
604+
<ul>
605+
<li>Use alerts only for important information that requires acknowledgment</li>
606+
<li>Keep alert titles short and descriptive</li>
607+
<li>Use a two-button alert for decisions</li>
608+
<li>Place the preferred action on the trailing side (right)</li>
609+
<li>Use destructive style for actions that delete or remove data</li>
610+
<li>Use Cancel to let people abandon the action</li>
611+
</ul>
612+
</div>
613+
<div class="dont-card">
614+
<h4>&#10007; Don't</h4>
615+
<ul>
616+
<li>Don't use alerts for non-essential information</li>
617+
<li>Don't overuse alerts — they interrupt the user's flow</li>
618+
<li>Don't use an alert when an action sheet is more appropriate</li>
619+
<li>Don't include more than 3 buttons in a single alert</li>
620+
<li>Don't use vague titles like "Error" or "Warning"</li>
621+
<li>Don't use "Yes" / "No" — use descriptive verb labels</li>
622+
</ul>
623+
</div>
624+
</div>
625+
<p class="guideline-note">
626+
Alerts communicate important information that requires acknowledgment or a decision.
627+
They appear centered on screen with a dimmed background overlay.
628+
Use alerts sparingly — only for situations that truly require the user's immediate attention,
629+
such as confirming a destructive action or reporting a critical error.
630+
For <strong>2 buttons</strong>, they appear side by side horizontally.
631+
For <strong>3 or more buttons</strong>, they stack vertically.
632+
</p>
633+
<a href="https://developer.apple.com/design/human-interface-guidelines/alerts" class="guideline-link" target="_blank">
634+
Apple HIG: Alerts &rarr;
635+
</a>
636+
</div>
637+
</div>
638+
596639
<!-- Controls -->
597640
<div class="controls-panel">
598641
<div class="controls-header">&#9881;&#65039; Controls</div>
@@ -641,47 +684,6 @@ <h1 class="page-title">Alerts</h1>
641684
<div class="code-preview-body" id="codePreview"></div>
642685
</div>
643686

644-
<!-- Guidelines -->
645-
<div class="guidelines">
646-
<div class="guidelines-header">&#128218; HIG Guidelines</div>
647-
<div class="guidelines-body">
648-
<div class="do-dont">
649-
<div class="do-card">
650-
<h4>&#10003; Do</h4>
651-
<ul>
652-
<li>Use alerts only for important information that requires acknowledgment</li>
653-
<li>Keep alert titles short and descriptive</li>
654-
<li>Use a two-button alert for decisions</li>
655-
<li>Place the preferred action on the trailing side (right)</li>
656-
<li>Use destructive style for actions that delete or remove data</li>
657-
<li>Use Cancel to let people abandon the action</li>
658-
</ul>
659-
</div>
660-
<div class="dont-card">
661-
<h4>&#10007; Don't</h4>
662-
<ul>
663-
<li>Don't use alerts for non-essential information</li>
664-
<li>Don't overuse alerts — they interrupt the user's flow</li>
665-
<li>Don't use an alert when an action sheet is more appropriate</li>
666-
<li>Don't include more than 3 buttons in a single alert</li>
667-
<li>Don't use vague titles like "Error" or "Warning"</li>
668-
<li>Don't use "Yes" / "No" — use descriptive verb labels</li>
669-
</ul>
670-
</div>
671-
</div>
672-
<p class="guideline-note">
673-
Alerts communicate important information that requires acknowledgment or a decision.
674-
They appear centered on screen with a dimmed background overlay.
675-
Use alerts sparingly — only for situations that truly require the user's immediate attention,
676-
such as confirming a destructive action or reporting a critical error.
677-
For <strong>2 buttons</strong>, they appear side by side horizontally.
678-
For <strong>3 or more buttons</strong>, they stack vertically.
679-
</p>
680-
<a href="https://developer.apple.com/design/human-interface-guidelines/alerts" class="guideline-link" target="_blank">
681-
Apple HIG: Alerts &rarr;
682-
</a>
683-
</div>
684-
</div>
685687

686688
</div>
687689
</div>

‎site/hig-playground/components/buttons.html‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,45 @@ <h1 class="page-title">Buttons</h1>
473473
<!-- Right Panel -->
474474
<div class="right-panel">
475475

476+
477+
<!-- Guidelines -->
478+
<div class="guidelines">
479+
<div class="guidelines-header">&#128218; HIG Guidelines</div>
480+
<div class="guidelines-body">
481+
<div class="do-dont">
482+
<div class="do-card">
483+
<h4>&#10003; Do</h4>
484+
<ul>
485+
<li>Use Filled style for the primary action</li>
486+
<li>Use verbs or short verb phrases as labels</li>
487+
<li>Use title case for button titles</li>
488+
<li>Limit button text to one or two words</li>
489+
<li>Use system-provided button styles</li>
490+
</ul>
491+
</div>
492+
<div class="dont-card">
493+
<h4>&#10007; Don't</h4>
494+
<ul>
495+
<li>Don't use multiple Filled buttons side by side</li>
496+
<li>Don't use overly long button labels</li>
497+
<li>Don't use a button when a link is more appropriate</li>
498+
<li>Don't use destructive style for non-destructive actions</li>
499+
</ul>
500+
</div>
501+
</div>
502+
<p class="guideline-note">
503+
iOS provides four button styles: <strong>Filled</strong> (borderedProminent) for primary actions,
504+
<strong>Tinted</strong> (bordered with tint) for secondary actions,
505+
<strong>Bordered</strong> for tertiary actions, and
506+
<strong>Plain</strong> (borderless) for minimal emphasis.
507+
Always use the highest emphasis button for the most important action.
508+
</p>
509+
<a href="https://developer.apple.com/design/human-interface-guidelines/buttons" class="guideline-link" target="_blank">
510+
Apple HIG: Buttons &rarr;
511+
</a>
512+
</div>
513+
</div>
514+
476515
<!-- Controls -->
477516
<div class="controls-panel">
478517
<div class="controls-header">&#9881;&#65039; Controls</div>
@@ -537,43 +576,6 @@ <h1 class="page-title">Buttons</h1>
537576
.<span class="func">controlSize</span>(.<span class="prop">regular</span>)</div>
538577
</div>
539578

540-
<!-- Guidelines -->
541-
<div class="guidelines">
542-
<div class="guidelines-header">&#128218; HIG Guidelines</div>
543-
<div class="guidelines-body">
544-
<div class="do-dont">
545-
<div class="do-card">
546-
<h4>&#10003; Do</h4>
547-
<ul>
548-
<li>Use Filled style for the primary action</li>
549-
<li>Use verbs or short verb phrases as labels</li>
550-
<li>Use title case for button titles</li>
551-
<li>Limit button text to one or two words</li>
552-
<li>Use system-provided button styles</li>
553-
</ul>
554-
</div>
555-
<div class="dont-card">
556-
<h4>&#10007; Don't</h4>
557-
<ul>
558-
<li>Don't use multiple Filled buttons side by side</li>
559-
<li>Don't use overly long button labels</li>
560-
<li>Don't use a button when a link is more appropriate</li>
561-
<li>Don't use destructive style for non-destructive actions</li>
562-
</ul>
563-
</div>
564-
</div>
565-
<p class="guideline-note">
566-
iOS provides four button styles: <strong>Filled</strong> (borderedProminent) for primary actions,
567-
<strong>Tinted</strong> (bordered with tint) for secondary actions,
568-
<strong>Bordered</strong> for tertiary actions, and
569-
<strong>Plain</strong> (borderless) for minimal emphasis.
570-
Always use the highest emphasis button for the most important action.
571-
</p>
572-
<a href="https://developer.apple.com/design/human-interface-guidelines/buttons" class="guideline-link" target="_blank">
573-
Apple HIG: Buttons &rarr;
574-
</a>
575-
</div>
576-
</div>
577579

578580
</div>
579581
</div>

‎site/hig-playground/components/context-menus.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,47 @@ <h1 class="page-title">Context Menus</h1>
588588
<!-- Right Panel -->
589589
<div class="right-panel">
590590

591+
592+
<!-- Guidelines -->
593+
<div class="guidelines">
594+
<div class="guidelines-header">&#128218; HIG Guidelines</div>
595+
<div class="guidelines-body">
596+
<div class="do-dont">
597+
<div class="do-card">
598+
<h4>&#10003; Do</h4>
599+
<ul>
600+
<li>Use context menus for secondary actions</li>
601+
<li>Keep the number of items concise (under 10)</li>
602+
<li>Group related actions with dividers</li>
603+
<li>Place destructive actions at the bottom</li>
604+
<li>Use SF Symbols for recognizable icons</li>
605+
<li>Include a preview when appropriate</li>
606+
</ul>
607+
</div>
608+
<div class="dont-card">
609+
<h4>&#10007; Don't</h4>
610+
<ul>
611+
<li>Don't use context menus for primary actions</li>
612+
<li>Don't put too many items in a single menu</li>
613+
<li>Don't hide essential functionality only in context menus</li>
614+
<li>Don't mix destructive with non-destructive without separation</li>
615+
<li>Don't nest submenus more than one level deep</li>
616+
</ul>
617+
</div>
618+
</div>
619+
<p class="guideline-note">
620+
Context menus let people access functionality related to an onscreen item
621+
without cluttering the interface. The system displays a context menu when someone
622+
touches and holds (long-presses) or 3D Touches an element. Context menus show
623+
a preview of the content along with a list of relevant commands. Use
624+
<strong>.contextMenu</strong> modifier in SwiftUI to add context menus to any view.
625+
</p>
626+
<a href="https://developer.apple.com/design/human-interface-guidelines/context-menus" class="guideline-link" target="_blank">
627+
Apple HIG: Context Menus &rarr;
628+
</a>
629+
</div>
630+
</div>
631+
591632
<!-- Controls -->
592633
<div class="controls-panel">
593634
<div class="controls-header">&#9881;&#65039; Controls</div>
@@ -632,45 +673,6 @@ <h1 class="page-title">Context Menus</h1>
632673
<div class="code-preview-body" id="codePreview"></div>
633674
</div>
634675

635-
<!-- Guidelines -->
636-
<div class="guidelines">
637-
<div class="guidelines-header">&#128218; HIG Guidelines</div>
638-
<div class="guidelines-body">
639-
<div class="do-dont">
640-
<div class="do-card">
641-
<h4>&#10003; Do</h4>
642-
<ul>
643-
<li>Use context menus for secondary actions</li>
644-
<li>Keep the number of items concise (under 10)</li>
645-
<li>Group related actions with dividers</li>
646-
<li>Place destructive actions at the bottom</li>
647-
<li>Use SF Symbols for recognizable icons</li>
648-
<li>Include a preview when appropriate</li>
649-
</ul>
650-
</div>
651-
<div class="dont-card">
652-
<h4>&#10007; Don't</h4>
653-
<ul>
654-
<li>Don't use context menus for primary actions</li>
655-
<li>Don't put too many items in a single menu</li>
656-
<li>Don't hide essential functionality only in context menus</li>
657-
<li>Don't mix destructive with non-destructive without separation</li>
658-
<li>Don't nest submenus more than one level deep</li>
659-
</ul>
660-
</div>
661-
</div>
662-
<p class="guideline-note">
663-
Context menus let people access functionality related to an onscreen item
664-
without cluttering the interface. The system displays a context menu when someone
665-
touches and holds (long-presses) or 3D Touches an element. Context menus show
666-
a preview of the content along with a list of relevant commands. Use
667-
<strong>.contextMenu</strong> modifier in SwiftUI to add context menus to any view.
668-
</p>
669-
<a href="https://developer.apple.com/design/human-interface-guidelines/context-menus" class="guideline-link" target="_blank">
670-
Apple HIG: Context Menus &rarr;
671-
</a>
672-
</div>
673-
</div>
674676

675677
</div>
676678
</div>

0 commit comments

Comments
 (0)