Avoid deprecated meta-tag pattern #941

jonathansampson · 2024-12-14T22:57:10Z

Storybook now expects an exported meta object at the module level, rather than a element. This change modifies the stories to adhere to the new pattern. In a couple cases the name attribute of a <Story /> element needed to be changed to avoid attempted reuse of an identifier within the same context.

github-actions · 2024-12-14T23:00:04Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://941.pr.nala.bravesoftware.com/
✅ Commit preview: https://941.pr.nala.bravesoftware.com/commit-98ceb74829046adc0e82ab47859c8367c9d6a6e1/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119898 bytes
+ ./tokens/css/variables.css: 119898 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2024-12-14 22:58:30.587841493 +0000
+++ ./tokens/css/variables-android.css	2024-12-14 22:57:50.831498289 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2024-12-14 22:58:30.811843379 +0000
+++ ./tokens/css/variables-browser.css	2024-12-14 22:57:50.815498151 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2024-12-14 22:58:30.995844925 +0000
+++ ./tokens/css/variables-ios.css	2024-12-14 22:57:50.847498426 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2024-12-14 22:58:31.171846407 +0000
+++ ./tokens/css/variables-marketing.css	2024-12-14 22:57:50.875498667 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2024-12-14 22:58:31.315847619 +0000
+++ ./tokens/css/variables-news.css	2024-12-14 22:57:50.903498907 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2024-12-14 22:58:31.503849202 +0000
+++ ./tokens/css/variables-newtab.css	2024-12-14 22:57:50.911498976 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2024-12-14 22:58:31.671850617 +0000
+++ ./tokens/css/variables-search.css	2024-12-14 22:57:50.895498839 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2024-12-14 22:58:31.847852097 +0000
+++ ./tokens/css/variables-web3.css	2024-12-14 22:57:50.915499010 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2024-12-14 22:58:32.123854420 +0000
+++ ./tokens/css/variables.css	2024-12-14 22:57:50.663496846 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 14 2024 22:57:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning

Storybook drives me mental - why do they always change the way you're meant to do things? 😆

Thanks for making this change @jonathansampson! I did it in brave-core and it was a super manual process, so really appreciate it!

Storybook now expects an exported meta object at the module level, rather than a <meta /> element. This change modifies the stories to adhere to the new pattern.

github-actions · 2024-12-16T13:43:54Z

[puLL-Merge] - brave/leo@941

Description

This PR significantly refactors the Storybook stories for various components in the Leo design system. The main change is moving the metadata for each story into a <script context="module"> block and exporting it as a meta object. This change aims to improve the organization and maintainability of the stories.

Changes

Changes

alert.stories.svelte:
- Moved metadata to a <script context="module"> block
- Renamed "Alert" story to "Default Alert"
button.stories.svelte:
- Moved metadata to a <script context="module"> block
buttonMenu.stories.svelte:
- Moved metadata to a <script context="module> block
checkbox.stories.svelte:
- Moved metadata to a <script context="module> block
collapse.stories.svelte:
- Moved metadata to a <script context="module> block
dialog.stories.svelte:
- Moved metadata to a <script context="module> block
dropdown.stories.svelte:
- Moved metadata to a <script context="module> block
icon.stories.svelte:
- Moved metadata to a <script context="module> block
input.stories.svelte:
- Moved metadata to a <script context="module> block
label.stories.svelte:
- Moved metadata to a <script context="module> block
link.stories.svelte:
- Moved metadata to a <script context="module> block
navdots.stories.svelte:
- Moved metadata to a <script context="module> block
navigation.stories.svelte:
- Moved metadata to a <script context="module> block
progressBar.stories.svelte:
- Moved metadata to a <script context="module> block
- Renamed "Bar" story to "Default Bar"
progressRing.stories.svelte:
- Moved metadata to a <script context="module> block
- Renamed "Ring" story to "Default Ring"
radioButton.stories.svelte:
- Moved metadata to a <script context="module> block
segmentedControl.stories.svelte:
- Moved metadata to a <script context="module> block
textarea.stories.svelte:
- Moved metadata to a <script context="module> block
toggle.stories.svelte:
- Moved metadata to a <script context="module> block
tooltip.stories.svelte:
- Moved metadata to a <script context="module> block
Various token stories (e.g., browserFontTokens.stories.svelte, marketingFontTokens.stories.svelte, etc.):
- Moved metadata to a <script context="module> block
- Removed <Meta> component

sequenceDiagram
    participant Developer
    participant Storybook
    participant Component

    Developer->>Storybook: Loads story
    Storybook->>Component: Reads metadata from exported meta object
    Storybook->>Component: Renders component with args
    Component-->>Storybook: Returns rendered component
    Storybook-->>Developer: Displays story in UI

Possible Issues

The refactoring might cause issues with how Storybook interprets the stories, especially if there are any Storybook-specific features that rely on the previous structure.
Some components might require additional adjustments to work correctly with the new structure.

Security Hotspots

No significant security concerns were identified in this refactoring.

github-actions · 2024-12-16T13:45:57Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://941.pr.nala.bravesoftware.com/
✅ Commit preview: https://941.pr.nala.bravesoftware.com/commit-75520ebeeee8f436ce7b74e78b6406fa22f43e51/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6848 bytes
+ ./tokens/css/variables-browser.css: 6848 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7033 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 119898 bytes
+ ./tokens/css/variables.css: 119898 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2024-12-16 13:44:20.492462859 +0000
+++ ./tokens/css/variables-android.css	2024-12-16 13:43:41.048774283 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2024-12-16 13:44:20.852459999 +0000
+++ ./tokens/css/variables-browser.css	2024-12-16 13:43:41.028774432 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2024-12-16 13:44:21.140457703 +0000
+++ ./tokens/css/variables-ios.css	2024-12-16 13:43:41.068774136 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2024-12-16 13:44:21.292456493 +0000
+++ ./tokens/css/variables-marketing.css	2024-12-16 13:43:41.088773988 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2024-12-16 13:44:21.580454204 +0000
+++ ./tokens/css/variables-news.css	2024-12-16 13:43:41.116773780 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2024-12-16 13:44:21.888451758 +0000
+++ ./tokens/css/variables-newtab.css	2024-12-16 13:43:41.124773722 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2024-12-16 13:44:22.164449556 +0000
+++ ./tokens/css/variables-search.css	2024-12-16 13:43:41.108773840 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2024-12-16 13:44:22.472447109 +0000
+++ ./tokens/css/variables-web3.css	2024-12-16 13:43:41.132773662 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:41 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2024-12-16 13:44:22.928443484 +0000
+++ ./tokens/css/variables.css	2024-12-16 13:43:40.880775527 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Dec 13 2024 08:24:32 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Dec 16 2024 13:43:40 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

jonathansampson requested review from fallaciousreasoning, petemill and AlanBreck as code owners December 14, 2024 22:57

github-actions bot added the puLL-Merge label Dec 14, 2024

fallaciousreasoning approved these changes Dec 15, 2024

View reviewed changes

Avoid deprecated meta-tag pattern

75520eb

Storybook now expects an exported meta object at the module level, rather than a <meta /> element. This change modifies the stories to adhere to the new pattern.

jonathansampson force-pushed the sampson-meta-module-export branch from 98ceb74 to 75520eb Compare December 16, 2024 13:43

jonathansampson enabled auto-merge (squash) December 16, 2024 13:43

jonathansampson merged commit 9d2aaa0 into main Dec 16, 2024
6 checks passed

jonathansampson deleted the sampson-meta-module-export branch December 16, 2024 13:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Avoid deprecated meta-tag pattern #941

Avoid deprecated meta-tag pattern #941

jonathansampson commented Dec 14, 2024

github-actions bot commented Dec 14, 2024

fallaciousreasoning left a comment

github-actions bot commented Dec 16, 2024

Changes

github-actions bot commented Dec 16, 2024

Avoid deprecated meta-tag pattern #941

Avoid deprecated meta-tag pattern #941

Conversation

jonathansampson commented Dec 14, 2024

github-actions bot commented Dec 14, 2024

fallaciousreasoning left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 16, 2024

Description

Changes

Possible Issues

Security Hotspots

github-actions bot commented Dec 16, 2024