diff --git a/.storybook/common.less b/.storybook/common.less
index b42018d8..542af740 100644
--- a/.storybook/common.less
+++ b/.storybook/common.less
@@ -22,3 +22,7 @@ ul {
.printfooter {
display: none;
}
+
+.vector-storybook-example-table tr {
+ vertical-align: top;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ffe5176a..f1a4363c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3192,13 +3192,13 @@
}
},
"@vue/compiler-core": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
- "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+ "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/shared": "3.2.33",
+ "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
},
@@ -3212,27 +3212,27 @@
}
},
"@vue/compiler-dom": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
- "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+ "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
"dev": true,
"requires": {
- "@vue/compiler-core": "3.2.33",
- "@vue/shared": "3.2.33"
+ "@vue/compiler-core": "3.2.37",
+ "@vue/shared": "3.2.37"
}
},
"@vue/compiler-sfc": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
- "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+ "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/compiler-core": "3.2.33",
- "@vue/compiler-dom": "3.2.33",
- "@vue/compiler-ssr": "3.2.33",
- "@vue/reactivity-transform": "3.2.33",
- "@vue/shared": "3.2.33",
+ "@vue/compiler-core": "3.2.37",
+ "@vue/compiler-dom": "3.2.37",
+ "@vue/compiler-ssr": "3.2.37",
+ "@vue/reactivity-transform": "3.2.37",
+ "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"postcss": "^8.1.10",
@@ -3248,72 +3248,72 @@
}
},
"@vue/compiler-ssr": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
- "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+ "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
"dev": true,
"requires": {
- "@vue/compiler-dom": "3.2.33",
- "@vue/shared": "3.2.33"
+ "@vue/compiler-dom": "3.2.37",
+ "@vue/shared": "3.2.37"
}
},
"@vue/reactivity": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
- "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+ "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
"dev": true,
"requires": {
- "@vue/shared": "3.2.33"
+ "@vue/shared": "3.2.37"
}
},
"@vue/reactivity-transform": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
- "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+ "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/compiler-core": "3.2.33",
- "@vue/shared": "3.2.33",
+ "@vue/compiler-core": "3.2.37",
+ "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
}
},
"@vue/runtime-core": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
- "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+ "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
"dev": true,
"requires": {
- "@vue/reactivity": "3.2.33",
- "@vue/shared": "3.2.33"
+ "@vue/reactivity": "3.2.37",
+ "@vue/shared": "3.2.37"
}
},
"@vue/runtime-dom": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
- "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+ "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
"dev": true,
"requires": {
- "@vue/runtime-core": "3.2.33",
- "@vue/shared": "3.2.33",
+ "@vue/runtime-core": "3.2.37",
+ "@vue/shared": "3.2.37",
"csstype": "^2.6.8"
}
},
"@vue/server-renderer": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
- "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+ "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
"dev": true,
"requires": {
- "@vue/compiler-ssr": "3.2.33",
- "@vue/shared": "3.2.33"
+ "@vue/compiler-ssr": "3.2.37",
+ "@vue/shared": "3.2.37"
}
},
"@vue/shared": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
- "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+ "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==",
"dev": true
},
"@vue/test-utils": {
@@ -3520,21 +3520,15 @@
}
},
"@wikimedia/codex": {
- "version": "0.1.0-alpha.8",
- "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.1.0-alpha.8.tgz",
- "integrity": "sha512-oDnyYAZG2ecUsSsPVN18bztnsv19xXzxDetKLKd2CwAFqmKcdgGuPK7WcKfUNzVOMSesYjCFrlpqMpND8TULdQ==",
+ "version": "0.1.0-alpha.10",
+ "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-0.1.0-alpha.10.tgz",
+ "integrity": "sha512-nc8nNI/c89m/dxWRlkCXv5F+zd+OfsP4UwSJnlLnR88nrzctUH9xUDzhTKIiiWn2NyhyGDA2HCIBijul5jRvuQ==",
"dev": true
},
"@wikimedia/codex-icons": {
- "version": "0.1.0-alpha.8",
- "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.1.0-alpha.8.tgz",
- "integrity": "sha512-H/DEG4korFvszcJIveLKFHoUGfGUj4oC3sSb5gsocZLfNQCRRRkGEkTEY23V9pPX68ovejza2b44MeVfvbReEQ==",
- "dev": true
- },
- "@wikimedia/codex-search": {
- "version": "0.1.0-alpha.8",
- "resolved": "https://registry.npmjs.org/@wikimedia/codex-search/-/codex-search-0.1.0-alpha.8.tgz",
- "integrity": "sha512-tB0EavJGmCXyLsXWRZh1UZfHi3D0pY1vXPPAgC219/v1f3WxOZSIrbbRWhLfGqbm1nkrHB4pwmgVK6rWiGxF5g==",
+ "version": "0.1.0-alpha.10",
+ "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-0.1.0-alpha.10.tgz",
+ "integrity": "sha512-hWTAdOTzg99d0tRNZ/8zxPjqgkrEOiNUMSAIugn6dJr5b0R0+Vf+Uw//Nd5mA2IW4YOF58bDMemzqdajpObArQ==",
"dev": true
},
"@wikimedia/mw-node-qunit": {
@@ -20302,16 +20296,16 @@
"dev": true
},
"vue": {
- "version": "3.2.33",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
- "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
+ "version": "3.2.37",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+ "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
"dev": true,
"requires": {
- "@vue/compiler-dom": "3.2.33",
- "@vue/compiler-sfc": "3.2.33",
- "@vue/runtime-dom": "3.2.33",
- "@vue/server-renderer": "3.2.33",
- "@vue/shared": "3.2.33"
+ "@vue/compiler-dom": "3.2.37",
+ "@vue/compiler-sfc": "3.2.37",
+ "@vue/runtime-dom": "3.2.37",
+ "@vue/server-renderer": "3.2.37",
+ "@vue/shared": "3.2.37"
}
},
"vue-eslint-parser": {
diff --git a/package.json b/package.json
index 4fd3d269..a261a965 100644
--- a/package.json
+++ b/package.json
@@ -31,9 +31,9 @@
"@types/node-fetch": "2.5.7",
"@vue/test-utils": "2.0.1",
"@vue/vue3-jest": "27.0.0-alpha.4",
- "@wikimedia/codex": "0.1.0-alpha.8",
- "@wikimedia/codex-icons": "0.1.0-alpha.8",
- "@wikimedia/codex-search": "0.1.0-alpha.8",
+ "@wikimedia/codex": "0.1.0-alpha.10",
+ "@wikimedia/codex-icons": "0.1.0-alpha.10",
+ "@wikimedia/codex-search": "0.1.0-alpha.10",
"@wikimedia/mw-node-qunit": "6.4.0",
"@wikimedia/types-wikimedia": "0.3.3",
"babel-loader": "8.0.6",
@@ -56,6 +56,6 @@
"svgo": "2.8.0",
"ts-jest": "27.1.3",
"typescript": "4.5.5",
- "vue": "3.2.33"
+ "vue": "^3.2.37"
}
}
diff --git a/stories/ButtonsAndIcons.stories.js b/stories/ButtonsAndIcons.stories.js
index 4299c9b4..cbdd908e 100644
--- a/stories/ButtonsAndIcons.stories.js
+++ b/stories/ButtonsAndIcons.stories.js
@@ -73,20 +73,65 @@ function makeButton( props, text, icon ) {
* @return {string}
*/
function makeIcon() {
+ const el = document.createElement( 'div' );
+ const vm = createApp( {
+ render: function () {
+ // @ts-ignore
+ return h( CdxButton, {
+ 'aria-label': 'add'
+ }, [
+ h( CdxIcon, { icon: cdxIconAdd } )
+ ] );
+ }
+ } );
+ vm.mount( el );
+ const elQuiet = document.createElement( 'div' );
+ const vmQuiet = createApp( {
+ render: function () {
+ // @ts-ignore
+ return h( CdxButton, {
+ type: 'quiet',
+ 'aria-label': 'add'
+ }, [
+ h( CdxIcon, { icon: cdxIconAdd } )
+ ] );
+ }
+ } );
+ vmQuiet.mount( elQuiet );
return `
+ Regular icon
${
mustache.render( buttonTemplate, {
- label: 'Normal Icon',
+ label: 'Normal Icon button',
icon: 'add'
} )
}
|
- N/A |
+
+ Regular icon
+ ${el.outerHTML}
+ |
+ Small icon button
+ ${
+ mustache.render( buttonTemplate, {
+ label: 'Small icon button',
+ class: 'mw-ui-icon-small',
+ icon: 'add'
+ } )
+}
+ |
+
+ Small icon button
+ ${el.outerHTML} |
+
+
+
+ Quiet icon button
${
mustache.render( buttonTemplate, {
label: 'Quiet Icon',
@@ -95,7 +140,9 @@ function makeIcon() {
} )
}
|
- N/A |
+
+ Quiet icon button
+ ${elQuiet.outerHTML} |
`;
}
@@ -105,7 +152,7 @@ function makeIcon() {
* @return {string}
*/
function makeButtons( btns ) {
- return `