openedx / openedx/frontend-app-authoring
Publish button should reflect publish status
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 218
- Avg merge
- 9d 20h
- Merged PRs (30d)
- 20
Description
Designs
The current and proposed sidebar header actions are shown below:
| Current Designs | Updated Designs |
|---|---|
This story relates to the publish button. Edit/Open component changes to be addressed in issue 1795.
| Publish Button State Designs | Description |
|---|---|
| Published: Block is published and there are no edits made since previous publish | |
| New: Block has never been published | |
| Edited: Block has been published before but there are draft changes that have not yet been published |
Spec
- Published stroke color: stroke color: #5690BB; Fill: #F1F6FA.
- New stroke color: #F4B57B; Fill: #FCF4EA.
- Edited stroke color: F4B57B; Fill: #FCF4EA.
- Width of publish button should be set to fill container. (changes to open/ edit button are out of scope, but noting here that the open/edit button width should hug contents).
In scope
- Changes to publish button design: color, stroke with left side thicker stroke
- Changes to publish button text to reflect status: Published, Publish New, Publish Changes
Not in scope
- Overflow menu behavior
- Edit/ Open button changes
Related Tickets
Sidebar "Edit" button visual enhancement #1795
Publish section/subsection #1977
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the sidebar header publish button and the code that determines whether its block is published, new, or edited. Implement the three specified labels and visual states, make the button fill its container, and keep overflow-menu and Edit/Open changes out of scope.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100