ampproject / wg-components Goto Github PK

Responsible for AMP components, the overall health of AMP Pages, analytics features, and integrations with partner technologies. Facilitator: @alanorozco

License: Creative Commons Attribution 4.0 International

wg-components's Introduction

wg-components

wg-components Working Group is responsible for AMP components, the overall health of AMP Pages, analytics features, and integrations with partner technologies.

For overall accessibility, this group is also the first point of contact, however each WG is responsbile for ensuring accessibility within their areas of responsibility.

Facilitator: @alanorozco

Current Members

@alanorozco - Alan Orozco (Facilitator)
@rebeccanthomas - Rebecca Thomas
@kristoferbaxter - Kristofer Baxter
@dmanek - Dhruv Manek

Github team https://github.com/orgs/ampproject/teams/wg-components also includes Components WG members.

Communication Channels

Components Working Group members will use #wg-components channel on AMP's Slack (signup) for real-time discussion. The channel is open to anyone, regardless of membership in UI working group.
Components Working Group will have Sprint planning meetings once every 2 weeks. To join in please dial into the following Hangouts Meet room. You can also duplicate this calendar reminder to remind yourself of this meeting.
Components Working Group will post Status Updates every two weeks as an issue labeled with Type: Status Update in this repository.
Components Working Group will post Announcements and Notices regarding events as an issue labeled with Type: Event in this repository.

Any bugs or feature requests related to AMP should NOT be filed in this repository and https://github.com/ampproject/amphtml/issues should be used instead.

@ampproject/wg-components can be used to mention the Components Working Group in issues and PRs.

Code of Conduct

UI Working Group follows the AMP open source project code of conduct.

wg-components's People

Contributors

Stargazers

Watchers

Forkers

renovate-bot ericfs pbakaus dalavancloud bhanditz zhouyx spencerx sebastianbenz mdlglobal-atlassian-net muskanmahajan37 dmanek isabella232 micajuine-ho caroqliu alanorozco seanpm2001

wg-components's Issues

wg-ui-and-a11y Quarterly Status Update - January 2020

What was accomplished

Inline autocomplete component

Allows for inline autosuggest use-cases
Server and client side filtering
Fully accessible with keyboard and screen reader

Better menu experience with `<amp-sidebar>`

A new sidebar that allows better nesting of both an accordion and drill down menu.

Accordion menu:
TODO: Insert GIF

Drilldown:

Better responsive desktop/mobile experience via <amp-mega-menu> (Reference documentation)
A component that allows you to have a mega menu on desktop. Important for SEO.
TODO: Insert GIF
Is available to be used with <amp-sidebar> 0.1

`<amp-next-page>` (Reference documentation)

<amp-pixel> support
73% reduction in bundle size
Performance boost to amp-next-page 0.1 by preventing premature rendering of pages

`<amp-video dock>` (Reference documentation)

Various video docking improvements,:
- Return to video
  TODO: Insert GIF
- Docking in viewer
  TODO: Insert GIF
- Docking multiple videos
  TODO: Insert GIF

Performance measurement chrome extension

Will help us debug UI component performance

REMOVED User-location component

- Removed since no one is currently using it and the API is inconsistent with <am-geo>

Bugs fixes worth mentioning:

A11y Fixes:
- a11y for amp-nested-menu (aria-expanded and keyboard navigation support)
Component Maintenance:

What's next

All-new Carousel components

<amp-base-carousel> : Next generation amp-carousel with many bug fixes and new features. Code complete
<amp-stream-gallery>: High level for scrolling carousels. Code complete
<amp-inline-gallery>: High level component that supports captions, thumbnails and progress dots.

`<amp-next-page>` (Reference documentation)

Better API
Improved handling of sticky/fixed elements
Infinite loading of documents (with memory management)
Better default separator and bookend
Templated separators and bookends
Support for amp-analytics, and more!

Bento components

Onboard on to the Bento project
Work with the @ampproject/wg-bento to release new Bento components.

wg-ui-and-a11y Status Update 2020-03-02

What was accomplished

new UI person 🎉🎉🎉
React Training
styling in Bento discussion and design document
fullscreen action versus fullscreenEnter event -- aliased action for backwards compatibility/interface consistency
amp-video-iframe jwplayer integration default (it's easier now)
annotated media components with common i-amphtml-media-component class name
amp-carousel autoplay bug on amp4ads
static configured component transformer -- first step towards declarative video players
proposal to use structured data for describing hero videos for a transform

Lessons learned

If there is a certain interface inconsistency, fix it under one cohesive implementation and keep the redundant concept as an alias for backwards compatibility. We have certain things in the codebase where the name changes but the concept stays the same.

What's next

Launch timeago v2 under experimental
amp-list layout=container resolution
declarative video players
video docking interactivity/nudging between multiple videos

wg-ui-and-a11y Status Update 2019-03-15

What was accomplished

New & Launches ✨ 🚀

✨ swipe-to-dismiss UX for lightbox gallery
🚀 amp list infinite scroll is fully launched.
🚀 auto image lightboxing at 50% of production.

Bug fixes, polish & misc 🐛 💅 🔢

🐛 IE11 fix for forms
🐛 Workaround fix for video autoplay regression in Chrome 72
🐛 amp-fx="float-in-(top|bottom)" fix for when inside viewer.

UX & UXR 👩‍🎨 👨‍🎨 🔬

Default UI exploration to brings a unified and codified style to amp components.

Ongoing Projects 🏗

`auto lightbox images`

more work on amp-carousel support

`amp-carousel v2`

amp-inline-gallery prototype of captions, thumbnails and dots.

`auto image sizes`

In origin trial

`amp-autocomplete`

MVP implementation done.

`animationWorklet for amp-animation`

Reviewed with Web Platform team, new ScrollTimeline API is being designed.

New E2E functional testing framework

headless support and more command line flags

What's next 🦄

Fix It Week!
Implementation of default loaders
amp-autocomplete: demos and bug bash of MVP
auto lightbox images: ramp up to 100%
amp-live-list support for SxG
AMPConf prep
Start of integrating e2e testing framework with Travis CI

Thanks @ampproject/wg-ui-and-a11y !

wg-ui Status Update 2019-02-04

What was accomplished

`amp-input-mask`(Experimental)

Various bug fixes
Canary launch planned for next week

`amp-date-display`(Launched in Canary)

Launched in Dev Channel
Full launch next week

`amp-video dock`(Launched in Canary)

Various bug fixes
Launched in Canary for amp-video, amp-youtube, amp-brightcove, amp-video-iframe

`amp-list` show more and infinite scroll

Various bug fixes
Original Trial enabled

`auto lightbox images`

Experimental in Canary
Various heuristics changes

`amp-carousel v2`

Intent to Implement design created ampproject/amphtml#20595 Feedback welcome!
Support for amp-lightbox-gallery added

New E2E functional testing framework

Support for experiments

UX

Default loaders user study
Swipe to dismiss UX decisions
DevX research planning
Carousel UX interaction spec

Misc features and fixes

New visual tests for amp-sidebar, amp-accordion, (Thanks @danielrozenberg for the workshop!)
Fix for amp-lightbox-gallery in single item mode ampproject/amphtml#20516
A11Y fix for layout=intrinsic ampproject/amphtml#20581
Prototyping Vibration API access in AMP
Faster localhost:8000 homepage

What's next

UI Working Group will be doing a FixIt sprint for the next two based on the items in this list: https://github.com/ampproject/amphtml/projects/72
docking support for amp-ima-video
Allowing automatic scrolling in sidebar
Kick off work on amp-autocomplete
AMP UI WG is welcoming a new member next week!

/cc @ampproject/wg-ui

wg-ui-and-a11y Meeting 2020-04-13

What was accomplished

Enabled prerendering on amp-social-share
Stabilized visual-diff tests:
- amp-sidebar
- amp-accordion
amp-list[layout=container] P0, rollback, post mortems
amp-selector:0.2 in Bento
Support for amp-animation in Stories
- writing base tests to increase confidence
- implementation in progress
Fixed navigator.share causing an exception on user cancel for amp-social-share
Fixed amp-social-share:0.2 assertion for type=system
amp-list[single-items] accessibility fix for role attribute
amp-recaptcha-input[global] attribute support
amp-form supporting encoding type attribute for form submission
gulp storybook tasks
amp-next-page url issue fix

Lessons learned

There are different levels of logging based on assertion types i.e. devAssert vs user().warn()
Write tests early and often -- when we don't have tests for a feature and other features are written on top of it that don't allow it to write tests, you have to refactor existing features before you can even add tests.
Some unit tests unnecessarily manipulate internal component state instead of waiting for lifecycle signals as natural cues (forcing buildCallback instead of waiting for whenBuilt)

What's next

amp-carousel:0.2 stability related bugs
Adding features to <amp-story-animation>: CSS extension support, viewport units and sequencing
React training
Storybook examples for a component

wg-ui-and-a11y Quarterly Working Group Update - Oct 2019

WG Processes

Moved our meetings to public meetings. See here for details on how to join.
Working with the AC and TSC on how to work in the Open from idea to launch.
Change in WG Facilitators from @aghassemi to @nainar
Added 3 new members - @kristoferbaxter, @wassgha and @leafsy. All Googlers.

What was accomplished

Autocomplete component

Allows for autosuggest use-cases
Server and client side filtering
Fully accessible with keyboard and screen reader

All-new Loaders

New improved loaders based UX research
Launched to 100% of AMP pages.
Blog post explaining design philosophy here
Why was this difficult: Getting pixel perfect performant animations is hard! Also had an issue with Chrome 77 with LayoutNG enabled. Had to ship a workaround on our end.

Floating headers

Allows for sticky headers that hide/show based on user scroll
Why was this difficult: Adding support for iOS was hard.

`<amp-carousel>` V2

Same API as <amp-carousel> V1, better performance.
Developers need to upgrade the version of <amp-carousel> they are using to 0.2.
Why was this difficult: Making sure implementation of browser primitives we rely on are interoperable across browsers. E.g. scroll-snap

Add `<amp-megaphone>`

Embeds podcast episodes and playlists from http://megaphone.fm (requested by CNET)
Allows the new component to be embedded inside <amp-story>

Add parallax support for `<amp-story>`

On mobile:
On desktop (follows cursor instead of DeviceOrientation):

Component for truncating text (Reference documentation)

Efficient algorithm to display/truncate text
Allows "call to action" links after truncation (e.g. "Show more")
Available experimentally currently, next step is launching this fully.

User-location component (Reference documentation)

Uses geolocation API for precise user-location data
Unlocks use-cases where dynamic data is tied to user's location
- Intend to deprecate since no one is currently using it and the API is inconsistent with <am-geo>