release: 1.2.1

Author: wbrowar

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.2.1 - 2025-02-03
+### Added
+- Styled the scrollbars that appear on `<admin-bar>` and `<admin-bar-button>` popover elements.
+
+### Changed
+- Split padding on `<admin-bar-button>` and `<admin-bar-text>` elements into separate CSS Custom Properties, `--admin-bar-block-padding` and `--admin-bar-inline-padding`.
+
+
 ## 1.2.0 - 2024-12-30
 ### Added
 - Added definition lists and tables to `<admin-bar-text>` elements.

README.md

@@ -264,6 +264,49 @@ Text in `<admin-bar-text>` elements are not allowed to wrap by default, but addi
 </admin-bar>
 ```
 
+### Adding Definition Lists to Admin Bar Text Elements (in Popovers)
+
+The `dl-content` prop displays an array of key/value arrays in a `<dl>` element. While you otherwise can be creative with it, it’s intended to be used in popovers as part of `<admin-bar-button>` elements.
+
+To add a button that displays a list of items in a popover you can start with an `<admin-bar>` with an `<admin-bar-button>` element in it. In the `<admin-bar-button>` element, add the `popover` slot:
+
+```html
+<admin-bar>
+  <admin-bar-text>
+     List of items.
+     <span slot="popover"></span>
+  </admin-bar-text>
+</admin-bar>
+```
+
+Add an `<admin-bar-text>` element with the `dl-content` prop. The value of the prop is an array of arrays. For each second-level array, 2 values are required. The first value will always render in a `<dt>` element and the second value will render in its matching `<dd>` element.
+
+```html
+<admin-bar>
+  <admin-bar-text>
+     List of items.
+     <span slot="popover">
+        <admin-bar-text dl-content='[["Line 1 title", "Line 1 content"], ["Line 2 title", "Line 2 content"]]'></admin-bar-text>
+     </span>
+  </admin-bar-text>
+</admin-bar>
+```
+
+Notice how above the `dl-content` prop uses single quotes (`''`) for the attribute value? The contents of the `dl-content` prop need to be a valid JSON string. You can use single quotes so you can use double quotes like above, however, if you are working in a situation where you can’t do that, you can escape double quotes by using `&quot;` instead:
+
+```html
+<admin-bar>
+  <admin-bar-text>
+     List of items.
+     <span slot="popover">
+        <admin-bar-text dl-content="[&quot;Line 1 title&quot;, &quot;Line 1 content&quot;], [&quot;Line 2 title&quot;, &quot;Line 2 content&quot;]"></admin-bar-text>
+     </span>
+  </admin-bar-text>
+</admin-bar>
+```
+
+
+
 ### Admin Bar Text Public Properties
 
 | Attribute Name   | Type               | Default        | Description                                                                                     |
@@ -280,6 +323,8 @@ Text in `<admin-bar-text>` elements are not allowed to wrap by default, but addi
 
 #### Admin Bar Text Types
 
+Here are the TypeScript types that describe the formats for the props 
+
 ```typescript
 type TextDlContent = [string | number, string | number][]
 
@@ -290,11 +335,6 @@ interface TextTableContent {
 }
 ```
 
-| Name             | TypeScript Type                                          |
-|------------------|----------------------------------------------------------|
-| TextDlContent    | `[string | number, string | number][]`              |
-| TextTableContent | `{ footers?: string[]; headers?: string[]; rows: (string | number)[][] }` |
-
 ### Admin Bar Text Slots
 
 | Slot Name      | Description                                                       |
@@ -404,6 +444,12 @@ The `admin-bar.css` file has comments describing what each CSS Custom Property s
       /* The height of the bar and all of the buttons. */
       --admin-bar-height: 43px;
 
+      /* The vertical padding default for Admin Bar child elements. */
+      --admin-bar-block-padding: 0;
+
+      /* The horizontal padding default for Admin Bar child elements. */
+      --admin-bar-inline-padding: clamp(4px, 1vw, 13px);
+
       /* When `show-environment` is added to an `<admin-bar>` an environment
       warning will appear. The default looks like yellow, striped police tape,
       but you can use any CSS value used in the background shorthand property. */
@@ -455,7 +501,7 @@ The `admin-bar.css` file has comments describing what each CSS Custom Property s
       --admin-bar-button-popover-border-radius: var(--admin-bar-border-radius);
 
       /* The value of the padding property on `admin-bar-text` components. */
-      /*--admin-bar-text-padding: 0 clamp(4px, 1vw, 13px);*/
+      /*--admin-bar-text-padding: var(--admin-bar-block-padding) var(--admin-bar-inline-padding);*/
 
       /* The background for labels in `admin-bar-text` components. */
       --admin-bar-text-label-color-bg: rgb(255 255 255 / 0.9);

index.html

@@ -64,7 +64,7 @@
           </admin-bar-button>
         </span>
       </admin-bar-button>
-      <admin-bar-button>Popover Slot 4<span slot="popover"><admin-bar-text dl-content='[["Created at", "Dec 23, 2024 10:09 AM"],["Updated at", "Dec 29, 2024 5:23 PM"],["Entry ID", "5023"],["Long Text","Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!"]]'></admin-bar-text></span></admin-bar-button>
+      <admin-bar-button>Popover Slot 4<span slot="popover"><admin-bar-text dl-content="[[&quot;Line 1 title&quot;, &quot;Line 1 content&quot;], [&quot;Line 2 title&quot;, &quot;Line 2 content&quot;]]"></admin-bar-text></span></admin-bar-button>
       <admin-bar-button>Popover Slot 5<span slot="popover"><admin-bar-text table-content='{"footers":["Total 1","Total 2","Total 3"],"headers":["Column 1","Column 2","Column 3"],"rows":[["Item 1","Item 2","Item 3"],[1,2,3],["Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!","ILorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!","Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore hic ipsum quidem voluptate? Aspernatur eius esse impedit minus molestias, numquam odit qui quisquam veritatis vero. Animi inventore veritatis vero!"]]}'></admin-bar-text></span></admin-bar-button>
       <admin-bar-button>Popover Slot 6<span slot="popover"><admin-bar-text
               multi-line
@@ -76,6 +76,9 @@
       <admin-bar-text label-content="25" label-position="before">Badge goes before</admin-bar-text>
       <admin-bar-text label-content="25">Badge goes after</admin-bar-text>
       <admin-bar-text text-content="Simple plain text"></admin-bar-text>
+      <admin-bar-text style="--admin-bar-text-padding: 0;">
+        <div style="padding-inline: var(--admin-bar-inline-padding); height: 100%; align-content: center; background-color: goldenrod;">DIV</div>
+      </admin-bar-text>
       <admin-bar-text label-content="STAGING" style="--admin-bar-text-label-color-bg: var(--admin-bar-environment-bg-color);"></admin-bar-text>
     </admin-bar>
 

package.json

@@ -8,7 +8,7 @@
     "test:open": "cypress open"
   },
   "name": "admin-bar-component",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A framework- and CMS-agnostic admin bar web component.",
   "type": "module",
   "main": "dist/admin-bar.js",

public/admin-bar.css

@@ -45,6 +45,12 @@
     /* The height of the bar and all of the buttons. */
     --admin-bar-height: 43px;
 
+    /* The vertical padding default for Admin Bar child elements. */
+    --admin-bar-block-padding: 0;
+
+    /* The horizontal padding default for Admin Bar child elements. */
+    --admin-bar-inline-padding: clamp(4px, 1vw, 13px);
+
     /* When `show-environment` is added to an `<admin-bar>` an environment
     warning will appear. The default looks like yellow, striped police tape,
     but you can use any CSS value used in the background shorthand property. */
@@ -96,7 +102,7 @@
     --admin-bar-button-popover-border-radius: var(--admin-bar-border-radius);
 
     /* The value of the padding property on `admin-bar-text` components. */
-    /*--admin-bar-text-padding: 0 clamp(4px, 1vw, 13px);*/
+    /*--admin-bar-text-padding: var(--admin-bar-block-padding) var(--admin-bar-inline-padding);*/
 
     /* The background for labels in `admin-bar-text` components. */
     --admin-bar-text-label-color-bg: rgb(255 255 255 / 0.9);

src/components/AdminBar.ts

@@ -34,6 +34,9 @@ export class AdminBar extends LitElement {
       font-family: var(--admin-bar-font-stack);
       font-size: var(--admin-bar-font-size, 0.9rem);
       color: var(--admin-bar-color-text, rgb(255 255 255 / 0.8));
+      scrollbar-color: color-mix(in srgb, var(--admin-bar-color-text), transparent 20%)
+        color-mix(in srgb, var(--admin-bar-bg-color), transparent 90%);
+      scrollbar-width: thin;
 
       &.admin-bar--environment {
         grid-template-rows: var(--environment-height) var(--admin-bar-height, 43px);

src/components/AdminBarButton.ts

@@ -25,7 +25,7 @@ export class AdminBarButton extends LitElement {
       flex-wrap: nowrap;
       gap: 5px;
       align-items: center;
-      padding: 0 clamp(4px, 1vw, 13px);
+      padding: var(--admin-bar-block-padding) var(--admin-bar-inline-padding);
       min-width: 100%;
       height: var(--admin-bar-height, 43px);
       background-color: var(--admin-bar-button-color-bg, transparent);
@@ -52,7 +52,7 @@ export class AdminBarButton extends LitElement {
       }
 
       &.admin-bar-button--logout {
-        padding: 0 clamp(10px, 3vw, 20px);
+        padding: var(--admin-bar-block-padding) clamp(10px, 3vw, 20px);
 
         &:hover {
           --admin-bar-button-color-bg: var(--admin-bar-color-highlight-logout, var(--admin-bar-color-highlight));
@@ -95,6 +95,9 @@ export class AdminBarButton extends LitElement {
       border-radius: var(--admin-bar-button-popover-border-radius, var(--admin-bar-border-radius));
       box-shadow: var(--admin-bar-shadow);
       color: var(--admin-bar-button-popover-color-text, rgb(255 255 255));
+      scrollbar-color: color-mix(in srgb, var(--admin-bar-color-text), transparent 20%)
+        color-mix(in srgb, var(--admin-bar-bg-color), transparent 90%);
+      scrollbar-width: thin;
 
       @supports (position-anchor: --popover-anchor) and (position-try-fallbacks: --popover-top) {
         & {

src/components/AdminBarText.ts

@@ -28,7 +28,7 @@ export class AdminBarText extends LitElement {
       flex-wrap: nowrap;
       gap: 5px;
       align-items: center;
-      padding: var(--admin-bar-text-padding, 0 clamp(4px, 1vw, 13px));
+      padding: var(--admin-bar-text-padding, var(--admin-bar-block-padding) var(--admin-bar-inline-padding));
       height: var(--admin-bar-height, 43px);
       background-color: var(--admin-bar-text-color-bg, transparent);
       font-size: var(--font-size);
@@ -39,7 +39,7 @@ export class AdminBarText extends LitElement {
         color var(--admin-bar-transition-duration, 0.4s) ease-out;
 
       &:is(.multi-line, :has(dl, table)) {
-        padding: var(--admin-bar-text-padding, clamp(4px, 1vw, 13px));
+        padding: var(--admin-bar-text-padding, var(--admin-bar-inline-padding));
         height: unset;
         white-space: unset;