From dfaed702976420fb19138a8e05e9858f13dd15fc Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Wed, 26 Jun 2024 09:04:24 +0100 Subject: [PATCH] Replace symbol palette tabs with a custom tablist (#19034) GitOrigin-RevId: 69d8a8dd8980e287b484b915b1f92e57af5324cb --- package-lock.json | 104 ----------------- .../app/editor/symbol-palette.less | 105 ------------------ .../stylesheets/modules/symbol-palette.less | 23 +++- services/web/package.json | 1 - 4 files changed, 18 insertions(+), 215 deletions(-) delete mode 100644 services/web/frontend/stylesheets/app/editor/symbol-palette.less diff --git a/package-lock.json b/package-lock.json index c3394bbef1..68096ab7bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8792,65 +8792,6 @@ } } }, - "node_modules/@reach/auto-id": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.15.3.tgz", - "integrity": "sha512-lbLUI9mrn74qVis141ib0Rsyhgk+gzUMtpplRmjy06cUWDFZyiBATNWMUxN5T+0fU4tpfgcjkAuPeTCCGThKtQ==", - "dev": true, - "dependencies": { - "@reach/utils": "0.15.3", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, - "node_modules/@reach/descendants": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.15.3.tgz", - "integrity": "sha512-vuCBG7Uru6IEJ2wvTd7L2xumbYzv2UYBduZ0E1FEABqyUo78eTIZbRcwIN73IxMcivjWipBPlcLLkpFtJKMPew==", - "dev": true, - "dependencies": { - "@reach/utils": "0.15.3", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, - "node_modules/@reach/tabs": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.15.3.tgz", - "integrity": "sha512-x+RToVrhywIp3YFqBVmPiscKKnr+29vwo2H3GGZMFeXOMaZz7d941cSbx7o2So2jXEtLhuTuMc9Nak/sVtV8Hg==", - "dev": true, - "dependencies": { - "@reach/auto-id": "0.15.3", - "@reach/descendants": "0.15.3", - "@reach/utils": "0.15.3", - "prop-types": "^15.7.2", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, - "node_modules/@reach/utils": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.15.3.tgz", - "integrity": "sha512-HFyjw8LZ4/RRk5bcMpDAeEc3aOeLR/vWRDsljlE3cHI5GfFlZcG3DDLSW8C2ba74RCFp/4X3Nz0nOrd4JdkZ1w==", - "dev": true, - "dependencies": { - "tiny-warning": "^1.0.3", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || 17.x", - "react-dom": "^16.8.0 || 17.x" - } - }, "node_modules/@react-aria/ssr": { "version": "3.9.4", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz", @@ -44706,7 +44647,6 @@ "@pollyjs/adapter-node-http": "^6.0.6", "@pollyjs/core": "^6.0.6", "@pollyjs/persister-fs": "^6.0.6", - "@reach/tabs": "^0.15.0", "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e", "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803", "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b", @@ -53162,7 +53102,6 @@ "@pollyjs/adapter-node-http": "^6.0.6", "@pollyjs/core": "^6.0.6", "@pollyjs/persister-fs": "^6.0.6", - "@reach/tabs": "^0.15.0", "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e", "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803", "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b", @@ -54567,49 +54506,6 @@ "@radix-ui/react-compose-refs": "1.0.1" } }, - "@reach/auto-id": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.15.3.tgz", - "integrity": "sha512-lbLUI9mrn74qVis141ib0Rsyhgk+gzUMtpplRmjy06cUWDFZyiBATNWMUxN5T+0fU4tpfgcjkAuPeTCCGThKtQ==", - "dev": true, - "requires": { - "@reach/utils": "0.15.3", - "tslib": "^2.3.0" - } - }, - "@reach/descendants": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.15.3.tgz", - "integrity": "sha512-vuCBG7Uru6IEJ2wvTd7L2xumbYzv2UYBduZ0E1FEABqyUo78eTIZbRcwIN73IxMcivjWipBPlcLLkpFtJKMPew==", - "dev": true, - "requires": { - "@reach/utils": "0.15.3", - "tslib": "^2.3.0" - } - }, - "@reach/tabs": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.15.3.tgz", - "integrity": "sha512-x+RToVrhywIp3YFqBVmPiscKKnr+29vwo2H3GGZMFeXOMaZz7d941cSbx7o2So2jXEtLhuTuMc9Nak/sVtV8Hg==", - "dev": true, - "requires": { - "@reach/auto-id": "0.15.3", - "@reach/descendants": "0.15.3", - "@reach/utils": "0.15.3", - "prop-types": "^15.7.2", - "tslib": "^2.3.0" - } - }, - "@reach/utils": { - "version": "0.15.3", - "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.15.3.tgz", - "integrity": "sha512-HFyjw8LZ4/RRk5bcMpDAeEc3aOeLR/vWRDsljlE3cHI5GfFlZcG3DDLSW8C2ba74RCFp/4X3Nz0nOrd4JdkZ1w==", - "dev": true, - "requires": { - "tiny-warning": "^1.0.3", - "tslib": "^2.3.0" - } - }, "@react-aria/ssr": { "version": "3.9.4", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz", diff --git a/services/web/frontend/stylesheets/app/editor/symbol-palette.less b/services/web/frontend/stylesheets/app/editor/symbol-palette.less deleted file mode 100644 index d256a6a7b4..0000000000 --- a/services/web/frontend/stylesheets/app/editor/symbol-palette.less +++ /dev/null @@ -1,105 +0,0 @@ -.symbol-palette-container { - height: 100%; -} - -.symbol-palette { - display: flex; - flex-direction: column; - background: @symbol-palette-bg; - color: @symbol-palette-color; - width: 100%; - height: 100%; -} - -.symbol-palette-header { - flex-shrink: 0; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - font-family: @font-family-sans-serif; - font-size: 16px; - background: @symbol-palette-header-background; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.symbol-palette-header .beta-badge { - margin-right: @margin-xs; - margin-left: @margin-xs; -} - -.symbol-palette-tab-list[data-reach-tab-list] { - background: none; - border-bottom: none; - flex-wrap: wrap; -} - -.symbol-palette-tab[data-reach-tab][data-selected] { - background: @symbol-palette-selected-tab-bg; - color: @symbol-palette-selected-tab-color; - border-bottom-color: transparent; -} - -.symbol-palette-body { - flex: 1; - overflow-y: auto; -} - -.symbol-palette-items { - display: flex; - flex-wrap: wrap; - padding: @padding-xs; -} - -.symbol-palette-item { - font-family: 'Stix Two Math', serif; - font-size: 24px; - line-height: 42px; - height: 42px; - width: 42px; - margin: @margin-xs; - color: @symbol-palette-item-color; - background: @symbol-palette-item-bg; - border: 1px solid transparent; - border-radius: @border-radius-base; - display: inline-flex; - align-items: center; - justify-content: center; -} - -.symbol-palette-item-command { - font-family: monospace; - font-weight: bold; -} - -.symbol-palette-item-notes { - margin-top: @margin-xs; -} - -.symbol-palette-empty { - display: flex; - align-items: center; - justify-content: center; - padding: @padding-sm; -} - -.symbol-palette-search { - padding: 2px @padding-sm; - margin: @margin-xs; - line-height: 1; - height: auto; - width: auto; -} - -.symbol-palette-header-group { - display: flex; - align-items: center; - white-space: nowrap; - margin-left: @margin-xs; -} - -.symbol-palette-info-link, -.symbol-palette-info-link:focus, -.symbol-palette-info-link:hover { - color: inherit; -} diff --git a/services/web/frontend/stylesheets/modules/symbol-palette.less b/services/web/frontend/stylesheets/modules/symbol-palette.less index 7431bc402b..0bf7fb674a 100644 --- a/services/web/frontend/stylesheets/modules/symbol-palette.less +++ b/services/web/frontend/stylesheets/modules/symbol-palette.less @@ -33,16 +33,29 @@ align-items: center; } - .symbol-palette-tab-list[data-reach-tab-list] { + .symbol-palette-tab-list[role='tablist'] { background: none; border-bottom: none; flex-wrap: wrap; } - .symbol-palette-tab[data-reach-tab][data-selected] { - background: @symbol-palette-selected-tab-bg; - color: @symbol-palette-selected-tab-color; - border-bottom-color: transparent; + .symbol-palette-tab[role='tab'] { + -webkit-appearance: none; + -moz-appearance: none; + background: none; + border: none; + border-bottom: 1px solid transparent; + color: inherit; + cursor: pointer; + display: inline-block; + font: inherit; + margin: 0; + padding: 0.25em 0.5em; + + &[aria-selected='true'] { + background: @symbol-palette-selected-tab-bg; + color: @symbol-palette-selected-tab-color; + } } .symbol-palette-body { diff --git a/services/web/package.json b/services/web/package.json index 4faf7488b7..02391045ee 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -212,7 +212,6 @@ "@pollyjs/adapter-node-http": "^6.0.6", "@pollyjs/core": "^6.0.6", "@pollyjs/persister-fs": "^6.0.6", - "@reach/tabs": "^0.15.0", "@replit/codemirror-emacs": "overleaf/codemirror-emacs#4394c03858f27053f8768258e9493866e06e938e", "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803", "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b",