Storybook: Update Legacy/codex comparison table
Upgrade Codex to the latest version and add the new icon only buttons to our side by side table This is needed to help bring these inline. Bug: T314323 Change-Id: I7f59968cf5be6242e8002b11ca030c9bd4dd882d
This commit is contained in:
Jon Robson
Jdrewniak
parent
e0042bceca
commit
f9a3d795ef
|
|
@ -22,3 +22,7 @@ ul {
|
|||
.printfooter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vector-storybook-example-table tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 `
|
||||
<tr>
|
||||
<td>
|
||||
<h6>Regular icon</h6>
|
||||
${
|
||||
mustache.render( buttonTemplate, {
|
||||
label: 'Normal Icon',
|
||||
label: 'Normal Icon button',
|
||||
icon: 'add'
|
||||
} )
|
||||
}
|
||||
</td>
|
||||
<td>N/A</td>
|
||||
<td>
|
||||
<h6>Regular icon</h6>
|
||||
${el.outerHTML}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6>Small icon button</h6>
|
||||
${
|
||||
mustache.render( buttonTemplate, {
|
||||
label: 'Small icon button',
|
||||
class: 'mw-ui-icon-small',
|
||||
icon: 'add'
|
||||
} )
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<h6>Small icon button</h6>
|
||||
${el.outerHTML}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<h6>Quiet icon button</h6>
|
||||
${
|
||||
mustache.render( buttonTemplate, {
|
||||
label: 'Quiet Icon',
|
||||
|
|
@ -95,7 +140,9 @@ function makeIcon() {
|
|||
} )
|
||||
}
|
||||
</td>
|
||||
<td>N/A</td>
|
||||
<td>
|
||||
<h6>Quiet icon button</h6>
|
||||
${elQuiet.outerHTML}</td>
|
||||
</tr>`;
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +152,7 @@ function makeIcon() {
|
|||
* @return {string}
|
||||
*/
|
||||
function makeButtons( btns ) {
|
||||
return `<table>
|
||||
return `<table class="vector-storybook-example-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Legacy</th>
|
||||
|
|
|
|||
Loading…
Reference in New Issue