Closed Bug 1519769 Opened 9 months ago Closed 9 months ago

clean up CSS for ds-list component

Categories

(Firefox :: New Tab Page, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
Firefox 66
Iteration:
66.3 - Jan 7 - 20
Tracking Status
firefox66 --- fixed

People

(Reporter: dmose, Assigned: dmose)

References

Details

(Keywords: github-merged)

User Story

How to test:

* go to about:config
* search for stream.config
* set that preference to {"enabled":true,"layout_endpoint":"https://getpocket.com/v3/newtab/layout?version=1&consumer_key=40249-e88c401e1b1f2242d9e441c4&layout_variant=dev-test-all"}
* open a new tab

The first "Trending Stories" is the list to look at.

This should now match, more or less exactly, the 1st list comp at the top of the Lists page on https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Modules?node-id=9%3A15
Changes of note:

* the horizontal rule above the list should be the right color and positioned correctly
* general whitespace and positioning should match the comp
* item title is clamped at 2 lines, the info below the item title is clamped at 1
* individual horizontal lines are above all of the items except those on the top row

Known bugs are already captured as dependents of the ds-list-component bug: https://bugzilla.mozilla.org/showdependencytree.cgi?id=1514020&hide_resolved=0

Attachments

(2 files)

The List component will be landing in bug 1519766 so that we have something in tree, but there will be some rough edges. A few things will need to be cleaned up to make them match the spec are:

  • make an HR appear above each row
  • various whitespace cleanup
  • get rid of the left-indentation of the list
Summary: clean up CSS for list component → clean up CSS for ds-list component
Severity: normal → enhancement
User Story: (updated)
Keywords: github-merged
Blocks: 1521093
Priority: P2 → P1
Status: NEW → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66

Hi, I have some questions wrt mock design. Added comments in the mock Numbered Lists. Will continue testing after clarification.

Flags: needinfo?(dmose)

Questions clarified by @WolasiKonu.

Issues :

  1. There is an issue where if the item title is long, we expect to see "..." at the end of 2nd line which is missing. Attached QA Result : Bug - 1519769.png
  2. As per Figma (Numbered Lists design mock), expected char limit is 34 char, but this exceeds more than the limit.

Original link to the article : https://www.latimes.com/sports/la-sp-ucla-katelyn-ohashi-20190117-story.html

Tested on :

FF Nightly version : 66.0a1 (2019-01-20)

OS : Mac and Windows 10 Pro

Had an offline discussion with the team and agreeing that ellipsis and char count limit implementations will be considered as part of future release.

There's a separate issue tracked for the padding issues between ds-list-item-text and the image to the right here : https://bugzilla.mozilla.org/show_bug.cgi?id=1521888

Other than that experiment is good.

Closing as verified.

Status: RESOLVED → VERIFIED
Flags: needinfo?(dmose)
Component: Activity Streams: Newtab → New Tab Page
You need to log in before you can comment on or make changes to this bug.