Change Details

As a DS designer and developer, I want to have a new popover component available, because it is needed in the Simple Query Builder. **ACs** [] The popover component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4270%3A124 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gb58b70b70c_1_1 | component documentation ]]. [] The popover's component-level tokens ([[ https://github.com/wmde/wikit/pull/366 | available in this PR ]]) are created according to the naming convention used to style the component and provide all the needed styling values [] The popover is documented in Storybook according to the specifications (see below) **Position** Popovers do not have states, but we need to make it possible for implementers to define their position in relation to the element that triggers them (see notes): [] Top: right, center, left [] Bottom: right, center, left [] Left: bottom, center, top [] Right: bottom, center, top **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Popover// page including controls: they allow users to enter custom text to replace the default content and to change the popover position **behavioral ACs** [ ] can be closed/opened programmatically ** has prop: `isShown` or `isVisible` ** emits even `update:isShown` or `update:isVisible` so that it can be used with the `.sync` modifier [ ] is closed on click outside [ ] is closed on hover-out **technical ACs** [ ] note in Changelog [ ] is exported in [main.ts](https://github.com/wmde/wikit/blob/master/vue-components/src/main.ts) **Notes:** * It would be ideal if the position of the popover could be defined via prop * A very similar (but slightly more complex) version of this component was implemented by the Tainted References team ([[ https://doc.wikimedia.org/Wikibase/master/js/tainted-ref-storybook/?path=/story/popper--popper-component | see component in Storybook ]])

As a DS designer and developer, I want to have a new popover component available, because it is needed in the Simple Query Builder. **ACs** [] The popover component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4270%3A124 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gb58b70b70c_1_1 | component documentation ]]. [] The popover's component-level tokens ([[ https://github.com/wmde/wikit/pull/366 | available in this PR ]]) are created according to the naming convention used to style the component and provide all the needed styling values [] The popover is documented in Storybook according to the specifications (see below) **Position** Popovers do not have states, but we need to make it possible for implementers to define their position in relation to the element that triggers them (see notes): [] Top: right, center, left [] Bottom: right, center, left [] Left: bottom, center, top [] Right: bottom, center, top **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Popover// page including controls: they allow users to enter custom text to replace the default content and to change the popover position **behavioral ACs** [ ] can be closed/opened programmatically ** has prop: `isShown` or `isVisible` ** emits event `update:isShown` or `update:isVisible` so that it can be used with the `.sync` modifier [ ] is closed on click outside [ ] is closed on hover-out **technical ACs** [ ] note in Changelog [ ] is exported in [main.ts](https://github.com/wmde/wikit/blob/master/vue-components/src/main.ts) **Notes:** * It would be ideal if the position of the popover could be defined via prop * Regarding the popover triggering event: Ideally, the component should be revealed on `click` as a baseline, but implementers should be allowed to expand it (e.g. via prop) so mouse users can also see the popover on hover if needed. *The closing event should also be controlled by the implenenters, and ideally follow the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gafe759320e_0_32 | component documentation ]] recommendations (unless we want to enforce this behavior in the component – or components): popovers that open on hover, should close when hover is removed from the trigger. Otherwise, only clicking outside the popover should dismiss it. * A very similar (but slightly more complex) version of this component was implemented by the Tainted References team ([[ https://doc.wikimedia.org/Wikibase/master/js/tainted-ref-storybook/?path=/story/popper--popper-component | see component in Storybook ]])

As a DS designer and developer, I want to have a new popover component available, because it is needed in the Simple Query Builder. **ACs** [] The popover component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4270%3A124 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gb58b70b70c_1_1 | component documentation ]]. [] The popover's component-level tokens ([[ https://github.com/wmde/wikit/pull/366 | available in this PR ]]) are created according to the naming convention used to style the component and provide all the needed styling values [] The popover is documented in Storybook according to the specifications (see below) **Position** Popovers do not have states, but we need to make it possible for implementers to define their position in relation to the element that triggers them (see notes): [] Top: right, center, left [] Bottom: right, center, left [] Left: bottom, center, top [] Right: bottom, center, top **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Popover// page including controls: they allow users to enter custom text to replace the default content and to change the popover position **behavioral ACs** [ ] can be closed/opened programmatically ** has prop: `isShown` or `isVisible` ** emits event `update:isShown` or `update:isVisible` so that it can be used with the `.sync` modifier [ ] is closed on click outside [ ] is closed on hover-out **technical ACs** [ ] note in Changelog [ ] is exported in [main.ts](https://github.com/wmde/wikit/blob/master/vue-components/src/main.ts) **Notes:** * It would be ideal if the position of the popover could be defined via prop * Regarding the popover triggering event: Ideally, the component should be revealed on `click` as a baseline, but implementers should be allowed to expand it (e.g. via prop) so mouse users can also see the popover on hover if needed. *The closing event should also be controlled by the implenenters, and ideally follow the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.gafe759320e_0_32 | component documentation ]] recommendations (unless we want to enforce this behavior in the component – or components): popovers that open on hover, should close when hover is removed from the trigger. Otherwise, only clicking outside the popover should dismiss it. * A very similar (but slightly more complex) version of this component was implemented by the Tainted References team ([[ https://doc.wikimedia.org/Wikibase/master/js/tainted-ref-storybook/?path=/story/popper--popper-component | see component in Storybook ]])