Page MenuHomePhabricator
Differential D5599

[web] Add spoiler style to MarkdownSpoiler
ClosedPublic
Actions

Authored by rohan on Nov 10 2022, 9:56 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 19, 2:13 PM
Unknown Object (File)
Mon, Mar 17, 10:16 AM
Unknown Object (File)
Mon, Mar 17, 3:57 AM
Unknown Object (File)
Mon, Mar 17, 3:52 AM
Unknown Object (File)
Tue, Feb 25, 2:58 PM
Unknown Object (File)
Tue, Feb 25, 2:57 PM
Unknown Object (File)
Tue, Feb 25, 2:57 PM
Unknown Object (File)
Tue, Feb 25, 2:57 PM
View All Files
Subscribers
• abosh
ashoat
tomek

Details

Reviewers
atul
ginsu
Commits
rCOMM343181cad8b6: [web] Add spoiler style to MarkdownSpoiler
Summary

We add a unique spoiler style (the same hex code as approved in D5373) to the MarkdownSpoiler component.

https://linear.app/comm/issue/ENG-2191/add-spoiler-style-to-markdowncss

Depends on D5593

Test Plan

The spoiler text enclosed in || ... || characters are correctly rendered with the new spoiler style visually and in the inspect element console.

Spoiler Style.png (1×1 px, 381 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

rohan created this revision.Nov 10 2022, 9:56 AM
Herald added subscribers: • abosh, tomek, ashoat. · View Herald TranscriptNov 10 2022, 9:56 AM
rohan edited the summary of this revision. (Show Details)Nov 10 2022, 9:57 AM
rohan edited the test plan for this revision. (Show Details)
rohan added a parent revision: D5593: [web] Extract thread-related selectors out of web/selectors/nav-selectors.
rohan attached a referenced file: F231808: Spoiler Style.png. (Show Details)
Harbormaster completed remote builds in B13369: Diff 18331.Nov 10 2022, 10:10 AM
rohan requested review of this revision.Nov 10 2022, 10:10 AM
rohan edited the summary of this revision. (Show Details)Nov 10 2022, 10:33 AM
rohan added a child revision: D5601: [web] Reveal the spoiler content on click within a message.
rohan updated this revision to Diff 18363.Nov 10 2022, 5:34 PM

Rebase on MarkdownSpoiler changes

Harbormaster completed remote builds in B13388: Diff 18363.Nov 10 2022, 5:47 PM
ginsu accepted this revision.Nov 11 2022, 9:17 AM
rohan updated this revision to Diff 18394.Nov 11 2022, 5:00 PM

Move spoiler styles below markdown anchor tags

Harbormaster completed remote builds in B13410: Diff 18394.Nov 11 2022, 5:14 PM
atul requested changes to this revision.Nov 14 2022, 5:06 PM

Looks good, we just need to pull the hardcoded hex values out and move them to web/theme.css

web/markdown/markdown.css
80–84 ↗(On Diff #18394)

On web we try to avoid hardcoding hex values and instead create CSS variables in web/theme.css to consume throughout. This should be good to land once you pull out the constants to web/theme.css and use them here instead.

This revision now requires changes to proceed.Nov 14 2022, 5:06 PM
atul mentioned this in D5601: [web] Reveal the spoiler content on click within a message.Nov 14 2022, 5:12 PM
rohan updated this revision to Diff 18428.Nov 15 2022, 6:03 AM

Use CSS Variables in theme.css

Harbormaster completed remote builds in B13434: Diff 18428.Nov 15 2022, 6:16 AM
atul accepted this revision.Nov 15 2022, 3:40 PM

Perfect!

This revision is now accepted and ready to land.Nov 15 2022, 3:40 PM
Closed by commit rCOMM343181cad8b6: [web] Add spoiler style to MarkdownSpoiler (authored by rohan). · Explain WhyNov 16 2022, 9:06 AM
This revision was automatically updated to reflect the committed changes.
rohan added a commit: rCOMM343181cad8b6: [web] Add spoiler style to MarkdownSpoiler.

Revision Contents
Changeset List

PathSize
web/
markdown/
4 lines
6 lines
2 lines

Diff 18486

View Options

web/markdown/markdown-spoiler.react.js

Show First 20 Lines • Show All 55 Lines • ▼ Show 20 Lines
### Workflow specific prerequisites ### Workflow specific prerequisites
On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows. On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows.
- [Web prerequisites](./nix_web_setup.md#nix-web-requisities) - [Web prerequisites](./nix_web_setup.md#nix-web-requisities)
- [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension) - [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension)
- [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension) - [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites) - [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites)
- [iOS development](./nix_mobile_setup.md#ios-development) - [iOS development](./nix_mobile_setup.md#ios-development)
- [Xcode](./nix_mobile_setup.md#xcode) - [Xcode](./nix_mobile_setup.md#xcode)
- [Xcode settings](./nix_mobile_setup.md#xcode-settings) - [Xcode settings](./nix_mobile_setup.md#xcode-settings)
- [Android development](./nix_mobile_setup.md#android-development) - [Android development](./nix_mobile_setup.md#android-development)
- [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk) - [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk)
- [Android Studio](./nix_mobile_setup.md#android-studio) - [Android Studio](./nix_mobile_setup.md#android-studio)
- [Android SDK](./nix_mobile_setup.md#android-sdk) - [Android SDK](./nix_mobile_setup.md#android-sdk)
- [Android emulator](./nix_mobile_setup.md#android-emulator) - [Android emulator](./nix_mobile_setup.md#android-emulator)
- [Debugging tools](./nix_mobile_setup.md#debugging-tools) - [Debugging tools](./nix_mobile_setup.md#debugging-tools)
- [Homebrew](./nix_mobile_setup.md#homebrew) - [Homebrew](./nix_mobile_setup.md#homebrew)
- [Reactotron](./nix_mobile_setup.md#reactotron) - [Reactotron](./nix_mobile_setup.md#reactotron)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [idb (iOS Development Bridge)](./nix_mobile_setup.md#idb)
# Development environment # Development environment
Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites). Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites).
## Development workflows ## Development workflows
- [Web workflows](./nix_web_workflows.md#development) - [Web workflows](./nix_web_workflows.md#development)
Show All 27 Lines
View Options

web/markdown/markdown.css

Show First 20 Lines • Show All 55 Lines • ▼ Show 20 Lines
### Workflow specific prerequisites ### Workflow specific prerequisites
On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows. On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows.
- [Web prerequisites](./nix_web_setup.md#nix-web-requisities) - [Web prerequisites](./nix_web_setup.md#nix-web-requisities)
- [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension) - [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension)
- [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension) - [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites) - [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites)
- [iOS development](./nix_mobile_setup.md#ios-development) - [iOS development](./nix_mobile_setup.md#ios-development)
- [Xcode](./nix_mobile_setup.md#xcode) - [Xcode](./nix_mobile_setup.md#xcode)
- [Xcode settings](./nix_mobile_setup.md#xcode-settings) - [Xcode settings](./nix_mobile_setup.md#xcode-settings)
- [Android development](./nix_mobile_setup.md#android-development) - [Android development](./nix_mobile_setup.md#android-development)
- [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk) - [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk)
- [Android Studio](./nix_mobile_setup.md#android-studio) - [Android Studio](./nix_mobile_setup.md#android-studio)
- [Android SDK](./nix_mobile_setup.md#android-sdk) - [Android SDK](./nix_mobile_setup.md#android-sdk)
- [Android emulator](./nix_mobile_setup.md#android-emulator) - [Android emulator](./nix_mobile_setup.md#android-emulator)
- [Debugging tools](./nix_mobile_setup.md#debugging-tools) - [Debugging tools](./nix_mobile_setup.md#debugging-tools)
- [Homebrew](./nix_mobile_setup.md#homebrew) - [Homebrew](./nix_mobile_setup.md#homebrew)
- [Reactotron](./nix_mobile_setup.md#reactotron) - [Reactotron](./nix_mobile_setup.md#reactotron)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [idb (iOS Development Bridge)](./nix_mobile_setup.md#idb)
# Development environment # Development environment
Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites). Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites).
## Development workflows ## Development workflows
- [Web workflows](./nix_web_workflows.md#development) - [Web workflows](./nix_web_workflows.md#development)
Show All 27 Lines
View Options

web/theme.css

Show First 20 Lines • Show All 55 Lines • ▼ Show 20 Lines
### Workflow specific prerequisites ### Workflow specific prerequisites
On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows. On macOS, [installing Xcode](./nix_mobile_setup.md#xcode) is a prerequisite for all workflows.
- [Web prerequisites](./nix_web_setup.md#nix-web-requisities) - [Web prerequisites](./nix_web_setup.md#nix-web-requisities)
- [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension) - [React Dev Tools Chrome extension](./nix_web_setup.md#react-dev-tools-chrome-extension)
- [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension) - [Redux Dev Tools Chrome extension](./nix_web_setup.md#redux-dev-tools-chrome-extension)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites) - [Mobile prerequisites](./nix_mobile_setup.md#nix-mobile-prerequisites)
- [iOS development](./nix_mobile_setup.md#ios-development) - [iOS development](./nix_mobile_setup.md#ios-development)
- [Xcode](./nix_mobile_setup.md#xcode) - [Xcode](./nix_mobile_setup.md#xcode)
- [Xcode settings](./nix_mobile_setup.md#xcode-settings) - [Xcode settings](./nix_mobile_setup.md#xcode-settings)
- [Android development](./nix_mobile_setup.md#android-development) - [Android development](./nix_mobile_setup.md#android-development)
- [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk) - [JDK (Java Development Kit)](./nix_mobile_setup.md#jdk)
- [Android Studio](./nix_mobile_setup.md#android-studio) - [Android Studio](./nix_mobile_setup.md#android-studio)
- [Android SDK](./nix_mobile_setup.md#android-sdk) - [Android SDK](./nix_mobile_setup.md#android-sdk)
- [Android emulator](./nix_mobile_setup.md#android-emulator) - [Android emulator](./nix_mobile_setup.md#android-emulator)
- [Debugging tools](./nix_mobile_setup.md#debugging-tools) - [Debugging tools](./nix_mobile_setup.md#debugging-tools)
- [Homebrew](./nix_mobile_setup.md#homebrew) - [Homebrew](./nix_mobile_setup.md#homebrew)
- [Reactotron](./nix_mobile_setup.md#reactotron) - [Reactotron](./nix_mobile_setup.md#reactotron)
- [Flipper (React Native Debugger)](./nix_mobile_setup.md#flipper)
- [idb (iOS Development Bridge)](./nix_mobile_setup.md#idb)
# Development environment # Development environment
Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites). Run `nix develop` to create a dev environment. Nix will handle the installation of all remaining dependencies not mentioned in [Workflow prerequisites](#workflow-prerequisites).
## Development workflows ## Development workflows
- [Web workflows](./nix_web_workflows.md#development) - [Web workflows](./nix_web_workflows.md#development)
Show All 27 Lines