Make ribbon block error indicators more obvious #5145
Conversation
| @@ -48,14 +53,14 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({ | |||
| </div> | |||
| </> | |||
| ) : ( | |||
| <div className={styles.title}> | |||
| <div className={cx(styles.title, hasError && styles.errorIndicator)}> | |||
There was a problem hiding this comment.
If we think making the titles red is too noisy, we could just update the icons:
| width={14} | ||
| height={14} | ||
| className={cx(styles.blockIcon, styles.error)} | ||
| aria-label="Error Icon" |
There was a problem hiding this comment.
Technically, you can label svgs but we don't really do this in the extension. I added labels for testing but there might be a better way of handling this.
| @@ -49,6 +49,7 @@ import { | |||
| toggleDragAndDropMode as toggleCustomPlotsDragAndDropMode | |||
There was a problem hiding this comment.
Next steps after this would be updating section title tooltips to include an error. Full design ideas list is in #5087 (comment)
|
Code Climate has analyzed commit 9f5356a and detected 0 issues on this pull request. The test coverage on the diff in this pull request is 100.0% (85% is the threshold). This pull request will bring the total coverage in the repository to 95.2% (0.0% change). View more on Code Climate. |
|
On this demo, what does red exactly mean? I feel ribbon alone is not enough, and if we do something else (see below, and you also suggested it in the ticket) we won't need the ribbon changes. Can we take the idea from Studio (@sroy3 is working on errors / warnings now) - show errors in the header of the section, show a sign (yellow, green, red) nearby the section title (similar to setup screen). If we do this I think we don't need any changes in the ribbon, wdyt? |
Makes sense! I'll close this pr and work on showing errors in the header of the section. |
Demo
Part of #5087