diff --git a/packages/popup-picker/index.html b/packages/popup-picker/index.html index 12453597..bb3bca26 100644 --- a/packages/popup-picker/index.html +++ b/packages/popup-picker/index.html @@ -9,8 +9,8 @@

PicMo: Popup Picker

-
- 
Select an emoji
@@ -20,11 +20,11 @@

PicMo: Popup Picker

Light Dark -
+

Selected emoji!

-
-
Nothing selected
+
+
Nothing selected
diff --git a/packages/popup-picker/index.js b/packages/popup-picker/index.js index dea80841..2b618e25 100644 --- a/packages/popup-picker/index.js +++ b/packages/popup-picker/index.js @@ -3,7 +3,7 @@ import { createPopup } from './src/index'; const trigger = document.querySelector('#trigger'); const picker = createPopup({ showRecents: false }, { - position: 'bottom-end' + position: 'bottom-start' }); trigger.addEventListener('click', () => { diff --git a/packages/popup-picker/src/popupPicker.ts b/packages/popup-picker/src/popupPicker.ts index 58ee65aa..6deac4b9 100644 --- a/packages/popup-picker/src/popupPicker.ts +++ b/packages/popup-picker/src/popupPicker.ts @@ -8,6 +8,7 @@ import { FocusTrap, PickerOptions, ExternalEvent, + getPrefixedClasses, } from 'picmo'; import { PopupEvent } from './PopupEvents'; import { setPosition, PositionCleanup } from './positioning'; @@ -21,10 +22,11 @@ type OpenOptions = { triggerElement?: HTMLElement; } -const classes = { - popupContainer: 'popupContainer', - closeButton: 'closeButton' -}; +const classes = getPrefixedClasses( + 'popupContainer', + 'closeButton' +); + export class PopupPickerController { picker: EmojiPicker; isOpen = false; diff --git a/packages/renderer-twemoji/src/index.ts b/packages/renderer-twemoji/src/index.ts index 6e668599..3ff9d41f 100644 --- a/packages/renderer-twemoji/src/index.ts +++ b/packages/renderer-twemoji/src/index.ts @@ -1,15 +1,13 @@ import { parse } from 'twemoji-parser'; -import { EmojiRecord, EmojiSelection, Renderer, toElement, createStyleInjector } from 'picmo'; +import { EmojiRecord, EmojiSelection, Renderer, toElement, createStyleInjector, getPrefixedClasses } from 'picmo'; import css from './twemoji.css?inline'; import * as spriteSheets from './sprites'; type TwemojiImageFormat = 'svg' | 'png'; -const classes = { - twemoji: 'twemoji' -}; +const classes = getPrefixedClasses('twemoji') const styleInject = createStyleInjector();