- Removes .mw-ui-icon and .mw-ui-icon-element
- Aligns markup/styles between generic and disambiguation previews
- Update padding for generic and disambiguation previews to be the same as other popups, results in minor visual changes
Bug: T341899
Change-Id: I9a58fc6a93160d07452ea6f903e1797dd9421d92
According to the docs:
The Element.append() method inserts a set of Node objects or string
objects after the last child of the Element.
String objects are inserted as equivalent Text nodes.
When given a string we want to treat these as HTML
Also fix the storybook which hinted at this being a problem
(incorrectly fixed in 504eefcc1)
Bug: T341318
Change-Id: I415c9821a6a37b45cf0f8a65f58a41bc7d0a042d
Not sure when this should have been added but the test were
failing because of this missing ressource.
Change-Id: I0267aae18d0f33ac3d607fb0b6013f108f2e5d83
Broken by If2b4073115d9082829e4917c87c167d18f5431d9
Change import to directly hit the Codex library
This should also allow web team to respond to Codex upgrades
at their own pace (via package.json)
Render functions must now be registered in storybook for
them to display. Follow up to
Iefe98c1f0422dbf034e385b1a41a859d030a2cf4
Change-Id: Iac9dede15f4de3a4d584f1e505e379764af6dcbf
Change I3c3aba0c4c7078173c81102007bb06a9eb3a94a6 renamed some of these
core modules, which broke the storybooks of Popups. This should repair
them.
(Inspired by I65278f653056a97ecbe8679a40aabb68084086c6)
Change-Id: I6dfad7376f438e939723d59968768f3052a3096f
- Added styling to apply a psuedoelement to the blockquote
- Added a storybook story to cover blockquotes
Bug: T213107
Change-Id: I09706137fec00b3bff649180a559f4f663b71d90
- Fix margin for page preview flipped-x.
- Fix margins for generic previews.
- Add error story to storybook.
- Fix minor typo, pageIds in MODELS.
Bug: T281170
Change-Id: I5b96719c1d08518cbd977590171974796fd10986
Provide containers for page previews examples
In storybook we avoid position absolute but this deviation from
how they behave in reality could lead to subtle differences that impact
the rendering of previews. It also doesn't allow to see the preview
in the context of the link which is an important part of visually
verifying the position of the pokey arrow.
This also allows us to rethink the broken RTL mode. We now scope
LTR rules to a LTR class that is present on the container, and use
the CSSJanus parsed stylesheet for RTL.
Change-Id: I189019824ddd6aa759790fd162ffcd543619a953
The requirement for landscape images is to be at least 320px
wide. The requirement for portrait images is more relaxed,
only 250px high. Images that fall between these two
requirements currently don't show a thumbnail, even if they
could.
This change affects a very specific group of images:
* Square images from 250 x 250 to 319 x 319.
* Landscape images from 251 x 250 to 319 x 250.
* Landscape images from 319 x 250 to 319 x 318.
The most extreme ratio is 319 x 250. This will be cut to
203 x 250. I.e. the absolute extreme are 58px missing left
and right, but never more.
Requested at https://www.mediawiki.org/wiki/Topic:Vwl97pm6as9fuf6k
Additional stories for testing more extreme small images:
* Small Tall - 300x1000px
* Small Short - 300x200px
Update tests accordingly.
Bug: T268999
Change-Id: I811f1c0e7e9b0c30280b36a61cc7831a5b9e58c8
Now the Vector icon stylesheet is aligned with the correct
design specification these should no longer be needed.
Additional changes:
- Fixes icon display in storybook for disambiguation links
Bug: T287058
Depends-On: Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
Change-Id: I02bfd7973352a03b5be4b6e82575e2209b8e4043
Instead of using static positioning which changes the behavior of
absolutely positioned elements inside .mwe-popups (such as the footer
and the pseudo-element pokey), use relative positioning but set the top,
left, right, and bottom properties to zero. This more accurately
simulates how the Popup actually behaves in production.
Bug: T271763
Change-Id: I4b588667eaa761286a5381c4b31bee6a2aa427e8
This removes the webpack.config.js file, moving the webpack config
into main.js, which replaces config.js.
- Moves the global jQuery into the webpack config in main.js.
- Removes the outdates .nvmrc file in the webpack folder.
- Moves the mockMediaWiki initialization from config.js into
index.stories.js
- Upgrades webpack to 4.22.2
Bug: T271763
Change-Id: Ie008d69e992625113ae98d52ad6d37186eb933de
At certain screen densities, Popups may request images of a certain size
which were previously unavailable.Changes a missing image in models.js
as well.
Bug: T271763
Change-Id: I6400de9be35c3f0cab116ceb76e52f8f2a4a8164
Removes the following add-ons and their configuration from Storybook:
- addon-cssresources
- addon-knobs
- addon-options
This will hopefully ease the upgrade to Storybook 6.
Removes the custom CSS grid used to position previews within the Storybook
instance in favour of a flexbox layout. This simplifies the creation
of previews for Storybook.
This change requires us to to add relative positioning to
`.mwe-popups-container` so that the footer is correctly positioned in the
popup without absolute positioning. This positioning has been moved to
be Storybook specific to avoid an regressions in production.
Bug: T271763
Change-Id: I9a97291cb4bca7d4cc60dad232a60f6f92c0adea
This file was used in the initial Storybook implementation but has been
replaced by `.storybook/mocks/custom.less`.
Bug: T271763
Change-Id: I24d2690db13edebdeeb09c5f37c097548007ef89
The london thumbnail was also replaced with a larger size to fix the RTL landscape story in storybook
Bug: T276668
Change-Id: I00dfe4762c36f49c93144d1207013c41cf33007a
When we changed the thumbnail size we changed the URIs to images
but didn't update the local storybook assets.
Bug: T266797
Change-Id: Iea4de1524a2f60cc759d59338882fe236e409bd2
Reduce layout/style thrashing by measuring all required geometries
at event handler, not waiting for delays/redux/style changes.
Use CSS bottom instead of top, to avoid having to measure the popup
before positioning it, if it's placed above the link ("flippedY").
Disable some test cases that relied on implementation detail of using
"top" CSS.
Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
To avoid continuously updating this cog, use the icon pack directly.
Use mw-ui-icon-small to control the size rather than custom CSS - this
reduces the amount of CSS overrides that are needed.
Also use `opacity` instead of icon SVG fill for coloring the icon. This
enables simple transition in interaction states.
Storybook: The settings cog will now be tied to the production icon.
Note for now this will not appear at all, as this code must first
have ridden the train. For local testing feel free to point to
localhost to verify this change.
Bug: T256504
Change-Id: I2a28666dbd644bb599146fabb84d148ff0167ed3
We're using Vector's 'mediawiki.skin.variables.less'
file, as it's Popups main interface.
Bug: T263064
Change-Id: Ib2b3726dddb95e8f7ae54e6c2d4cf52c70d0197a
Currently images do not display on docs.wikimedia.org
These need to be local due to the security restrictions there.
Bug: T213223
Bug: T236589
Change-Id: I58493db15b27f148fcc1cf42ab0b0148ee291eb6
Breaking change - I was having issues getting the knobs feature
to work so it has been removed for the time being.
Bug: T236589
Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5
Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
Notice how this actually reduces the size of the final, compiled index.js.
It's not much, but still.
One issue I noticed is that the coverage reports for the JS code stopped
working. I have no idea why.
Bug: T208951
Change-Id: I2fe92579574b3b1ba4d2dd064899eee944045a96
As of Node.js version 8, upstream has consistently avoided this
to avoid confusion with V8, the JavaScript engine that power
Node.js and Chromium.
Change-Id: I702cee3247cc69ab4aac313176c884c9c2785ea9
- Adds CSSJanus support on a story-by-story basis for the Storybook app.
- Adds an extra RTL portrait thumbnail test-case.
- Adds an extra RTL 'thin' portrait thumbnail test-case.
- Removes the `createContextualFragment` wrapper from stories,
as well as the wrapper divs.
Bug: T204627
Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
The SVG masks used for previews are clip paths, making it hard to
visualize what their actual shape is. This patch extracts the paths
inside those clip paths into new SVG objects and renders them in
the Storybook app.
Also removes a few previews from the portrait/landscape thumbnails
so that the Knobs addon can function properly.
Change-Id: I160746d8877deaa12ace925ce170323946ce532d
This patch also removes misplaced empty lines at the beginning of a
scope. In PHP code we even have a sniff for these. In JavaScript we
don't, but I suggest to be consistent about this.
Change-Id: Ic104ae8fe176da1dafa9bc783402adecb71de1f0
Storybook.js provides a framework for
viewing and working with UI components.
https://storybook.js.org/
This patch adds the Storybook.js UI library to Popups for
the purposes of viewing multiple previews at once.
This enables viewing page previews in the following states:
- with thumbnails
- without thumbnails
- with SVG thumbnails
- with narrow thumbnails
- with white background thumbnails
- in RTL languages
- in non-latin languages
- disambiguation popups
Storybook also allows users to change the image or text
of a popup through a GUI.
This patch sets up Storybook as a "mini" repo inside
the.storybook folder with a seperate package.json file
to avoid incompatibilities with the current webpack/babel
(or even Node) versions used in the Popups repo.
Storybook requires at least Node v8.3 to run.
(an .nvmrc file with 11.3.0 has been added to the .stories dir).
To start:
`cd .storybook && npm install && npm run start`.
Bug: T205989
Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
