Commit graph

51 commits

Author SHA1 Message Date
WMDE-Fisch 5db2622939 Remove test and doc leftovers from ReferencePreviews
The code for that is implemented in the Cite extension now.

Bug: T355194
Change-Id: Id0bb508e6a7dbc56ef5e5717aa84eb7f63285c02
2024-10-07 19:28:53 +02:00
Eric Gardner 5d00381b87 build: Remove references to theme-wikimedia-ui-legacy
Previous changes in Codex have eliminated all differences between the
"legacy" build of the design tokens and the standard one.

This patch removes all references to the legacy build in preparation for the
upcoming removal of the legacy assets from Codex upstream.

Bug: T360806
Change-Id: Ib381fc6ea77d5cde21e064df3900acf005f31c9e
2024-04-24 10:09:45 -07:00
WMDE-Fisch 694b96a19f Set a global when reference previews are visible.
Used for tracking baseline stats in the Cite extension.

Also fixed the wireing of the Reference Preview type constant so
that the settings can be tracked. Not sure where this should go
best in the new code.

Bug: T353798
Change-Id: I1c434f0098ae23bd62256686a658e3d5ef7f70b9
2024-01-17 16:19:09 -08:00
Jon Robson 76c0504223 Disable animations in storybook
Needed for chromatic

Change-Id: I372c2a91f698738569ffdc0099508007056684ed
2023-09-15 18:15:08 +00:00
bwang 154912e5db Rename icon classes in Popups to use popups-icon prefix instead of mw-ui-icon, replace resource loader icons with codex
Bug: T345653
Change-Id: I19b9861850064df50d6b88cda748feff6231091c
2023-09-12 10:56:53 -05:00
bwang b78cfe50c9 Replace mediawiki.ui.icon with Codex, update preview markup and styles to be more consistent
- 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
2023-08-21 19:53:51 +00:00
bwang 6b659443b5 Update popups to use codex buttons over mediawiki.ui.buttons
- Provides missing accessible label for the settings button

Bug: T340256
Change-Id: I86972322ae34f1d1df8d79c66daa9e34091f9dd3
2023-07-10 16:03:36 -05:00
Jon Robson 9ee816a919 When extract is a string treat it as HTML
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
2023-07-07 10:09:28 -07:00
Jon Robson 504eefcc18 Fix storybook stories
This was broken when we switched from jQuery to native JavaScript

Change-Id: I318a51a7d8836370f795b1008b8a89b6ca0edb35
2023-06-30 09:41:53 -07:00
WMDE-Fisch e44c406ba2 Import theme-wikimedia-ui.less for storybook build
Not sure when this should have been added but the test were
failing because of this missing ressource.

Change-Id: I0267aae18d0f33ac3d607fb0b6013f108f2e5d83
2023-06-30 08:22:47 +02:00
Volker E c9052a599a storybook: Remove unused reference to 'mediawiki.ui/variables'
Follow-up to If35605e8336c8619c6230bc892b360edbfd16f62

Change-Id: I0a229b86ea7a6b4e804dfe474485d627a2a1ed35
2023-05-06 05:18:05 -07:00
Jon Robson ec50f3f6ff Fix storybook integration
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
2023-03-30 15:36:05 -07:00
Jon Robson 24925ec459 Fix storybook integration
Broken by Ie456dfbd703a0e7a0ad783909ca3ef5e86450d9c

Change-Id: I4b6a4817764210cbc4f9ce37be0f117dbc3b656b
2023-03-22 11:39:39 -07:00
Ed Sanders 780627c126 Remove unnecessary vendor prefixes and mixins for animations
Deprecated in I8d62aedb.

Change-Id: Id951fd394a2336920eddbba08dcb1a153b67b9f3
2022-06-09 17:22:19 +01:00
Func d62088f7cf Fix Popups storybook cases after renames in core
Change I3c3aba0c4c7078173c81102007bb06a9eb3a94a6 renamed some of these
core modules, which broke the storybooks of Popups. This should repair
them.
(Inspired by I65278f653056a97ecbe8679a40aabb68084086c6)

Change-Id: I6dfad7376f438e939723d59968768f3052a3096f
2021-12-18 13:31:13 +00:00
jdlrobson 497feaf77d Fix cog alignment
Bug: T289362
Change-Id: Id5efc685f8df2a71f465156932eca67c9c633141
2021-08-31 14:53:38 -07:00
jenkins-bot 21ba0c74a1 Merge "Handle clipped blockquote by adding blockquote fade out effect" 2021-08-25 21:48:00 +00:00
bwang a78546a19e Handle clipped blockquote by adding blockquote fade out effect
- Added styling to apply a psuedoelement to the blockquote
- Added a storybook story to cover blockquotes

Bug: T213107
Change-Id: I09706137fec00b3bff649180a559f4f663b71d90
2021-08-25 17:05:08 +00:00
jdlrobson 27e171d9a5 Design spec dimensions should be documented in storybook
Bug: T284643
Change-Id: I17995d48c57140f9243cadbc0e4cef29cb41e447
2021-08-24 14:17:49 -07:00
Clare Ming 48df0cbaea Fix popup preview regressions, add story
- 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
2021-08-13 13:50:13 -06:00
jdlrobson 7be869649d Storybook: Capture "panorama" style portrait and landscape examples
Reduce min-height per explanation in:
https://phabricator.wikimedia.org/T255549#7266861

Bug: T255549
Change-Id: I2871e8d0377268edb50a6de98ca6a247e9a794b9
2021-08-12 11:39:29 -07:00
jdlrobson a0754c8cf9 Storybook: Fix RTL
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
2021-08-06 14:40:10 +00:00
Thiemo Kreuz a01c31efd7 Show medium size (<320 wide, but >=250 high) images as well
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
2021-08-03 13:17:06 -06:00
jdlrobson f97d29923b Add reference previews to storybook
Change-Id: I8e9e2db66fa94b33abcf7c9cbaff8defe5003ef6
2021-07-22 23:59:26 +00:00
jdlrobson 1a62ae90cd Remove the page preview icon hacks
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
2021-07-21 23:20:17 +00:00
jenkins-bot faee7993b4 Merge "Use relative positioning with zero top,left,bottom,right properties in storybook" 2021-07-16 19:15:49 +00:00
Nicholas Ray 8aef7dca43 Use relative positioning with zero top,left,bottom,right properties in storybook
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
2021-07-16 12:13:43 -06:00
Jan Drewniak dbb58da86b [Storybook] Upgrade Storybook to v6.2.9
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
2021-07-16 15:38:29 +00:00
Jan Drewniak afda9e4574 [Storybook] Fixing missing images
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
2021-07-14 16:26:20 +00:00
Jan Drewniak 1e04551b1c [Storybook] Removing custom CSS grid and addons from Storybook
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
2021-07-14 12:54:55 +02:00
jenkins-bot 325789197b Merge "[Storybook] Remove unused Less file in Storybook folder." 2021-07-12 14:47:16 +00:00
Jan Drewniak 02f4650a01 [Storybook] Remove unused Less file in Storybook folder.
This file was used in the initial Storybook implementation but has been
replaced by `.storybook/mocks/custom.less`.

Bug: T271763
Change-Id: I24d2690db13edebdeeb09c5f37c097548007ef89
2021-07-12 13:58:49 +02:00
DannyS712 7bfad7e441 webpack.config.js: remove stray tab
Change-Id: I6926b87f03739986965ba82403257e10e99c2777
2021-07-07 06:43:07 +00:00
bwang dce03d9036 Fix setting button placement in article preview
The london thumbnail was also replaced with a larger size to fix the RTL landscape story in storybook

Bug: T276668
Change-Id: I00dfe4762c36f49c93144d1207013c41cf33007a
2021-04-28 15:24:45 -05:00
jdlrobson 9adf023eee Fix storybook IMG assets
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
2021-01-05 19:50:40 +00:00
Noam Rosenthal 4492b54a44 Performance optimization for popup rendering
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
2020-11-30 17:33:07 +02:00
jdlrobson 140b1e5828 Settings cog should come from icon pack
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
2020-11-12 05:57:57 -08:00
Volker E 8b6e85dd7c storybook: Update to account for new core LESS variables files
We're using Vector's 'mediawiki.skin.variables.less'
file, as it's Popups main interface.

Bug: T263064
Change-Id: Ib2b3726dddb95e8f7ae54e6c2d4cf52c70d0197a
2020-09-18 13:17:39 -07:00
jdlrobson 1803ac5b2d Storybook: Images should be relative uris
Follow up to I58493db15b27f148fcc1cf42ab0b0148ee291eb6

Bug: T236589
Change-Id: I305badda5a3f93684270bfe07d6cc19c92df3e07
2019-12-13 01:42:13 +00:00
jdlrobson 44239076af Use local files for storybook
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
2019-12-12 11:28:27 -08:00
jdlrobson 189b386a13 Publish storybook now we are using more modern node
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
2019-12-11 15:16:13 -08:00
Thiemo Kreuz 76e02fae98 Remove obsolete mediaWiki and jQuery aliases
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
2019-10-22 09:30:46 +02:00
Ed Sanders 2687d12c52 eslint: Remove valid-jsdoc override
Change-Id: I6a9936743a74afb528713f21e016838947fa1914
2019-08-15 08:00:24 +00:00
Timo Tijhof a3796a24ee Doc: Refer to Node versions without "v" prefix
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
2019-06-10 17:30:26 +01:00
Jan Drewniak da369d09ae Improving RTL support for the Storybook app
- 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
2019-03-25 11:19:15 +01:00
Thiemo Kreuz 4792151769 Split PreviewModel documentation into subclasses
See T218105 for discussion.

Bug: T218105
Change-Id: I0fde5de6e573e219f0937797bf10c20a01021a6a
2019-03-19 14:56:21 +01:00
Jan Drewniak bdb535c643 Add SVG masks to Storybook app
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
2019-03-06 14:21:33 +00:00
Thiemo Kreuz fb5b120515 Minor fix-ups to type hints in JavaScript code
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
2019-02-14 11:15:01 +01:00
WMDE-Fisch 5f602c985c Fixed typo
Change-Id: I9c61f3dcf059884ec7ea16f601009d72b26e0cda
2019-02-04 12:37:16 +00:00
jdlrobson 30c9de1d3a Lower node version
This now reflects the value inside:
https://github.com/storybooks/storybook/blob/next/package.json#L140

Change-Id: I2258d23b5edc80c6e608e431b87623373b19bdb9
2019-01-08 15:03:35 -08:00