From 334e3361b4079ccd75c15811dd7c0a75c7c6dc9c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Fri, 3 Oct 2025 17:34:52 -0400 Subject: [PATCH] Docs: Add Planned Features to Navigation (#1539) * adding plannedBadge() macro + planned-badge.njk * adding planned features to sidebar.njk * adding .icon-shrink utility to utils.css * using icon-shrink on sidebar's experimental iconography * revising proBadge macro * defining params in a more clear manner * adding shrink param to visually reduce badge size * setting proBadge to shrink in sidebar.njk * addressing PR feedback * reverting proBadge shrink param * revisiting pro + sidebar wa-badge styling * removing text-transform from pro badge * scaling down sidebar-based wa-badges using 1 step below --wa-font-size-scale --- .../webawesome/docs/_includes/planned-badge.njk | 5 +++++ .../webawesome/docs/_includes/pro-badge.njk | 7 ++++--- packages/webawesome/docs/_includes/sidebar.njk | 17 +++++++++++------ packages/webawesome/docs/assets/styles/docs.css | 11 +++++++++++ .../webawesome/docs/assets/styles/utils.css | 17 ++++++++++++++++- 5 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 packages/webawesome/docs/_includes/planned-badge.njk diff --git a/packages/webawesome/docs/_includes/planned-badge.njk b/packages/webawesome/docs/_includes/planned-badge.njk new file mode 100644 index 000000000..8ca42c450 --- /dev/null +++ b/packages/webawesome/docs/_includes/planned-badge.njk @@ -0,0 +1,5 @@ +{% macro plannedBadge(plannedBadgeDescription, plannedBadgeId) %} + {% set badgeId = plannedBadgeId or ("planned-badge-" + ("" | uniqueId(8))) %} + Planned + {{ plannedBadgeDescription or "This is a planned feature" }} +{% endmacro %} diff --git a/packages/webawesome/docs/_includes/pro-badge.njk b/packages/webawesome/docs/_includes/pro-badge.njk index f5d05dd2a..d67d37372 100644 --- a/packages/webawesome/docs/_includes/pro-badge.njk +++ b/packages/webawesome/docs/_includes/pro-badge.njk @@ -1,5 +1,6 @@ -{% macro proBadge(proBadgeDescription, proBadgeId) %} - {% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %} +{% macro proBadge(params) %} + {% set description = params.description or "This requires access to Web Awesome Pro" %} + {% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %} Pro - {{ proBadgeDescription or "This requires access to Web Awesome Pro" }} + {{ description }} {% endmacro %} diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index 8f6a0dd04..dd13f997b 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -1,6 +1,7 @@ {# Search #} {% include "search-trigger-button.njk" %} {% from "pro-badge.njk" import proBadge %} +{% from "planned-badge.njk" import plannedBadge %} {# Getting started #}

Getting Started

@@ -40,7 +41,7 @@
  • @@ -62,26 +63,30 @@
    • +
  • Checkbox
  • Color Picker
    • +
  • Comparison
    • +
    • +
  • Details
  • Dialog
  • Divider
    • @@ -181,7 +186,7 @@
  • @@ -375,7 +380,7 @@
    • diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 88aeb67a5..938150bd7 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -181,6 +181,12 @@ wa-page > header { } } + li wa-badge { + /* adding 1 scale below --wa-font-size-2xs to handle badge proportions in sidebar nav */ + --font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */ + font-size: var(--font-size-3xs); + } + wa-details { --show-duration: 0; --hide-duration: 0; @@ -218,6 +224,11 @@ wa-button.delete { } } +/* planned sidebar item */ +.is-planned { + color: var(--wa-color-text-quiet); +} + #sidebar-close-button { display: none; } diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css index aadba9e93..52655e13d 100644 --- a/packages/webawesome/docs/assets/styles/utils.css +++ b/packages/webawesome/docs/assets/styles/utils.css @@ -73,7 +73,17 @@ color: white; background-color: var(--wa-brand-orange); border-color: var(--wa-brand-orange); - text-transform: uppercase; + + + wa-tooltip { + font-size: var(--wa-font-size-xs); + --max-width: unset; + } + } + + /* planned badge */ + wa-badge.planned { + background-color: var(--wa-color-neutral-fill-quiet); + color: var(--wa-color-neutral-on-quiet); + wa-tooltip { font-size: var(--wa-font-size-xs); @@ -145,5 +155,10 @@ wa-icon.icon-embiggen { font-size: round(1.125em, 1px); } + + /* decreasing visual size of icons in certain contexts (such as in sidebar nav) */ + wa-icon.icon-shrink { + font-size: round(0.875em, 1px); + } /* #endregion */ }