fix: dark mode CSS tweaks, add storybook/matchMedia/docs
parent
848fc76396
commit
8cff39f6fd
|
@ -29,6 +29,7 @@ import { Picker } from 'emoji-mart'
|
||||||
| **autoFocus** | | `false` | Auto focus the search input when mounted |
|
| **autoFocus** | | `false` | Auto focus the search input when mounted |
|
||||||
| **color** | | `#ae65c5` | The top bar anchors select and hover color |
|
| **color** | | `#ae65c5` | The top bar anchors select and hover color |
|
||||||
| **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing |
|
| **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing |
|
||||||
|
| **darkMode** | | varies | Dark mode (boolean). `true` by default if the browser reports [`prefers-color-scheme: dark`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). |
|
||||||
| **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. |
|
| **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. |
|
||||||
| **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
|
| **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
|
||||||
| **custom** | | `[]` | [Custom emojis](#custom-emojis) |
|
| **custom** | | `[]` | [Custom emojis](#custom-emojis) |
|
||||||
|
|
|
@ -4,11 +4,6 @@
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-dark-bg{
|
|
||||||
color: #fff !important;
|
|
||||||
background-color: #222 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart {
|
.emoji-mart {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -148,10 +143,6 @@
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-category .emoji-mart-emoji-dark:hover:before{
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category-label {
|
.emoji-mart-category-label {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -160,17 +151,13 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-category-label-span {
|
.emoji-mart-category-label span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 5px 6px;
|
padding: 5px 6px;
|
||||||
background-color: rgb(255, 255, 255, 0.95);
|
background-color: #fff;
|
||||||
color: #000;
|
background-color: rgba(255, 255, 255, .95);
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category-label-span-dark {
|
|
||||||
background-color: rgba(0, 0, 0, 0.95) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-category-list {
|
.emoji-mart-category-list {
|
||||||
|
@ -426,4 +413,29 @@
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Dark mode styles
|
||||||
|
*/
|
||||||
|
|
||||||
|
.emoji-mart-dark {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-dark .emoji-mart-search input {
|
||||||
|
background-color: #2f2f2f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-dark .emoji-mart-search-icon svg {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-dark .emoji-mart-category-label span {
|
||||||
|
background-color: #222;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
|
@ -158,7 +158,6 @@ export default class Category extends React.Component {
|
||||||
i18n,
|
i18n,
|
||||||
notFound,
|
notFound,
|
||||||
notFoundEmoji,
|
notFoundEmoji,
|
||||||
darkMode,
|
|
||||||
} = this.props,
|
} = this.props,
|
||||||
emojis = this.getEmojis(),
|
emojis = this.getEmojis(),
|
||||||
labelStyles = {},
|
labelStyles = {},
|
||||||
|
@ -175,6 +174,10 @@ export default class Category extends React.Component {
|
||||||
labelStyles = {
|
labelStyles = {
|
||||||
height: 28,
|
height: 28,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
labelSpanStyles = {
|
||||||
|
position: 'absolute',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -190,11 +193,7 @@ export default class Category extends React.Component {
|
||||||
className="emoji-mart-category-label"
|
className="emoji-mart-category-label"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={
|
style={labelSpanStyles}
|
||||||
darkMode
|
|
||||||
? 'emoji-mart-category-label-span emoji-mart-category-label-span-dark'
|
|
||||||
: 'emoji-mart-category-label-span'
|
|
||||||
}
|
|
||||||
ref={this.setLabelRef}
|
ref={this.setLabelRef}
|
||||||
aria-hidden={true /* already labeled by the section aria-label */}
|
aria-hidden={true /* already labeled by the section aria-label */}
|
||||||
>
|
>
|
||||||
|
@ -210,10 +209,7 @@ export default class Category extends React.Component {
|
||||||
(emoji.short_names && emoji.short_names.join('_')) || emoji
|
(emoji.short_names && emoji.short_names.join('_')) || emoji
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{NimbleEmoji(
|
{NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
|
||||||
{ emoji: emoji, data: this.data, ...emojiProps },
|
|
||||||
darkMode,
|
|
||||||
)}
|
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -74,7 +74,7 @@ const _convertStyleToCSS = (style) => {
|
||||||
return div.getAttribute('style')
|
return div.getAttribute('style')
|
||||||
}
|
}
|
||||||
|
|
||||||
const NimbleEmoji = (props, darkMode) => {
|
const NimbleEmoji = (props) => {
|
||||||
if (props.data.compressed) {
|
if (props.data.compressed) {
|
||||||
uncompress(props.data)
|
uncompress(props.data)
|
||||||
}
|
}
|
||||||
|
@ -97,9 +97,7 @@ const NimbleEmoji = (props, darkMode) => {
|
||||||
let { unified, custom, short_names, imageUrl } = data,
|
let { unified, custom, short_names, imageUrl } = data,
|
||||||
style = {},
|
style = {},
|
||||||
children = props.children,
|
children = props.children,
|
||||||
className = darkMode
|
className = 'emoji-mart-emoji',
|
||||||
? 'emoji-mart-emoji emoji-mart-emoji-dark'
|
|
||||||
: 'emoji-mart-emoji',
|
|
||||||
nativeEmoji = unified && unifiedToNative(unified),
|
nativeEmoji = unified && unifiedToNative(unified),
|
||||||
// combine the emoji itself and all shortcodes into an accessible label
|
// combine the emoji itself and all shortcodes into an accessible label
|
||||||
label = [nativeEmoji]
|
label = [nativeEmoji]
|
||||||
|
|
|
@ -512,13 +512,12 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
style={{ width: width, ...style }}
|
style={{ width: width, ...style }}
|
||||||
className={`emoji-mart ${darkMode && 'emoji-mart-dark-bg'}`}
|
className={`emoji-mart ${darkMode ? 'emoji-mart-dark' : ''}`}
|
||||||
aria-label={title}
|
aria-label={title}
|
||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
>
|
>
|
||||||
<div className="emoji-mart-bar">
|
<div className="emoji-mart-bar">
|
||||||
<Anchors
|
<Anchors
|
||||||
darkMode={darkMode}
|
|
||||||
ref={this.setAnchorsRef}
|
ref={this.setAnchorsRef}
|
||||||
data={this.data}
|
data={this.data}
|
||||||
i18n={this.i18n}
|
i18n={this.i18n}
|
||||||
|
@ -530,7 +529,6 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Search
|
<Search
|
||||||
darkMode={darkMode}
|
|
||||||
ref={this.setSearchRef}
|
ref={this.setSearchRef}
|
||||||
onSearch={this.handleSearch}
|
onSearch={this.handleSearch}
|
||||||
data={this.data}
|
data={this.data}
|
||||||
|
@ -550,7 +548,6 @@ export default class NimblePicker extends React.PureComponent {
|
||||||
{this.getCategories().map((category, i) => {
|
{this.getCategories().map((category, i) => {
|
||||||
return (
|
return (
|
||||||
<Category
|
<Category
|
||||||
darkMode={darkMode}
|
|
||||||
ref={this.setCategoryRef.bind(this, `category-${i}`)}
|
ref={this.setCategoryRef.bind(this, `category-${i}`)}
|
||||||
key={category.name}
|
key={category.name}
|
||||||
id={category.id}
|
id={category.id}
|
||||||
|
|
|
@ -79,7 +79,7 @@ export default class Search extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { i18n, autoFocus, darkMode } = this.props
|
const { i18n, autoFocus } = this.props
|
||||||
const { icon, isSearching, id } = this.state
|
const { icon, isSearching, id } = this.state
|
||||||
const inputId = `emoji-mart-search-${id}`
|
const inputId = `emoji-mart-search-${id}`
|
||||||
|
|
||||||
|
@ -92,14 +92,6 @@ export default class Search extends React.PureComponent {
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
placeholder={i18n.search}
|
placeholder={i18n.search}
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
style={
|
|
||||||
darkMode
|
|
||||||
? {
|
|
||||||
backgroundColor: '#2f2f2f',
|
|
||||||
color: '#fff',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
{/*
|
{/*
|
||||||
* Use a <label> in addition to the placeholder for accessibility, but place it off-screen
|
* Use a <label> in addition to the placeholder for accessibility, but place it off-screen
|
||||||
|
|
|
@ -31,7 +31,10 @@ const PickerDefaultProps = {
|
||||||
emojisToShowFilter: null,
|
emojisToShowFilter: null,
|
||||||
showPreview: true,
|
showPreview: true,
|
||||||
showSkinTones: true,
|
showSkinTones: true,
|
||||||
darkMode: false,
|
darkMode: !!(
|
||||||
|
typeof matchMedia === 'function' &&
|
||||||
|
matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
),
|
||||||
emojiTooltip: EmojiDefaultProps.tooltip,
|
emojiTooltip: EmojiDefaultProps.tooltip,
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
custom: [],
|
custom: [],
|
||||||
|
|
|
@ -39,6 +39,7 @@ storiesOf('Picker', module)
|
||||||
onSelect={action('selected')}
|
onSelect={action('selected')}
|
||||||
onSkinChange={action('skin changed')}
|
onSkinChange={action('skin changed')}
|
||||||
native={boolean('Unicode', true)}
|
native={boolean('Unicode', true)}
|
||||||
|
darkMode={boolean('Dark mode', false)}
|
||||||
set={select('Emoji pack', SETS, SETS[0])}
|
set={select('Emoji pack', SETS, SETS[0])}
|
||||||
emojiSize={number('Emoji size', 24)}
|
emojiSize={number('Emoji size', 24)}
|
||||||
perLine={number('Per line', 9)}
|
perLine={number('Per line', 9)}
|
||||||
|
|
Loading…
Reference in New Issue