Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reader Recent Overhaul: Add styling for sidebar section #96122

Merged
merged 9 commits into from
Nov 7, 2024

Conversation

holdercp
Copy link
Contributor

@holdercp holdercp commented Nov 6, 2024

Related to Automattic/loop#190

Proposed Changes

  • Adds styling to match the comps
  • Took some liberties with some spacing and alignment to provide the same look but with more consistent values.
  • Created new styles scoped to this component rather than trying to override existing styles since this might be the direction we take with other sections of Reader.
image

Why are these changes being made?

  • pe7F0s-2iv-p2

Testing Instructions

  • Navigate to `/read?flags="reader/recent-feed-overhaul"
  • Interact with the section and see how styles look and feel
  • Note: Navigation is not implemented yet. This PR to get things looking the way we want them.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

@holdercp holdercp self-assigned this Nov 6, 2024
@matticbot
Copy link
Contributor

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/reader-recent-styles on your sandbox.

@matticbot
Copy link
Contributor

matticbot commented Nov 6, 2024

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~159 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
async-load-calypso-reader-sidebar       +803 B  (+0.8%)     +159 B  (+0.6%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@holdercp holdercp changed the title Reader Recent Overhaul: Add base styling for sidebar Reader Recent Overhaul: Add styling for sidebar section Nov 7, 2024
@holdercp holdercp marked this pull request as ready for review November 7, 2024 14:52
@holdercp holdercp requested a review from a team as a code owner November 7, 2024 14:52
@matticbot matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Nov 7, 2024
@@ -203,6 +203,7 @@ body.is-section-reader {
margin-right: 8px;
}

/* holdercp TODO: Is this needed with the overhaul */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@holdercp Did you mean to commit these todo comments?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for mentioning this. Let me go address these.

Copy link
Member

@allilevine allilevine left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles look great, including on the mobile menu:

Screen Shot 2024-11-07 at 11 40 58 AM

@holdercp holdercp force-pushed the add/reader-recent-styles branch from 40440bb to 204e740 Compare November 7, 2024 19:45
@holdercp holdercp merged commit 9648a04 into trunk Nov 7, 2024
11 checks passed
@holdercp holdercp deleted the add/reader-recent-styles branch November 7, 2024 20:04
@github-actions github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 7, 2024
@a8ci18n
Copy link

a8ci18n commented Nov 7, 2024

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16995184

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @holdercp for including a screenshot in the description! This is really helpful for our translators.

annacmc added a commit that referenced this pull request Nov 10, 2024
commit 32d3e82
Author: Richard Ortiz <[email protected]>
Date:   Fri Nov 8 12:16:03 2024 +0100

    Global Styles on Personal: Added FEATURE_STYLE_CUSTOMIZATION to Personal Plan (#96159)

    * Added FEATURE_STYLE_CUSTOMIZATION to Personal plan when the feature flag is enabled

    * Fixed code style issue. Added the feature to the upgrade comparison table

commit b4ddf2f
Author: Tony Arcangelini <[email protected]>
Date:   Fri Nov 8 04:15:22 2024 -0600

    Help Center: use support interactions (#96049)

    * Help Center: use support interactions

    * useChat hook added - account for ZD

    * Yeah... I know this is a lot

    * Fix update source to event_source

    * Interactions loading consistently

    * Fix bug when switching interaction

    * Fix types

    * minor fixup

    * Fix types

    * Fix a few bugs

    * Fixed get conversation function return type

    * Fix useEffect dependency

    * Working History

    * Working History 2

    * Add stability to data fetching

    * Fix handoff

    * Fix types

    * Fix first reply to ZD

    * Fix bug in old version

    * Improved recent conversations

    * Fix tracking

    * Help Center: use support interactions

    * useChat hook added - account for ZD

    * Yeah... I know this is a lot

    * Fix update source to event_source

    * Interactions loading consistently

    * Fix bug when switching interaction

    * Fix types

    * minor fixup

    * Fix types

    * Fixed get conversation function return type

    * Fix a few bugs

    * Fix useEffect dependency

    * Working History

    * Working History 2

    * Add stability to data fetching

    * Fix handoff

    * Fix types

    * Fix first reply to ZD

    * Fix bug in old version

    * Improved recent conversations

    * Fix tracking

    * Fix regex to convert text url

    ---------

    Co-authored-by: heavyweight <[email protected]>
    Co-authored-by: Renan <[email protected]>
    Co-authored-by: escapemanuele <[email protected]>

commit 904fe23
Author: Madhu Dollu <[email protected]>
Date:   Fri Nov 8 12:52:45 2024 +0530

    remove email upsell from checkout/thank-you page (#96138)

commit f7c8207
Author: okmttdhr, tada <[email protected]>
Date:   Fri Nov 8 15:45:54 2024 +0900

    Remove unnecessary style overrides regarding fly-out panel (#96097)

commit 23a4db8
Author: Yashwin Poojary <[email protected]>
Date:   Fri Nov 8 09:53:50 2024 +0530

    A4A > E2E tests: Creating a new E2E test user (#96132)

commit 536b9b8
Author: Candy Tsai <[email protected]>
Date:   Fri Nov 8 11:16:19 2024 +0800

    Fix the flickering of upsell banners in /hosting-config (#96141)

    * Fix the flickering of upsell banners in /hosting-config

    * Show banner for ecommerce trial

commit cdd3d6b
Author: Candy Tsai <[email protected]>
Date:   Fri Nov 8 11:15:57 2024 +0800

    Update /hosting-config layout (#96136)

    * Move PHP version right after WordPress version

    * Remove period from Learn more

    * Remove period for Review privacy settings

commit 479fd79
Author: Paulo Marcos Trentin <[email protected]>
Date:   Thu Nov 7 18:54:58 2024 -0300

    Fixed plugin count on the old interface (#96168)

commit c3ed7e2
Author: Paulo Marcos Trentin <[email protected]>
Date:   Thu Nov 7 17:52:00 2024 -0300

    Updated auto-update copy (#96165)

commit 06e5b5a
Author: Paulo Marcos Trentin <[email protected]>
Date:   Thu Nov 7 17:16:16 2024 -0300

    Jetpack cloud visual improvements for DataViews integration (#96156)

    * Jetpack cloud improvements:
    - Fixed title, edge of the table, search box, filters aligments
    - Fixed accent color and hover state colors
    - Fixed "Button style" on DataViews filters

    * Improved loading style

commit 6aa6b9e
Author: Paulo Marcos Trentin <[email protected]>
Date:   Thu Nov 7 17:06:05 2024 -0300

    Optimized how we load plugins and improved load state (#96150)

    * Improved screen loading state and plugin processing speed

    * Test updated

commit 9648a04
Author: Chris Holder <[email protected]>
Date:   Thu Nov 7 14:04:25 2024 -0600

    Reader Recent Overhaul: Add styling for sidebar section (#96122)

commit efefa75
Author: Allison Levine <[email protected]>
Date:   Thu Nov 7 14:23:35 2024 -0500

    Reader Recent Feed Overhaul: Fix site icon (#96152)

    * Fix site icon for recent feed overhaul.

    * Use avatar as backup icon.

    * Fix type.

commit a7444c9
Author: Allison Levine <[email protected]>
Date:   Thu Nov 7 13:43:14 2024 -0500

    Reader Recent Feed Overhaul: Add mobile view (#96127)

    * Add mobile view to Recent Feed Overhaul.

    * Use CSS to show hide the post.

    * Fix featured image getting squished.

    * Revert type changes.

commit 925549f
Author: Calypso Bot <[email protected]>
Date:   Thu Nov 7 19:35:41 2024 +0100

    chore(deps): update webpack packages (#91492)

    * chore(deps): update webpack packages

    * Update snapshots

    ---------

    Co-authored-by: Renovate Bot <[email protected]>
    Co-authored-by: Chris Holder <[email protected]>

commit 19b5be3
Author: Anthony Grullon <[email protected]>
Date:   Thu Nov 7 13:30:10 2024 -0500

    Help Center: Update odie header text based on pathname condition (#96153)

commit f7cd961
Author: Anthony Grullon <[email protected]>
Date:   Thu Nov 7 12:28:21 2024 -0500

    Help Center Chat: Enhance file upload button styles for better accessibility (#96148)

    * Help Center Chat: Enhance file upload button styles for better accessibility

    * change outline color

commit c68e28c
Author: Roberto Aranda <[email protected]>
Date:   Thu Nov 7 18:14:53 2024 +0100

    Performance Profiler: Remove Generated with AI badge as it confuses users (#96147)

commit 9ff488f
Author: Emanuele Buccelli <[email protected]>
Date:   Thu Nov 7 17:45:45 2024 +0100

    Help Center: Fix styling padding (#96146)

    * Fix padding

    * Fix styles

commit c8e6928
Author: Dusty Reagan <[email protected]>
Date:   Thu Nov 7 09:57:50 2024 -0600

    Recent Feed Overhaul: Add FullPostView layout prop (#96072)

    * Add FullPostView layout prop

    * Styling in progress

    * Call translate directly

    * Name and follow count working

    * Disable showRelatedPosts if not isDefaultLayout

    * Added site icon

    * Completed header formating

    * Works and updated style

    * Remove type update

    * Update comment

    * Set a default site icon if no src exists and check for default layout

commit b7e65ef
Author: Gabriel Caires <[email protected]>
Date:   Thu Nov 7 15:41:35 2024 +0000

    Post-purchase: Automatically cancel migration when user exits migration (#96123)

    * Refactor migration status update hook

    * Set migration as pending when the credentials are required

    * Set migration as pending when is DIY

    * Fix wrong type keyword

    * Cancel migration when user click on back button

    * Cancel a migration when the user select Import instead of migrate

    * Add tests

    * Rename hook

    * When the feature flag is off we should continue setting started

commit d537efc
Author: Damien Alleyne <[email protected]>
Date:   Thu Nov 7 11:28:49 2024 -0400

    Refactor: Move global staticFilters constant to class method (#96116)

    * Refactor: Move global staticFilters constant to class method

    Follow-up to #95995 (review)

    * Implement code review suggestions

commit fd0906b
Author: Aurorum <[email protected]>
Date:   Thu Nov 7 15:19:13 2024 +0000

    Site Address Changer: Fix Bleeding Dialog Styles (#96142)

    * Start new branch

    * Add showCloseIcon

    * Remove unneeded styles

commit 1f1ece8
Author: Gabriel Caires <[email protected]>
Date:   Thu Nov 7 14:55:04 2024 +0000

    Post- Purchase: Set a migration as `pending-DIFM/DIF` when user arrives on the credential/instructions step (#96103)

commit 5f34350
Author: Paulo Cruz <[email protected]>
Date:   Thu Nov 7 10:26:02 2024 -0300

    Fix duplicated email verified notice (#96125)

commit 9e3be02
Author: Renan Carvalho <[email protected]>
Date:   Thu Nov 7 13:49:52 2024 +0100

    Help Center: Add temp flag for showing simplified chat history (#96139)

    * Add temporary flag for displaying simplified chat history

    * Improve border

commit 172dc36
Author: Yuliyan Slavchev <[email protected]>
Date:   Thu Nov 7 14:18:57 2024 +0200

    localizeUrl: Update wp-login rule to support Romanian and Vietnamese (#95943)

commit 6658443
Author: Ashar Fuadi <[email protected]>
Date:   Thu Nov 7 18:57:31 2024 +0700

    Untangling: Add Marketing -> Connections (#96135)

commit 7575c0f
Author: Roberto Aranda <[email protected]>
Date:   Thu Nov 7 12:40:11 2024 +0100

    Performance Profiler: Consolidate all time metrics to seconds (#96140)

commit fe086b8
Author: Mikael Korpela <[email protected]>
Date:   Thu Nov 7 13:03:50 2024 +0200

    Importer: use "import" term for CTA rather than "Start import" (#96111)

commit e782f60
Author: Kosta <[email protected]>
Date:   Thu Nov 7 11:29:31 2024 +0100

    Help Center: add image upload for chats (#96105)

    * HelpCenter: add upload (wip)

    * Minor fixes and refactoring

    * Changed icon

    * Use correct constants

    * Improve isAttachingFile state

    * Store global clientId as fallback

    * Fix attach button style

    * Move up the flag check

    * Improved function

    ---------

    Co-authored-by: escapemanuele <[email protected]>
    Co-authored-by: Anthony Grullon <[email protected]>
    Co-authored-by: Renan <[email protected]>

commit 9f3d633
Author: Anna McPhee <[email protected]>
Date:   Thu Nov 7 04:08:25 2024 -0600

    Stats: Chart refresh- CSS styling (#95980)

    * create new chart instance behind feature flag

    * adds a className prop to the chart

    * Add ChartHeader component for better composition

    * update show/hide legend prop for legacy vs new chart

    * Adds dedicated header component with title and controls props

    * Reorganise header layout

    * Adds activeTab to the chart title

    * remove control section for a future PR

    * add a showChartHeader prop

    * small fix to header title display

    * add in accidentally removed comment

    * add date filtering enabled CSS classname

    * add chart styling

    * remove !importants, increase title font size

    * adjust font weight

    * update axis marger border color

    * fix the code styling

commit c787874
Author: Emanuele Buccelli <[email protected]>
Date:   Thu Nov 7 10:42:11 2024 +0100

    Help Center: Update copy (#96076)

    * Update copy

    * Update help center copies with flag

    * Change the right component

    * Fix Odie initial message

    * Help is on the way

    * Change header text

    * Minimized History

    * Less Odie in HC

    ---------

    Co-authored-by: Anthony Grullon <[email protected]>
@a8ci18n
Copy link

a8ci18n commented Nov 11, 2024

Translation for this Pull Request has now been finished.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants