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
The npm "test" script runs, among other things
* npm -s run -s doc
* npm run build-storybook
since the doc script is
`jsdoc -c jsdoc.json && npm run build-storybook`
this results in building the storybook output twice. Remove
it from the "test" script.
Also, remove duplicate -s
Change-Id: Iee54e0c8455b752efc714c1fb1487b030ba007a1
* For .mwe-popups-image-pointer classes (portraits that have a thumbnail
with a pokey at top) Override the negative margin on the
.mwe-popups-discreet element which undesirably pulls mwe-popups-extract
up.
* Add a top padding to previews when the pokey is at top and the preview
is not a disambiguation and is a landscape preview to account for the
margin around the text getting clipped by clip-path.
* Apply display: block to image to stop whitespace from appearing below
the image.
Bug: T281170
Change-Id: I7ca6c922b2f4615103e4162d96fd90d891deb1df
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 Popups UI currently depends on the absolute positioning of the
top-level .mwe-popups element to correctly position it's footer.
This dependence on absolute positioning makes it difficult to debug
Popups in isolation (e.g. in Storybook).
Adding relative positioning to the .mwe-popups-container elements
maintains the correct footer positioning and removes the need for a
specialized layout in Storybook that accommodates absolute positioning.
(If changing the Popups layout to accommodate Storybook seems
unjustified, just think of it as increasing testability).
Bug: T271763
Change-Id: Ifba23afa1a2f401b025476a1fa464c2176fb40ec
User::getBoolOption() is deprecated and should be replaced with
UserOptionsLookup::getBoolOption()
Bug: T277600
Change-Id: I9a2118a6342bd5f145174428dcfb518cba4e439b
