From 7b5bd6fa315f93bac380ad475becdf72d5f1beb8 Mon Sep 17 00:00:00 2001 From: Kevin Heis Date: Mon, 8 Apr 2024 12:45:01 -0700 Subject: [PATCH] Simplify OL circled numbers (#50045) --- package-lock.json | 87 ++++++++------ package.json | 2 +- .../ui/MarkdownContent/stylesheets/lists.scss | 108 ++++-------------- 3 files changed, 72 insertions(+), 125 deletions(-) diff --git a/package-lock.json b/package-lock.json index 510abaa290f0..faab41d90b0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@octokit/plugin-retry": "6.0.1", "@octokit/request-error": "5.0.1", "@primer/behaviors": "^1.3.5", - "@primer/css": "^21.0.7", + "@primer/css": "^21.2.2", "@primer/octicons": "^19.5.0", "@primer/octicons-react": "^19.5.0", "@primer/react": "36.2.0", @@ -1448,21 +1448,19 @@ } }, "node_modules/@github/auto-check-element": { - "version": "5.2.0", - "license": "MIT", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.1.tgz", + "integrity": "sha512-AJeHV1ifpby5Hp2wJIzcsdIB5YAq869F7ilNv2GygTVpHOSCfYSS29/hJ5GGTLgfKpPRgTmJcMi5OetKR8eH1g==", "dependencies": { - "@github/mini-throttle": "^1.0.7" + "@github/mini-throttle": "^2.1.0" } }, - "node_modules/@github/auto-check-element/node_modules/@github/mini-throttle": { - "version": "1.0.7", - "license": "MIT" - }, "node_modules/@github/auto-complete-element": { - "version": "3.4.0", - "license": "MIT", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.6.2.tgz", + "integrity": "sha512-AgkrawNa2Focapn05yc/mNVTlAOqPFlMPhqkkMygPtOddms6NYxlCuVx8OM6aCTzBeEJlYur+/CS56hk4mvwmA==", "dependencies": { - "@github/combobox-nav": "^2.0.2" + "@github/combobox-nav": "^2.1.7" } }, "node_modules/@github/browserslist-config": { @@ -1473,11 +1471,13 @@ }, "node_modules/@github/catalyst": { "version": "1.6.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/@github/catalyst/-/catalyst-1.6.0.tgz", + "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==" }, "node_modules/@github/clipboard-copy-element": { - "version": "1.1.2", - "license": "MIT" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.3.0.tgz", + "integrity": "sha512-wyntkQkwoLbLo+Hqg2LIVMXDIzcvUb9bSDz+clX6nVJItwzh103rHxdXFRZD+DmxVbuEW5xSznYQXkz1jZT+xg==" }, "node_modules/@github/combobox-nav": { "version": "2.1.7", @@ -1485,7 +1485,8 @@ }, "node_modules/@github/details-menu-element": { "version": "1.0.13", - "license": "MIT" + "resolved": "https://registry.npmjs.org/@github/details-menu-element/-/details-menu-element-1.0.13.tgz", + "integrity": "sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==" }, "node_modules/@github/failbot": { "version": "0.8.3", @@ -1497,7 +1498,13 @@ }, "node_modules/@github/image-crop-element": { "version": "5.0.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", + "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==" + }, + "node_modules/@github/include-fragment-element": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.3.0.tgz", + "integrity": "sha512-BJTt8ZE/arsbC9lQtTH8c1hZS0ZigiN+kzH54ffQ6MhHLT83h0OpSdS9NEVocPl2uuO6w3qxnEKTDzUGMQ5rdQ==" }, "node_modules/@github/markdown-toolbar-element": { "version": "2.1.1", @@ -1513,8 +1520,9 @@ } }, "node_modules/@github/mini-throttle": { - "version": "2.1.0", - "license": "MIT" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.1.tgz", + "integrity": "sha512-KtOPaB+FiKJ6jcKm9UKyaM5fPURHGf+xcp+b4Mzoi81hOc6M1sIGpMZMAVbNzfa2lW5+RPGKq888Px0j76OZ/A==" }, "node_modules/@github/paste-markdown": { "version": "1.4.2", @@ -1525,8 +1533,9 @@ "license": "MIT" }, "node_modules/@github/tab-container-element": { - "version": "3.2.0", - "license": "MIT" + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.4.0.tgz", + "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==" }, "node_modules/@graphql-inspector/core": { "version": "5.0.0", @@ -3051,8 +3060,9 @@ } }, "node_modules/@oddbird/popover-polyfill": { - "version": "0.0.10", - "license": "BSD-3-Clause" + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.4.1.tgz", + "integrity": "sha512-1MBMy92urkxoIy3qQecs6DzSgtVg9WElUhPXZ7GejqH8AmoakP6uMZGO1vyf0Cf9dBujqb0C+cXyZTTBLHWs0A==" }, "node_modules/@pkgr/core": { "version": "0.1.0", @@ -3087,15 +3097,15 @@ "integrity": "sha512-HWwz+6MrfK5NTWcg9GdKFpMBW/yrAV937oXiw2eDtsd88P3SRwoCt6ZO6QmKp9RP3nDU9cbqmuGZ0xBh0eIFeg==" }, "node_modules/@primer/css": { - "version": "21.0.7", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.7.tgz", - "integrity": "sha512-Iq0VkpLVZqHZTo2JOIv+RPVu3bWj/BU/MIZrNZ4GRTJTY0YFQ/YCmUYKY1swgiCiPF/RKew5xIkf1cWaqtkQEA==", + "version": "21.2.2", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.2.2.tgz", + "integrity": "sha512-Mcpt9CyajnPW8TJmZYIUhnctdLk7rfsoyvh8w4qDydu2C7HHOHa0wKQjf0zofQ+AyJOIW1Gfa9xvBfwAeNkgoQ==", "dependencies": { - "@primer/primitives": "^7.11.12", - "@primer/view-components": "^0.1.0" + "@primer/primitives": "^7.15.12", + "@primer/view-components": "^0.19.0" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=16.0.0" } }, "node_modules/@primer/octicons": { @@ -3118,9 +3128,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.12.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.12.0.tgz", - "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==" + "version": "7.15.15", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.15.15.tgz", + "integrity": "sha512-K9fPgKVBtdmBMl+lHKUK4ctsRf+DUUKdJYEHnFhkua71m9FORK16ycJ4gHDpc4g/0xgNvEwQ9/ArsV1i8w3ZmQ==" }, "node_modules/@primer/react": { "version": "36.2.0", @@ -3187,20 +3197,21 @@ "integrity": "sha512-WNthEIPPXnFQkumLby6yVxhyOcA/GtMnlByHwEglMO9WZckoaqidnpLp2JFzAh2RDOZxn+Xt3ffSMKId9cPjOQ==" }, "node_modules/@primer/view-components": { - "version": "0.1.4", - "license": "MIT", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.19.0.tgz", + "integrity": "sha512-+sXwYeV2B7pNooa8v3WfHG7+2xzLexlG7r0H75Lr0VXdMi9ID7RmLpS42Fw04vmcc+a8YtoaKdV1wxyYFOX/3Q==", "dependencies": { "@github/auto-check-element": "^5.2.0", - "@github/auto-complete-element": "^3.3.4", + "@github/auto-complete-element": "^3.6.0", "@github/catalyst": "^1.6.0", - "@github/clipboard-copy-element": "^1.1.2", + "@github/clipboard-copy-element": "^1.3.0", "@github/details-menu-element": "^1.0.12", "@github/image-crop-element": "^5.0.0", - "@github/mini-throttle": "^2.1.0", + "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.0.10", - "@primer/behaviors": "^1.2.0" + "@oddbird/popover-polyfill": "^0.4.0", + "@primer/behaviors": "^1.3.4" } }, "node_modules/@react-aria/ssr": { diff --git a/package.json b/package.json index 3d611eb798b0..8d4cc90fa9fc 100644 --- a/package.json +++ b/package.json @@ -239,7 +239,7 @@ "@octokit/plugin-retry": "6.0.1", "@octokit/request-error": "5.0.1", "@primer/behaviors": "^1.3.5", - "@primer/css": "^21.0.7", + "@primer/css": "^21.2.2", "@primer/octicons": "^19.5.0", "@primer/octicons-react": "^19.5.0", "@primer/react": "36.2.0", diff --git a/src/frame/components/ui/MarkdownContent/stylesheets/lists.scss b/src/frame/components/ui/MarkdownContent/stylesheets/lists.scss index d9f59f001c60..e06aed8ea017 100644 --- a/src/frame/components/ui/MarkdownContent/stylesheets/lists.scss +++ b/src/frame/components/ui/MarkdownContent/stylesheets/lists.scss @@ -1,94 +1,30 @@ -.markdownBody { - ol:not(:global(.no-styling)) { - counter-reset: li; - list-style: none; - position: relative; - padding-bottom: 0.5rem; - padding-left: 0; - - > li { - padding: 0.5rem 0 0.5rem 2.5rem; - border: 0; - position: relative; - margin-bottom: 0.25rem; - - &:before { - width: calc(1.5rem - 2px); - height: calc(1.5rem - 2px); - font-size: calc(1rem - 2px); - margin: 1px 0 0 0.5rem; - content: counter(li); - counter-increment: li; - position: absolute; - left: 0; - color: var(--color-canvas-default); - font-weight: 500; - text-align: center; - border-radius: 50%; - background-color: var(--color-fg-default); - } - - &:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; - } - - p { - margin: 0; - } - - p:first-child { - margin-top: 0; - } - - p:not(:first-child) { - margin-top: 1rem; - } +@import "@primer/css/support/variables/typography.scss"; - [class~="ghd-tool"] { - margin-top: 1rem; - } +$ol-circled-reduce-diameter: 2px; +// line-height is 24 pixels (16 * 1.5), and we want a 22px diameter but respect the line-height. - // for one level deep of nested ordered lists we switch bullet points - // from the custom numbers to letters - ol { - padding-left: 2em; - counter-reset: revert; - - > li { - list-style-type: lower-alpha; - padding-left: 0.5rem; - - &:before { - all: unset; - } +.markdownBody { + > :global(.ghd-tool) > ol:not(:global(.no-styling)), + > ol:not(:global(.no-styling)) { + list-style: none; - &:after { - all: unset; - } - } - } + > li::before { + content: counter(list-item); + float: left; + width: calc(1.5rem - $ol-circled-reduce-diameter); + margin-left: -2rem; + margin-top: $ol-circled-reduce-diameter / 2; + font-size: $h5-size; + line-height: calc(1.5rem - $ol-circled-reduce-diameter); + font-weight: 500; + text-align: center; + background-color: var(--color-fg-default); + color: var(--color-canvas-default); + border-radius: 50%; } - ol li:before:global(.no-styling) { - display: none; + ol { + list-style-type: lower-alpha; } } - - ul ul, - ul ol, - ol ol, - ol ul { - margin-top: 1rem; - margin-bottom: 1rem; - } -} - -/* Override primer style */ -.markdownBody div > ol:not([type]) { - list-style-type: none; }