fix: dark mode CSS tweaks, add storybook/matchMedia/docs

release
Nolan Lawson 2019-12-21 09:07:17 -08:00
parent 848fc76396
commit 8cff39f6fd
8 changed files with 44 additions and 44 deletions

View File

@ -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) |

View File

@ -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;
}

View File

@ -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>

View File

@ -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]

View File

@ -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}

View File

@ -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

View File

@ -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: [],

View File

@ -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)}