Replace symbol palette tabs with a custom tablist (#19034)

GitOrigin-RevId: 69d8a8dd8980e287b484b915b1f92e57af5324cb
This commit is contained in:
Alf Eaton 2024-06-26 09:04:24 +01:00 committed by Copybot
parent de959fb7b9
commit dfaed70297
4 changed files with 18 additions and 215 deletions

104
package-lock.json generated
View file

@ -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",

View file

@ -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;
}

View file

@ -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 {

View file

@ -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",