| 48 | } |
| 49 | |
| 50 | function append(container: HTMLElement): void { |
| 51 | const classes = [ |
| 52 | 'Button', |
| 53 | 'Button--iconOnly', |
| 54 | 'Button--invisible', |
| 55 | 'Button--medium', |
| 56 | 'tooltipped', |
| 57 | 'tooltipped-sw', |
| 58 | 'rgh-collapsible-content-btn', |
| 59 | |
| 60 | // Old view only |
| 61 | 'my-auto', |
| 62 | 'flex-shrink-0', |
| 63 | ]; |
| 64 | |
| 65 | // TODO: ensure it's added only once before both `table-input` and `collapsible-content-button` |
| 66 | const divider = $([ |
| 67 | '[data-component="ActionBar.VerticalDivider"]', // React component |
| 68 | '.ActionBar-divider', // Still used in gists, PRs, etc |
| 69 | ], container).cloneNode(true); |
| 70 | |
| 71 | Object.assign(divider.style, { |
| 72 | // Sizing copied from GitHub, except the excessive 2em (see `fuchsia` docs) |
| 73 | margin: 'auto var(--base-size-8, 2em)', |
| 74 | |
| 75 | // Old style only |
| 76 | top: 'initial', |
| 77 | bottom: 'initial', |
| 78 | transform: 'initial', |
| 79 | }); |
| 80 | |
| 81 | container.parentElement!.append( |
| 82 | divider, |
| 83 | <button |
| 84 | type="button" |
| 85 | className={cx(classes)} |
| 86 | aria-label="Add collapsible content" |
| 87 | data-targets="action-bar.items" // Enables automatic hiding when it doesn't fit |
| 88 | > |
| 89 | <FoldDownIcon /> |
| 90 | </button>, |
| 91 | ); |
| 92 | } |
| 93 | |
| 94 | function init(signal: AbortSignal): void { |
| 95 | observe(actionBar, append, {signal}); |