Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom font size for Emoji Preview text #739

Merged
merged 14 commits into from
Jan 12, 2023
Merged

Support custom font size for Emoji Preview text #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5f15238
add new prop for the Preview font size
cmunozgar Nov 21, 2022
1ac91f4
use emojiPreviewSize
cmunozgar Nov 21, 2022
24e37d7
update prop name and default size
cmunozgar Nov 22, 2022
4f9abcd
Merge branch 'main' into add-emoji-preview-font-size-customization
cmunozgar Nov 23, 2022
63ca0d5
Merge branch 'main' into add-emoji-preview-font-size-customization
cmunozgar Dec 13, 2022
8e5fb62
Merge branch 'main' into add-emoji-preview-font-size-customization
cmunozgar Dec 13, 2022
f87c361
Merge branch 'main' into add-emoji-preview-font-size-customization
cmunozgar Jan 4, 2023
de1e720
remove value from Props
cmunozgar Jan 4, 2023
31fcdd4
add css variable with default value of 21px
cmunozgar Jan 4, 2023
921dc16
Merge branch 'add-emoji-preview-font-size-customization' of https://g…
cmunozgar Jan 4, 2023
503a9c3
default value
cmunozgar Jan 4, 2023
936c60e
remove CSS styles in .scss file and add css variable inline
cmunozgar Jan 4, 2023
6129412
Add CSS variables to control preview sizes
EtienneLem Jan 12, 2023
ef96859
Merge branch 'main' into add-emoji-preview-font-size-customization
EtienneLem Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions packages/emoji-mart/src/components/Picker/Picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -725,26 +725,22 @@ export default class Picker extends Component {
<div class={`margin-${this.dir[0]}`}>
{emoji ? (
<div class={`padding-${this.dir[2]} align-${this.dir[0]}`}>
<div class="ellipsis" style={{ fontSize: '1.1em' }}>
{emoji.name}
</div>
<div class="ellipsis color-c" style={{ fontSize: '.9em' }}>
<div class="preview-title ellipsis">{emoji.name}</div>
<div class="preview-subtitle ellipsis color-c">
{emoji.skins[0].shortcodes}
</div>
</div>
) : noSearchResults ? (
<div class={`padding-${this.dir[2]} align-${this.dir[0]}`}>
<div class="ellipsis" style={{ fontSize: '1.1em' }}>
<div class="preview-title ellipsis">
{I18n.search_no_results_1}
</div>
<div class="ellipsis color-c" style={{ fontSize: '.9em' }}>
<div class="preview-subtitle ellipsis color-c">
{I18n.search_no_results_2}
</div>
</div>
) : (
<div class="color-c" style={{ fontSize: 21 }}>
{I18n.pick}
</div>
<div class="preview-placeholder color-c">{I18n.pick}</div>
)}
</div>
</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/emoji-mart/src/components/Picker/PickerStyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@

--sidebar-width: 16px;

--preview-placeholder-size: 21px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I realize here @EtienneLem is that we should probably use an internal variable name and check if a global variable is present or if the value should default to 21px. Otherwise, there's no way to customize the size.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've created this small PR to address the override of the CSS variable: #779

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be working in v5.5.1

--preview-title-size: 1.1em;
--preview-subtitle-size: .9em;

--duration: 225ms;
--duration-fast: 125ms;
--duration-instant: 50ms;
Expand Down Expand Up @@ -318,6 +322,10 @@ button {
position: relative;
padding: calc(var(--padding) + 4px) var(--padding);
padding-right: var(--sidebar-width);

.preview-placeholder { font-size: var(--preview-placeholder-size) }
.preview-title { font-size: var(--preview-title-size) }
.preview-subtitle { font-size: var(--preview-subtitle-size) }
}

#nav, #preview {
Expand Down