From fbf4687ba0437d4adb4c3f700ea0ff1a5dcaa469 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Mon, 29 Aug 2022 15:54:06 -0400 Subject: [PATCH 1/3] Add `all-initial` custom Tailwind component-layer class --- tailwind.config.mjs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 59eee355de8..1b680fe7e94 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -200,7 +200,7 @@ export default { // sub-components to select for that state. addVariant('sidebar-collapsed', '.sidebar-collapsed &'); }), - plugin(({ addUtilities }) => { + plugin(({ addComponents, addUtilities }) => { // Tailwind does not provide hyphens-related utility classes. addUtilities({ '.hyphens-none': { @@ -210,6 +210,14 @@ export default { hyphens: 'auto', }, }); + addComponents({ + // Add a custom class to set all properties to initial values. This must + // be on the components layer such that it gets applied "before" utility + // classes. + '.all-initial': { + all: 'initial', + }, + }); }), ], }; From cb2dd35ea9f0acdf6c7bfba835aa15fda3446f2f Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Tue, 30 Aug 2022 12:44:01 -0400 Subject: [PATCH 2/3] Bump `frontend-shared` to 5.4.1 This gets us the correct AnnotateIcon --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 76ca2b167ce..a796a092992 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.16.7", "@hypothesis/frontend-build": "1.2.0", - "@hypothesis/frontend-shared": "5.4.0", + "@hypothesis/frontend-shared": "5.4.1", "@octokit/rest": "^19.0.3", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^22.0.0", diff --git a/yarn.lock b/yarn.lock index 05779890c33..bd7bc72f987 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1110,10 +1110,10 @@ fancy-log "^1.3.3" glob "^7.2.0" -"@hypothesis/frontend-shared@5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@hypothesis/frontend-shared/-/frontend-shared-5.4.0.tgz#60b10bf5d576879176c0355dad883b465d43714d" - integrity sha512-GROm1HUzEto84Mwlix2pUoZfQNLPhqKIn+Y6d1gnwjvDUU2YxUOm+TWYtqmIRCEtEAb5jnm/VUsRJ7DdI8mYlg== +"@hypothesis/frontend-shared@5.4.1": + version "5.4.1" + resolved "https://registry.yarnpkg.com/@hypothesis/frontend-shared/-/frontend-shared-5.4.1.tgz#c0a6ce5c6e8ef9bc5ed5985d57c2bd1ec5f04c2a" + integrity sha512-tM+pypWahpMf2x4tarbhsmw+dQluJUZv8o9CqquVS3FtUucPZ6OJn3Rml6fWMZ0k3DVrDoRMS19VONjtig27Hw== dependencies: highlight.js "^11.6.0" From 53decc31c89872cb320db775ace4d0de361877c9 Mon Sep 17 00:00:00 2001 From: Lyza Danger Gardner Date: Mon, 29 Aug 2022 15:54:10 -0400 Subject: [PATCH 3/3] Update AdderToolbar for components, styling * Use updated components and icons * Refactor to eliminate external styles - Add tailwind utility class for `all: initial` --- src/annotator/components/AdderToolbar.js | 98 ++++++++++++------- src/annotator/test/adder-test.js | 2 +- .../annotator/components/AdderToolbar.scss | 37 ------- src/styles/annotator/components/_index.scss | 1 - tailwind.config.mjs | 6 +- 5 files changed, 65 insertions(+), 79 deletions(-) delete mode 100644 src/styles/annotator/components/AdderToolbar.scss diff --git a/src/annotator/components/AdderToolbar.js b/src/annotator/components/AdderToolbar.js index cf31a10eae3..bb007012d63 100644 --- a/src/annotator/components/AdderToolbar.js +++ b/src/annotator/components/AdderToolbar.js @@ -1,8 +1,18 @@ import classnames from 'classnames'; -import { LabeledButton, Icon } from '@hypothesis/frontend-shared'; +import { + AnnotateIcon, + ButtonBase, + HighlightIcon, + PointerDownIcon, + PointerUpIcon, +} from '@hypothesis/frontend-shared/lib/next'; import { useShortcut } from '../../shared/shortcut'; +/** + * @typedef {import('@hypothesis/frontend-shared/lib/types').IconComponent} IconComponent + */ + /** * Render an inverted light-on-dark "pill" with the given `badgeCount` * (annotation count). This is rendered instead of an icon on the toolbar @@ -16,11 +26,12 @@ function NumberIcon({ badgeCount }) { - {badgeCount} + {badgeCount} ); } @@ -34,55 +45,58 @@ function NumberIcon({ badgeCount }) { */ function AdderToolbarArrow({ arrowDirection }) { return ( - + > + {arrowDirection === 'up' ? : } + ); } /** * @param {object} props * @param {number} [props.badgeCount] - * @param {string} [props.icon] + * @param {IconComponent} [props.icon] * @param {string} props.label * @param {() => void} props.onClick * @param {string|null} props.shortcut */ -function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) { +function ToolbarButton({ badgeCount, icon: Icon, label, onClick, shortcut }) { useShortcut(shortcut, onClick); const title = shortcut ? `${label} (${shortcut})` : label; return ( - - {icon && } + {Icon && } {typeof badgeCount === 'number' && } - {label} - + {label} + ); } @@ -135,12 +149,15 @@ export default function AdderToolbar({ return (
-
+
onCommand('annotate')} label="Annotate" shortcut={annotateShortcut} /> onCommand('highlight')} label="Highlight" shortcut={highlightShortcut} diff --git a/src/annotator/test/adder-test.js b/src/annotator/test/adder-test.js index 6a9d3ad74b6..fe150a50ebf 100644 --- a/src/annotator/test/adder-test.js +++ b/src/annotator/test/adder-test.js @@ -72,7 +72,7 @@ describe('Adder', () => { it('renders the adder toolbar into a shadow root', () => { const shadowRoot = getContent(adder); assert.exists(shadowRoot); - assert.exists(shadowRoot.querySelector('.AdderToolbar')); + assert.exists(shadowRoot.querySelector('[data-component="AdderToolbar"]')); }); describe('button and shortcut handling', () => { diff --git a/src/styles/annotator/components/AdderToolbar.scss b/src/styles/annotator/components/AdderToolbar.scss deleted file mode 100644 index e5b5a0870ed..00000000000 --- a/src/styles/annotator/components/AdderToolbar.scss +++ /dev/null @@ -1,37 +0,0 @@ -@layer components { - // Main class for the root element of the "adder" toolbar that appears when the - // user makes a text selection. - .AdderToolbar { - // Reset all inherited properties to their initial values. This prevents CSS - // property values from the host page being inherited by elements of the - // Adder, even when using Shadow DOM. - all: initial; - - // Provide some hover-related behavior that cannot be feasibly duplicated - // using utility styles. - // - // When the container/parent element containing the annotator toolbar - // buttons is hovered, dim the buttons except the specifically-hovered - // button, which should be darkened. The "annotate" and "highlight" buttons - // use icons and a label, so dimming/darkening their text color suffices, - // but the badge-count pill needs its background-color dimmed/darkened as - // well (`.dim-bg`). - .dim-items-on-hover:hover { - .dim-item:not(:hover) { - @apply text-grey-5; - - .dim-bg { - @apply bg-grey-5; - } - } - - .dim-item:hover { - @apply text-grey-9; - - .dim-bg { - @apply bg-grey-9; - } - } - } - } -} diff --git a/src/styles/annotator/components/_index.scss b/src/styles/annotator/components/_index.scss index 8f19bc242ec..a67196d3cbf 100644 --- a/src/styles/annotator/components/_index.scss +++ b/src/styles/annotator/components/_index.scss @@ -2,6 +2,5 @@ @use '@hypothesis/frontend-shared/styles'; // Annotator-specific components. -@use './AdderToolbar'; @use './Buckets'; @use './sidebar'; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 1b680fe7e94..ec45de83ada 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -211,9 +211,9 @@ export default { }, }); addComponents({ - // Add a custom class to set all properties to initial values. This must - // be on the components layer such that it gets applied "before" utility - // classes. + // Add a custom class to set all properties to initial values. Used + // within shadow DOMs. This must be on the components layer such that it + // gets applied "before" utility classes. '.all-initial': { all: 'initial', },