openedx / openedx/frontend-app-authoring

Publish button should reflect publish status

Open
#1,794 2 comments 0 reactions 0 assignees View on GitHub

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
Image Image

This story relates to the publish button. Edit/Open component changes to be addressed in issue 1795.

Publish Button State Designs Description
Image Published: Block is published and there are no edits made since previous publish
Image New: Block has never been published
Image Edited: Block has been published before but there are draft changes that have not yet been published

Spec

  1. Published stroke color: stroke color: #5690BB; Fill: #F1F6FA.
  2. New stroke color: #F4B57B; Fill: #FCF4EA.
  3. Edited stroke color: F4B57B; Fill: #FCF4EA.
  4. 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

  1. Changes to publish button design: color, stroke with left side thicker stroke
  2. Changes to publish button text to reflect status: Published, Publish New, Publish Changes

Not in scope

  1. Overflow menu behavior
  2. Edit/ Open button changes

Related Tickets

Sidebar "Edit" button visual enhancement #1795
Publish section/subsection #1977

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.