add disabled attribute to items. beta to status

Adds the `disabled` attribute to a menu-item button if it's disabled, not just as a className.  Styling changes centered on that as well.

Also changes the `beta` class to `status` because it is used for both `beta` and `disabled` indicators.  Styling changes for that.
This commit is contained in:
Gazook89
2026-07-09 14:10:49 -05:00
parent c5db25f076
commit 794c2fa09d
2 changed files with 4 additions and 5 deletions
@@ -328,11 +328,11 @@ const SnippetGroup = createReactClass({
if(!snippet.subsnippets){ if(!snippet.subsnippets){
return ( return (
<li key={snippet.name} role='none'> <li key={snippet.name} role='none'>
<button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name}> <button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
<i className={snippet.icon} /> <i className={snippet.icon} />
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span> <span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>} {snippet.experimental && <span className='status'>beta</span>}
{snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>} {snippet.disabled && <span className='status' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
</button> </button>
</li> </li>
); );
@@ -214,8 +214,7 @@
} }
} }
.name { margin-right : auto; } .name { margin-right : auto; }
.disabled { text-decoration : line-through; } .status {
.beta {
align-self : center; align-self : center;
padding : 4px 6px; padding : 4px 6px;
margin-left : 5px; margin-left : 5px;