From 22153a67d61cd8a0839fce427c34532fc6ef3a84 Mon Sep 17 00:00:00 2001 From: Ian Stewart Date: Tue, 12 Dec 2017 11:38:51 +0100 Subject: [PATCH] [5.0.0] Updated to React v16, added portal for PopOver, updated to emojione v3, refactored and restyled Message, replaced dangerouslySetInnerHTML with html-react-parser and adjusted some styling to 8dp grid (#994) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added edited prop to Message, added IconBomb, fixed IconMore color override, added fallback styles for ListItem avatar and rightButton, fixed MenuItem icon alignment, added more component tests, refactored docs icons page. * Fix/team (#710) * :memo: Added team to readme. * :package: Added contributers to package.json. * Empty-state component test (#704) * Created component test for card header * Created component test Empty-state * added an extra test for empty-state component test * RightButton in menu-item (#709) * :fire: Removed active icon. * :sparkles: Added rightButton feature to menu-item. * :memo: Added menu-item with rightButton to docs. * :memo: DocGen. * :green_heart: Fixed failing tests. * :rotating_light: Fixed linting error. * :lipstick: Changed active style * :memo: Changed to IconMenu example * Input component test (#708) * Created component test for card header * Created component test for input * Added an error styles test to component test * List component test (#712) * Created component test for card header * Created component test for List * added children prop to test * Added test for children prop * :lipstick: It's over nine thousand! (#715) * Changed MenuItem active icon for rightButton, increased popOver zIndex, added more component tests. * MenuItem component test (#713) * Created component test for card header * Created component test for menu-item * Created component test for menu-item * :bug: Added buttonStyle * :white_check_mark: Fixed test * Modal component test (#716) * Created component test for card header * Created component test for Modal * :bug: Fixed menu close on button (#720) * Overlay component test (#719) * Created component test for card header * Created component test overlay * Component tests: Props fixes (#722) * Fixed props in admin-badge test * Fixed props in alert test * Changed test order for alert test * Fixed props for app-header test * Fixed props for avatar test * Fixed describe title for avatar test * Fixed props for badge test * Fixed props for button test * Fixed props for card test * Fixed test description for card test * Fixed props for card-content test * Fixed describe title for card-content test * Fixed test description for card-content test * Fixed props for card-header test * Fixed test for title test * Fixed props for channel-header test * Changed test order for channel-header test * Fixed props for checkbox test * Fixed props for dialog test * Fixed small spelling error for dialog test * Fixed props for divider test * Fixed props for empty-state * Fixed describe title for empty-state test * Removed unnecessary button import * Fixed props for input test * Fixed small errors * Fixed props for list test * Fixed props for profile test * Lightbox component test (#721) * Created component test for card header * Created component test for Lightbox * Added tests * Fixed small spelling error * Update index.test.js * Created component test for Paper (#727) * PopOver component test (#729) * Created component test Pop-over * modified discripition * Issue #700 (#714) * :sparkles: Added DateSeparator * :sparkles: Added separator prop * :fire: Removed position relative * :lipstick: Added flexShrink: 0 * :fire: Removed redundant style * :globe_with_meridians: Added i18n to DateSeparator * :memo: Docgen * :memo: Changed comment * :heavy_plus_sign: Added escape-html * :sparkles: Added link parse * :memo: Doc gen * RadioButton component test (#731) * Created component test for radio-button * editted description * Created component test for profile-card (#730) * Table component test (#734) * Added test for table * Added test for table-body * Added test for table-column * Added test for table-header * Added test for table-header-column * Added test for table-row * Added test for tab (#735) * Switch component test (#736) * Added test for switch * Edited test description * Message typing (#737) * :sparkles: Added typing message * :memo: Docgen * :memo: Added typing example * :globe_with_meridians: Added locale to Message (#728) * :globe_with_meridians: Added locale to Message * :lipstick: Fixed link styles * Added DateSeparator, added separator, typing message and localse to Message, fixed Message link styles, added more component tests. * Added test for slider (#741) * Component tests: Added onClick tests (#739) * Added onclick test for alert * Added onclick test for button * Undid onclick test for alert * Added onclick test for dialog * Added onclick test for lightbox * Undid the undoing of onclick test for alert * Added another onclick test for dialog * Added another onclick test for lightbox * Added onclick test for menu-item * Fixed the broken stuff * Mentions/commands (#742) * :sparkles: Prepared Commands for user mentions by adding avatar * :memo: Added mentions example * :memo: Docgen * :fire: Removed avatar * Bug/pop over (#744) * Added middle function to getPopOverPosition logics. * Added test for middle positioning. * Issue #740 (#743) * Added EventListener, added renderNav method * Added handleKeyUp to IconMenu. * Added handleKeyUp to Select. * Added handleKeyUp to Lightbox. * Added handleKeyUp to Dialog. * Issue #605 (#747) * Added middle function for vertical positioning in getPopOverPosition logics. * Added test for vertical middle function. * Menu component test (#732) * Added test for menu * Added test for onclick function * Refactored tests and added test for closeMenu prop * Removed dummy test file * Added whiteSpace: nowrap. (#749) * Added whiteSpace: nowrap. * Fixed linter warning. * Added command avatar prop to Commands and made command description not required. Added event listener for escape key press to Dialog, Lightbox, Menu, Select and IconMenu. Fixed various styling issues, added more component tests. * Automated changelog (#754) * Added gemfile. * Added changelog gen. * Added changelog. * Added check for open state. (#756) * Added check for open state. * Moved checks to close functions instead. * Changed check. * Updated changelog. * Mentions/message (#746) * :construction: Working on mentions * Changed to array of strings. * Changed example. * Finished mention styles. * Refactored TextMessage to make use of html-react-parser instead of dangerouslySetInnerHTML. * Added onMentionClick. * Added docgen. * Changed docs. * Component tests: Added onChange tests (#760) * Added onchange test for checkbox * Added onchange test for input * Added onchange test for radio-button * Added onchange test for slider * Added onclick test for tab * Small fix * Issue #666 (#702) * :fire: Removed withTheme component. #666 * :memo: Removed depricated withTheme. * :memo: Removed warning. * :memo: Docgen * Added option to match commands non leading, changed command.title to command.value, added command.prefix (#753) * Made commands great again. * Changed docs. * Changed docs. * Added prefix to functions. * :lipstick: Adjusted styles to conform with design. (#701) * :lipstick: Adjusted styles to conform with design. * Added disabled prop to Input, fixed placeholder styles. * Changed Input text color. * Changed disabled styles. * Fixed tests. * Issue #705 (#707) * :sparkles: Added open and hideMenu prop, added onClickOutside * :lipstick: Added fontSize * :memo: Updated docs to match new api * :memo: Docgen * Added handleKeyDown to EmojiMenu. * Issue #725 (#750) * WIP emoji parser to new `emoji.js`. * WIP emoji-parsing files. * Added prettier. * Ignored emojione.json. * Fixed parse script. * Added emoji.sh. * Updated emojione. * Added tone0. * Fixed modifier titles. * Removed log. * Removed svgSprites prop, added cdn url fix. * Added fontSize. * Changed script to fix error in emojione.json. * Removed statics. * Added attribution to component. * Added attribution to docs page. * Added attribution to README. * Fixed color. * Docgen. * Added attribution. * Prettiered file. * Issue #641 (#659) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. * :art: Added nestedLevel prop and passthrough. * :art: Added nestedLevel prop and passthrough. * :lipstick: Added style handling for nestedLevel prop. * :green_heart: Fixed tests for root styles. * :white_check_mark: Added test for nestingLevel styles. * :memo: Added example shownig nestedLevel prop at work. * :memo: DocGen. * :memo: Fixed docs nav throwing warning. * :rotating_light: Fixed linting errors. * Issue #652 (#711) * :art: Added event to Pagination onChange * :memo: Changed doc comment * :art: Added event to sendEmoji * :art: Changed prop name * :art: Added event prop * :art: Added event, added docs * :memo: Docgen * :memo: Render newlines as
* :memo: Changed docs * Fixed test. * Fixed doc emoji css. * 4.0.0 * Removed unused npm script. * Fixed Searchbox changeSearchQuery (#765) * Pass value directly, event did not persist. * Docgen. * Removed console.log. * Made prop not required. (#766) * Added textDecoration: none. (#767) * Added textDecoration none to EmojiMenu attribution link, made onMentionClick not required, fixed bug with SearchBox changeQuery by passing value instead of event. * Updated LABELS.md. (#771) * Updated LABELS.md. * Added missing label. * Component tests: Consistency and test fixes (#763) * admin-badge consistency * alert consistency * small fixes * app-header consistency * small consistency changes fot tests * channel-header consistency * checkbox consistency * dialog consistency * Fixed input tests and added consistency * lightbox consistency * Fixed list tests and added consistency * Fixed menu-item tests and added consistency * added textAlign: 'left' (#772) * Added secondaryText to ChannelHeader. (#773) * Issue #770 (#774) * Added secondaryText to ChannelHeader. * Changed to minWidth, made Pagination button great again. * Added secondaryText to ChannelHeader, fixed TableHeader text alignment, fixed Pagination buttons, added tests. * Fixed test. * Fixed mistake with Button styling. (#776) * Fixed ChannelHeader styling for buttons. * Eslint (#779) * Updated eslint and config. * Applied new rules. * Removed z-index to overcome z-index quirks & restructured avatar div order. (#782) * Bug/doc table (#798) * Added correct styling for td items. * DocGen. * Removed borderTop, fixes issue #787. (#794) * Issue #790 (#791) * Added backgroundColor to input styles. * Reformatted prop types. * Added sendIcon and sendIconColor props. * Docgen. * Added placeholderStyle. * Issue #789 (#792) * Removed message arrow. * Decreased margins. * Fixed docs. * Fixed tests. * Added placeholderStyle to SearchBox. (#795) * Props to themeable component override color passed by theme, fixed issue #788. (#796) * Fixed EmojiMenu styling, closes issue #797. (#799) * Fixed EmojiMenu styling, closes issue #797. * Fixed tests. * Changed to longhand backgroundColor. (#801) * Changed to longhand backgroundColor. * Fixed tests * Issue #800 (#802) * Added dividerStyle, fixed issue #800. * Fixed Divider styles. * Added more examples. * Prepared for extended theming capabilities. * Added activeStyle to MenuItem, fixed issue #808. (#811) * Added iconColor to select, fixed issue #807. (#809) * Added iconColor to select, fixed issue #807.' * Fixed documentation. * Fixed linting errors. * Added iconColor to SearchBox, fixed issue #804. (#810) * Added iconColor to select, fixed issue #807.' * Added iconColor to SearchBox, fixed issue #804. * Fixed documentation. * Fixed documentation. * Fixed linting errors. * Added more override capabilities. * Added expandMenuItem to Message. (#814) * Added expandMenuItem to Message. * Changed docs. * Added commandStyle. (#815) * Added commandStyle. * Adjusted docs text. * Added more overiding styles capabilities. * Added check for expandMenuItem. * Fixed Message expand menu item, added missing check for expandMenuItem prop. * Added key events to Commands (#818) * Added onMenuClose. * Changed styles. * Changed onMouseOver to onChange. * Changed avatar styles. * Added key events. * Wip fixing docs. * WIP docs. * Removed borderRadius override. * Fixed docs. * Return this.hideMenu(); * Changed to single line. * Added onMenuOpen. * Emoji filter (#813) * WIP emoji parser to new `emoji.js`. * WIP emoji-parsing files. * Added prettier. * Ignored emojione.json. * Fixed parse script. * Added emoji.sh. * Updated emojione. * Added tone0. * Fixed modifier titles. * Removed log. * Removed svgSprites prop, added cdn url fix. * Added fontSize. * Changed script to fix error in emojione.json. * Removed statics. * Added attribution to component. * Added attribution to docs page. * Added attribution to README. * Fixed color. * Docgen. * Added attribution. * WIP emojifilter. * Fixed styles. * Added EmojiModifiers to EmojiFilter. * Sort of working docs. * Added parseHtml. * WIP emoji filter. * Fixed home table styles. * Added selectEmoji. * WIP filter. * Removed FocusTrap. * Uninstalled focus-trap-react. * Added tone filter.; * Fixed tab and enter events. * WIP emoji filter. * Added handleClose and added selectedEmoji. * Changed check. * Deconstructed onMenuClose. * Changed to handleChange. * Removed log. * Added focus on select. * Removed unused prop. * Added override style. * Only import _ because chain wouldnt work otherwise. * Made null default selected index. * Added onOpenMenu. * Multiline input (#785) * :sparkles: Added multiline to message input #134 * :sparkles: Added multiLine to Input * :memo: Added docgen * :art: Added default argument * :white_check_mark: Fixed tests * :white_check_mark: Added tests * Fixed merge conflicts * Fixed multi-line delete text bomb. * Fixed broken test. * Added multiline fix to input component. * Ignored package-lock. * Reverted change. * Removed correct file. * Moved propTypes and defaultProps to top of file. * Moved propTypes, defaultProps and displayName to top of file. * Docgen. * Removed redundant. * Added coverage to gitignore. * Added correct multiline hadnling code. * Added multiline example to docs. * Added `mobile-detect`. * Added mobile check so mobiles can use enter in multiline message inputs. * Moved mobile detect to internal function. * Added maxRows to multiline input. * Added maxRows to Input textarea. * Only get styles once... * Only get styles once... * Added lodash.get. * Linted file. * Added getStyles.placeholder. * Added rowHeight prop. * Destruct props instead of passing them, changed checks. * Added rowHeight prop. * Added multiline to Input and MessageInput. Added key events to Commands, added EmojiFilter component. * Added icons. (#820) * Added icons. * Docgen. * Destructed rowHeight prop. (#821) * Added four new icons, desctructed rowHeight prop in Input to prevent warnings. * Patch/card header styles (#823) * Added overide possibilities for card-header header element. * DocGen. * Added test for new getStyle function. * Added override for CardHeader. * Changed mentions to highlights. (#824) * Changed mentions to highlights. * Applied changes. * Docgen. * Changed mentions to highlights, changed how highlights are matched. * Issue #830 (#831) * Adjusted html stucture and css for profile component. * Added override style for cover and coverImage. * DocGen. * Fixed tests. * Added override capabilities to profile component. * Added `left: 50%` & `translate(-50%, -50%)`. Fixed #833. (#834) * Fixed profile styling. * Issue #778 (#836) * Added lodash to dependencies. * Replaced underscore with lodash. Fixes #778. * Removed underscore from dependencies. * Issue #837 (#839) * Added maxValue defaultprop. * Made check better. * Adjusted styles. Fixes #837. * Added more examples in badges. * DocGen. * Made prettier. * Tab change callback (#838) * Added onTabChange prop to tabs. * DocGen. * Added callback log to docs. * Added event and index to callback. * Adjusted log to show logging index. * DocGen. * Added callback to Tabs and fixed badge styling bug. * Tabs selected index (#841) * Simplified getSelectedTab. * Added selectedIndex prop. * Docgen. * Fixed tasks. * Fixed wrong function statements. * Removed if statement & componentWillReceive. * Made Tabs so it can work as a controlled component. * DocGen. * Tabs selected index (#844) * Simplified getSelectedTab. * Added selectedIndex prop. * Docgen. * Fixed tasks. * Fixed wrong function statements. * Removed if statement & componentWillReceive. * Changed check to isNumber. * Message badge (#846) * Added badge to Message. * Docgen. * Fixed test. * Added badge prop to Message. * Issue #851 (#852) * [4.3.6] Added badge prop to Message. (#847) * Issue #203 search-box (#583) * Refactored style function for search-box, #203 * Added test for search-box style function * Issue #203 select (#584) * Changed to es6 default argument * Added test for select style function, #203 * :bug: Made offline the default status (#585) * Issue #578 (#586) * fixed #578 * updated docs for pagination * Made Avatar status default offline, added jumpToPage Pagination, fixed some bugs with Pagination. Changed a lot of code styling, added getStyles tests. * Added test for slider style function, #203 (#587) * Issue #203 switch (#589) * Refactored style function for switch, #203 * Added test for switch style function, #203 * Added test for table style function, #203 (#590) * Issue #203 table items (#591) * Added test for table-body style function, #203 * Added test for table-column style function * Added test for table-header-column style function * Added test for table-header style function * Added test for table-row style function * :fire: Removed argument * :fire: Changed argument * Issue #203 alert (#592) * Refactored style function for alert, #203 * Added test for alert style function * Issue #203 banner (#593) * Refactored style function for banner, #203 * Added test for banner style function * Issue #203 divider (#594) * Refactored style function for divider, #203 * Small fix * Added test for divider style function * Issue #203 icon menu (#596) * Refactored style function for icon-menu, #203 * Added test for icon-menu style function * Issue #203 list (#597) * Refactored style function for list, #203 * Added test for list style function * Issue #598 (#600) * :bug: Increased zIndex * :memo: Added IconMenu example * Switch theme (#601) * :art: Changed to default param * :art: Minor code styling improvements * :bug: Changed to backgroundColor * Issue #203 emoji-menu (#595) * Refactored style function for emoji-menu, #203 * Added test for emoji-menu style function * Refactored emoji-categories styles * Changed naming * Refactored emoji-category styles * Refactored emoji-modifiers styles * Added tests * Fixed zIndex issue with ListItem, fixed theming issue with Switch, added more style tests. * :white_check_mark: Added test for getPager (#603) * :white_check_mark: Added test for getPager * :art: Fixed tets * :pencil2: Fixed typo * :white_check_mark: Added test * :lipstick: Adjusted styles to fix bug. Fixes #495. * :memo: Adjusted image size on docs page. #495 * Issue #604 (#606) * :sparkles: ListItem root click toggles nested list if onClick is not supplied * :zap: Added check for children to prevent redundant calls to setState * :art: Saved operators in const * :rewind: Reverted develop push. @iancstewart didn't have his coffee yet. * Issue #495 (#607) * :sparkles: Added new header design for lightbox. * :lipstick: Styled lightbox image. Fixed #495 #495 * :memo: DocGen. * :bug: Renamed prop to `title`. * :memo: DocGen. * :bug: Adjusted propname for image-message. * Issue #523 (#549) * :wrench: Ejected create-react-app * :fire: Removed styleroot * :fire: Removed eslint from create-react-app * :memo: Added info about styleroot * :green_heart: Installed radium * :hankey: Possible fix. (#608) * :hankey: Possible fix. Not very elegant though. * :memo: Added section about scaling emoji's * :rotating_light: Fixed maxLength * :sparkles: Added error to RadioButtonGroup (#611) * Added error to RadioButton group, added className to messages, added more tests. * :ambulance: Added missing type (#613) * :ambulance: Added hotfix for long text in tables (#614) * Added hotfix for Banner, added fix for long texts in Table. * Feature/collapsed images (#617) * :hankey: Added missing keys * :sparkles: Added collapse to image Messag * :pencil2: Fixed typo * :sparkles: Added collapsedText * :hankey: Oops * :lipstick: Added cursor * :memo: Added collapse example * [Feature] Commands (#616) * :sparkles: Added Commands component * :memo: Added docs for Command component * :memo: Fixed mistakes * :art: Changed to lodash map * Added Commands component, added collapsed and expand props to Message allowing image messages to be collapsed and expanded. * :sparkles: Added param to Commands (#619) * :sparkles: Added param to Commands * :memo: Added param example * :memo: Changed docs * :sparkles: Added filter to Commands (#620) * Feature/commands open/close (#621) * :sparkles: Added filter to Commands * :fire: Added open/close based on value prop * :memo: Changed placeholder * :sparkles: Added onClickOutside, clicking outside the menu will now close it (#623) * Added auto open/close to Commands, added value prop and filter to commands and added onClickOutside to Commands. * Commands onselect (#625) * :lipstick: Removed margin * :bug: Added missing setState * :bug: Added missing handleSelect * :memo: Added working hover and select events * :fire: Removed log * Added missing handleSelect to Commands, fixed styles. * :hammer: Refactored message doc to use selects instead of rendering more message lists (#629) * :lipstick: Fixed height for list-items without second line. (#632) * :lipstick: Fixed height for list-items without second line. Fixes #630. #630 * :green_heart: Added missing parameter to ListItem test. * :white_check_mark: Added test for `getStyle.root()` function for single-line styles. * :art: Flipped things around * :white_check_mark: Fixed test to match flip * :lipstick: Decreased ListItem height * :memo: Added primaryText example * Clickoutside (#634) * :heavy_minus_sign: Removed onlcickoutside, it caused production builds to fail * :hammer: Refactored to use a clickAway element * Bug/color contrast (#635) * :lipstick: Changed text colors * :lipstick: Changed bold texts to primaryText color * Removed onClickOutside from Commands, changed text colors to increase contrast. * :lipstick: Changed color * :lipstick: Added top and translate, fixed firefox issue (#640) * :sparkles: Added rightButton prop, overhauled stylings (#638) * :sparkles: Added rightButton prop, overhauled stylings * :fire: Removed override * :lipstick: Added top and translate, fixed firefox issue * :white_check_mark: Fixed tests * :green_heart: Fixed test * Fixed browser support issue with LisItems, added rightButton to MessageInput. * List item/icon menu (#644) * :lipstick: Overhauled styles to not break * :fire: Removed avatar from example * :green_heart: Fixed tests * Removed translate from button and avatar, fixed icon menu bug. * :bug: Fixed buttons for long text (#646) * Fixed ListItems with long texts and buttons. * :bug: Combine styles instead of returning (#650) * :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test * Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color * Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. * Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper * added test for alert (#609) * added test for alert * fixed an npm test fail and re-ordered the test itself * Fixed tests * :art: Added event argument to props (#653) * :art: Added event argument to props * :art: Changed propName * :memo: Changed doc comments * Added event to function props, changed onHover to onMouseOver. * AdminBadge component test (#655) * Added test for admin-badge component * :art: Changed titles * :hammer: Refactored list-item to fix alignment issue. (#656) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. * Issue #622 (#658) * :art: Replaced clickAway with onClickOutside * :art: Changed to onClickOutside * :art: Changed to onClickOutside * :white_check_mark: Removed test * Component tests: supply userAgent using beforeEach (#660) * Supplied userAgent using beforeEach * Supplied userAgent using beforeEach * Supplied userAgent using beforeEach * Changed useragent:null to undefined * Issue #628 (#633) * :art: Moved icon menu into textMessage. #628 * :bug: Fixed semantics. * :art: Moved icon menu into stickerMessage. #628 * :art: Move icon menu into imageMessage. #628 * :bug: Added render imageMessageIconMenu function. #627 * :bug: Removed icon button within collapsed image body. #627 * :memo: DocGen. * Squashed commit of the following: commit 552b3e691e39e1b987b41332e1a338998ba52389 Author: Ian Stewart Date: Fri Jun 9 09:52:07 2017 +0200 :hammer: Refactored list-item to fix alignment issue. (#656) * :hammer: Refactored list-item to fix alignment issue. Fixed issue #648. #648 * :white_check_mark: Added tests. * :bug: Removed redundant transform. * :green_heart: Fixed test. commit 14fce69248c544b11e9d295f763c810e60e12ef4 Author: Ralphvandodewaard Date: Fri Jun 9 09:16:05 2017 +0200 AdminBadge component test (#655) * Added test for admin-badge component * :art: Changed titles commit 2f4ae0347f4ee9bf8aa7f98d2820e05203409640 Author: sjaakluthart Date: Thu Jun 8 15:18:56 2017 +0200 Added event to function props, changed onHover to onMouseOver. commit c2b453b10c4962ccc8f2e8397bc790c6af6977d6 Merge: c2a2c93 5fe3d93 Author: sjaakluthart Date: Thu Jun 8 15:18:19 2017 +0200 :twisted_rightwards_arrows: Merged origin/master commit c2a2c936003db296eeda4282a1dd5b7cadcdc127 Author: Sjaak Luthart Date: Thu Jun 8 15:16:45 2017 +0200 :art: Added event argument to props (#653) * :art: Added event argument to props * :art: Changed propName * :memo: Changed doc comments commit 5c9b58fb249ec342931c99b39ea6f83a94c4d5ab Author: Tom Oversluizen Date: Thu Jun 8 12:32:09 2017 +0200 added test for alert (#609) * added test for alert * fixed an npm test fail and re-ordered the test itself * Fixed tests commit 5fe3d936223c6d252d5cddc0866434c9d424f0bb Author: Sjaak Luthart Date: Thu Jun 8 08:59:54 2017 +0200 [3.5.7] Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. (#651) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * Fixed listItem primaryText, secondaryText and adminBadge being off center (#467) * Fixed primaryText, secondaryText and adminBadge being off center * Reversed lineHeight changes and used another method to center items * Fixed primaryText lineHeight and used padding instead to position text * Re-added textOverflow and used minHeight * Reversed overflow:hidden in root * Develop (#498) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * :bug: Added secondaryBadge prop for badges in the text field. * :bug: Adjusted AdminBadge styles to fix height issue. * :memo: Added with secondaryBadge to docs pages. * :memo: DocGen. * :bug: Added 2px lineHeight for overhanging 'g'. * :bug: Added 2px lineHeight to compensate for overhanging g. * :art: Renamed prop * Issue #493 (#501) * :sparkles: Added `IconMenu`. * :bug: Changed prop onClick to closeMenu. * :memo: Added section to docs for messages with icon menu. * :memo: DocGen. * :fire: Removed redundant method * :art: Renamed method * Compact messages image (#500) * :bug: Fixed compact stickers * :lipstick: Changed style for compact image messages * Added IconMenu to message, fixed compact Message styles, added textBadge to ListItem. * fixed #508 (#509) * Tables (#510) * :sparkles: Added Table components * :sparkles: Changed to Table components * :memo: Added docs page * :hankey: Added missing exports * :art: Changed to es6 functions * Added Table components, added value prop to CheckBox. * :bug: Added check for textBadge (#513) * Removed unknown handleSearch prop and fixed errors, for #517 (#519) * Issue #507 (#516) * :construction: WIP changing context * :construction: Added unsub * :twisted_rightwards_arrows: merged stash * :art: Added themeable component * :art: Added newline * :construction: Added themeable HoC * :art: Changed to es6 methods * :hammer: Changed back to stateless, added color propType, added compose * :memo: WIP theme doc page * :truck: Renamed file * :twisted_rightwards_arrows: Merged stash * :fire: Removed pure to allow hovers to work again * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :fire: Removed theme wrapper * :memo: Added proper example for theme * :memo: Added h2 * :memo: Added default theme button * :truck: Made themeable part of the API * :art: Changed to lodash functions * :memo: Added themeable doc * :memo: Fixed usage * :memo: Changed getting started * :memo: Added docs output * :memo: Removed components I do not need docs for * added curry function for themeable options * :rotating_light: Removed React warning * :art: Changed naming * :memo: Finished themeable hoc doc * :memo: Added deprecation warnings * added option to use anchor-ui without withTheme component * :hammer: Applied theme changes to EmojiMenu * :hammer: Applied theme change to Modal * :art: Removed redundant * :green_heart: Fixed lint error * :hankey: Reverted change * Changed how theme color is managed, added ThemeProvider, added themeable HoC. * :hankey: Added missing export * Added export for ThemeProvider. * Issue #504 (#529) * :bug: Added `contentStyle` prop to iconMenu. * :memo: DocGen. #504 * :bug: Added default for prop. Fixed #504. * :memo: DocGen. #504 * Issue #203 avatar (#525) * Added test for avatar style function, #203 * Added test for each type * Issue #203 admin-badge (#524) * Added test for admin-badge style function * Fixed wrong property on inverted test * :lipstick: Added missing themeable to ChannelAvatar (#527) * Issue #518 (#532) * Made hideAlert prop optional, for #518 * Removed hideAlert from home and with-theme * :lipstick: Added theme color transition (#528) * :lipstick: Added theme color transition * :green_heart: Fixed tests * :hankey: Added default `right: inital` to select's popOver styles. (#531) * :hankey: Added default `right: inital` to select's popOver styles. We should find a better fix for this. Fixes #530. #530 * :bug: Moved popOver styles to const. * deleted line-height to fix the display of the adminbadge on firefox, … (#521) * deleted line-height to fix the display of the adminbadge on firefox, fixed #512 * modified lineheight secondarytext * changed line-height of the textbadge to 22px * reverted changes * :sparkles: Added IconColor (#537) * :sparkles: Added icon refresh (#539) * Various styling fixes, added icons, added themeable to ChannelAvatar, added contentStyle to IconMenu, added transition to all components that use theme colour. * Refactored style function for banner, #203 (#536) * Added test for card-content style function, #203 (#542) * Added test for card-header style function, #203 (#544) * Added test for channel-header style function, #203 (#545) * Added test for card style function, #203 (#540) * Window resize (#543) * :heavy_plus_sign: Added `react-event-listener`. * :sparkles: Added `closeMenu` on window resize. * :memo: DocGen. * :green_heart: Added new line. * Fixed empty objects (#551) * Issue #203 button (#538) * Added test for button style function, #203 * Combine-styles fix * Fixed empty objects * :hankey: Fixed github button * Issue #203 badge (#535) * Added test for badge style function, #203 * Small fix * Fixed empty objects and changed to es6 default argument * :white_check_mark: Changed describe * Issue #203 checkbox (#546) * Added test for checkbox style function, #203 * Fixed empty object * Issue #203 dialog (#547) * Added test for dialog style function, #203 * Fixed tests. * Fixed empty object and changed to es6 default argument * Issue #203 empty-state (#548) * Refactored style function for empty-state, #203 * Fixed empty object * Fixed empty objects (#553) * Refactored style function for banner (#554) * Added test for lightbox style function, #203 (#555) * Refactored list style function (#556) * Issue #203 list-item (#557) * Added test for list-item style function * Changed to es6 default argument * Added test for menu-item style function, #203 (#559) * Added test for message style function, #203 (#561) * Issue #203 image-message (#563) * Added test for image-message style function * Changed to es6 default argument * Added test for message-header style function, #203 (#565) * Added test for message-time style function, #203 (#567) * :rotating_light: Fixed linter missing files. (#550) * :rotating_light: Fixed linter missing files. * resolved lint errors * Pagination (#564) * :sparkles: Added Pagination component * :sparkles: Added icons * :memo: Added docs page * :memo: Changed docs * :lipstick: Added width * :fire: Removed header * :sparkles: Added position prop * :memo: Updated docgen * :fire: Removed defaultProp * :hankey: Removed loze put * :sparkles: Changed argument * Components updated to ES6 arrow function (#566) * updated the badge function to a ES6 arrow function * updated the adminbadge function to an ES6 arrow function * updated the alert function to an ES6 arrow function * updated the app-header function to an ES6 arrow function * updated the avatar function to an ES6 arrow function * updated the button function to an ES6 arrow function * updated the card function to an ES6 arrow function * updated the channel-header function to an ES6 arrow function * updated the divider function to an ES6 arrow function * updated the emoji-menu function to an ES6 arrow function * updated the empty-state function to an ES6 arrow function * updated the home function to an ES6 arrow function * updated icon-menu function to an ES6 arrow function * updated lightbox function to an ES6 arrow function * updated list-item function to an ES6 arrow function * updated list function to an ES6 arrow function * updated icons function to an ES6 arrow function * updated loading function to an ES6 arrow function * updated menu-item function to an ES6 arrow function * updated message-list function to an ES6 arrow function * updated message function to an ES6 arrow function * updated nav function to an ES6 arrow function * updated paper function to an ES6 arrow function * updated pop-over function to an ES6 arrow function * updated profile-card function to an ES6 arrow function * updated profile function to an ES6 arrow function * updated props function to an ES6 arrow function * updated table function to an ES6 arrow function * updated tabs function to an ES6 arrow function * updated theme-provider function to an ES6 arrow function * updated themeable function to an ES6 arrow function * updated with-theme function to an ES6 arrow function * Added Pagination component, fixed some code styling, added tests. * :memo: Changed docs * Issue #203 loader (#558) * Refactored loader style function * Added test for loader style function, #203 * Fixed naming * Added root style function * Fixed function, added test * Added test for text-message style function, #203 (#572) * Issue #203 message-input (#573) * Refactored style function for message-input, #203 * Added test for message-input style function * Issue #203 message-list (#574) * Refactored style function for message-list, #203 * Added test for message-list style function * Fixed wrong naming (#575) * Added test for overlay style function, #203 (#576) * Added test for pagination style function, #203 (#577) * Issue #203 radio-button (#581) * Refactored style function for radio-button, #203 * Added test for radio-button style fucntion, #203 * SRC Functions update to ES6 (#571) * updated index funtion to an ES6 arrow function * updated app-header function to an ES6 arrow function * updated avatar function to an ES6 arrow function * updated badge function to an ES6 arrow function * updated card function to an ES6 arrow function * updated card-content function to an ES6 arrow function * updated card function to an ES6 arrow function * updated card-header function to an ES6 arrow function * updated channel header function to ES6 * updated checkbox function to ES6 * updated divider function to ES6 * updated emoji categories function to ES6 * updated emoji menu function to ES6 * updated empty state function to ES6 * updated the icons functions to ES6 * fixed console error in icons * updated input function to ES6 * updated internal functions to ES6 * updated list function to ES6 * updated loader functions to ES6 * :art: Moved scope * :hankey: Fixed conflict * :hankey: Added missing returns * :art: Reverted change * updated menu function to an ES6 arrow function * updated multiple messages functions to ES6 arrow functions * updated message-input functions to ES6 arrow functions * updated modal function to ES6 arrow function * updated overlay function to an ES6 arrow function * updated paper function to an ES6 arrow function * updated pop-over function to ES6 arrow function * fixed merge conflict * updated radio button function to ES6 arrow function * updated radio button group function to ES6 arrow function * updated slider function to ES6 arrow function * updated switch function to ES6 arrow function * updated tab function to ES6 arrow function * updated adminbadge getstyles function * updated app-header get styles function * updated avatar get styles function * updated button get style function * updated channel-header get styles functions * updated card-content get styles function * updaetd card-header get styles function * updated app-header get styles functions * updated checkbox getstyles functions * updated dialog getstyles function * updated empty-state getstyles function * updated input get styles functions * updated lightbox get-styles functions * updated list-item get styles function * updated menu getstyles functions * updated menu-item getstyles functions * updated messages get-styles functions * updated modal getstyles functions * updated overlay getstyles functions * updated paper getstyles function * updated profile getstyles functions * updated profile-card getstyles function * updated select getstyles functions * updated slider getstyles functions * updated tab getstyles functions * updated table getstyles function * updated table bpdy getstyles function * updated table column getstyles functions * updated table header getstyles functions * updated table-header-column getstyles functions * updated table-row getstyles functions * updated tabs getstyles functions * :hankey: Reverted change * :art: Removed newline * :art: Removed newline * Issue #203 pop-over (#579) * Refactored style function for pop-over, #203 * Added test for pop-over style function * Added test for position argument * Issue #203 profile-card (#580) * Changed to es6 default value * Added test for profile-card style function, #203 * Fixed avatar style test * Issue #203 radio-button-group (#582) * Refactored style function for radio-button-group, #203 * Added test for radio-button-group style function * Issue #203 search-box (#583) * Refactored style function for search-box, #203 * Added test for search-box style function * Issue #203 select (#584) * Changed to es6 default argument * Added test for select style function, #203 * :bug: Made offline the default status (#585) * Issue #578 (#586) * fixed #578 * updated docs for pagination * Made Avatar status default offline, added jumpToPage Pagination, fixed some bugs with Pagination. Changed a lot of code styling, added getStyles tests. * Added test for slider style function, #203 (#587) * Issue #203 switch (#589) * Refactored style function for switch, #203 * Added test for switch style function, #203 * Added test for table style function, #203 (#590) * Issue #203 table items (#591) * Added test for table-body style function, #203 * Added test for table-column style function * Added test for table-header-column style function * Added test for table-header style function * Added test for table-row style function * :fire: Removed argument * :fire: Changed argument * Issue #203 alert (#592) * Refactored style function for alert, #203 * Added test for alert style function * Issue #203 banner (#593) * Refactored style function for banner, #203 * Added test for banner style function * Issue #203 divider (#594) * Refactored style function for divider, #203 * Small fix * Added test for divider style function * Issue #203 icon menu (#596) * Refactored style function for icon-menu, #203 * Added test for icon-menu style function * Issue #203 list (#597) * Refactored style function for list, #203 * Added test for list style function * Issue #598 (#600) * :bug: Increased zIndex * :memo: Added IconMenu example * Switch theme (#601) * :art: Changed to default param * :art: Minor code styling improvements * :bug: Changed to backgroundColor * Issue #203 emoji-menu (#595) * Refactored style function for emoji-menu, #203 * Added test for emoji-menu style function * Refactored emoji-categories styles * Changed naming * Refactored emoji-category styles * Refactored emoji-modifiers styles * Added tests * Fixed zIndex issue with ListItem, fixed theming issue with Switch, added more style tests. * :white_check_mark: Added test for getPager (#603) * :white_check_mark: Added test for getPager * :art: Fixed tets * :pencil2: Fixed typo * :white_check_mark: Added test * :lipstick: Adjusted styles to fix bug. Fixes #495. * :memo: Adjusted image size on docs page. #495 * Issue #604 (#606) * :sparkles: ListItem root click toggles nested list if onClick is not supplied * :zap: Added check for children to prevent redundant calls to setState * :art: Saved operators in const * :rewind: Reverted develop push. @iancstewart didn't have his coffee yet. * Issue #495 (#607) * :sparkles: Added new header design for lightbox. * :lipstick: Styled lightbox image. Fixed #495 #495 * :memo: DocGen. * :bug: Renamed prop to `title`. * :memo: DocGen. * :bug: Adjusted propname for image-message. * Issue #523 (#549) * :wrench: Ejected create-react-app * :fire: Removed styleroot * :fire: Removed eslint from create-react-app * :memo: Added info about styleroot * :green_heart: Installed radium * :hankey: Possible fix. (#608) * :hankey: Possible fix. Not very elegant though. * :memo: Added section about scaling emoji's * :rotating_light: Fixed maxLength * :sparkles: Added error to RadioButtonGroup (#611) * Added error to RadioButton group, added className to messages, added more tests. * :ambulance: Added missing type (#613) * :ambulance: Added hotfix for long text in tables (#614) * Added hotfix for Banner, added fix for long texts in Table. * Feature/collapsed images (#617) * :hankey: Added missing keys * :sparkles: Added collapse to image Messag * :pencil2: Fixed typo * :sparkles: Added collapsedText * :hankey: Oops * :lipstick: Added cursor * :memo: Added collapse example * [Feature] Commands (#616) * :sparkles: Added Commands component * :memo: Added docs for Command component * :memo: Fixed mistakes * :art: Changed to lodash map * Added Commands component, added collapsed and expand props to Message allowing image messages to be collapsed and expanded. * :sparkles: Added param to Commands (#619) * :sparkles: Added param to Commands * :memo: Added param example * :memo: Changed docs * :sparkles: Added filter to Commands (#620) * Feature/commands open/close (#621) * :sparkles: Added filter to Commands * :fire: Added open/close based on value prop * :memo: Changed placeholder * :sparkles: Added onClickOutside, clicking outside the menu will now close it (#623) * Added auto open/close to Commands, added value prop and filter to commands and added onClickOutside to Commands. * Commands onselect (#625) * :lipstick: Removed margin * :bug: Added missing setState * :bug: Added missing handleSelect * :memo: Added working hover and select events * :fire: Removed log * Added missing handleSelect to Commands, fixed styles. * :hammer: Refactored message doc to use selects instead of rendering more message lists (#629) * :lipstick: Fixed height for list-items without second line. (#632) * :lipstick: Fixed height for list-items without second line. Fixes #630. #630 * :green_heart: Added missing parameter to ListItem test. * :white_check_mark: Added test for `getStyle.root()` function for single-line styles. * :art: Flipped things around * :white_check_mark: Fixed test to match flip * :lipstick: Decreased ListItem height * :memo: Added primaryText example * Clickoutside (#634) * :heavy_minus_sign: Removed onlcickoutside, it caused production builds to fail * :hammer: Refactored to use a clickAway element * Bug/color contrast (#635) * :lipstick: Changed text colors * :lipstick: Changed bold texts to primaryText color * Removed onClickOutside from Commands, changed text colors to increase contrast. * :lipstick: Changed color * :lipstick: Added top and translate, fixed firefox issue (#640) * :sparkles: Added rightButton prop, overhauled stylings (#638) * :sparkles: Added rightButton prop, overhauled stylings * :fire: Removed override * :lipstick: Added top and translate, fixed firefox issue * :white_check_mark: Fixed tests * :green_heart: Fixed test * Fixed browser support issue with LisItems, added rightButton to MessageInput. * List item/icon menu (#644) * :lipstick: Overhauled styles to not break * :fire: Removed avatar from example * :green_heart: Fixed tests * Removed translate from button and avatar, fixed icon menu bug. * :bug: Fixed buttons for long text (#646) * Fixed ListItems with long texts and buttons. * :bug: Combine styles instead of returning (#650) * :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test * Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color * Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. * Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper commit e3c16baa0da131de4af19e128d76c76fb4092a3f Author: Ralphvandodewaard Date: Thu Jun 8 08:56:45 2017 +0200 Profile component test (#610) * Added test examples for style component * :truck: Moved file * Expanded profile component test * WIP function test with sinon * :white_check_mark: Moved tests * :fire: Removed tests * Added getStyle tests * Combined tests * Test button as prop instead of passing as child * Fixed small mistake in button test * Combined tests * Changed naming of profile to wrapper commit f5dc5eb6f9f2e7ea95d4e9b99f6cbaededf6dc69 Author: sjaakluthart Date: Thu Jun 8 08:49:22 2017 +0200 Reintroduced react-onclickoutside, fix override style bug with MessageInput, fixed Select header long texts. commit 093e3bf8113a45a88f580316c4bcee84f1c4d36b Author: Sjaak Luthart Date: Thu Jun 8 08:47:19 2017 +0200 Issue #622/commands (#649) * :hammer: Reverted changes * :lipstick: Fixed styles for long texts, changed color commit b63ce080a55b4aa7c43097912b8618a5fcbcad4e Author: Sjaak Luthart Date: Thu Jun 8 08:39:23 2017 +0200 :lipstick: Added translate (#643) * :lipstick: Added translate Fixed issue #637 * :lipstick: Increased padding * :green_heart: Fixed test commit f6a651690185a5cd2f2ceaf430c2c89c847dc653 Author: Sjaak Luthart Date: Thu Jun 8 08:39:09 2017 +0200 :bug: Combine styles instead of returning (#650) commit 38021fa626a65d23e7952139df93219baa39ebad Merge: 4977bef 22a499d Author: sjaakluthart Date: Wed Jun 7 17:12:24 2017 +0200 :twisted_rightwards_arrows: Merged origin/master commit 22a499daacd136fb95741ec56ed8c901006ccddf Author: Sjaak Luthart Date: Wed Jun 7 12:40:44 2017 +0200 [3.5.6] Fixed ListItems with long texts and buttons. (#647) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * Fixed listItem primaryText, secondaryText and adminBadge being off center (#467) * Fixed primaryText, secondaryText and adminBadge being off center * Reversed lineHeight changes and used another method to center items * Fixed primaryText lineHeight and used padding instead to position text * Re-added textOverflow and used minHeight * Reversed overflow:hidden in root * Develop (#498) * Added more tables. (#452) * added text overflow to list-item (#455) * added text overflow to list-item * deleted comma at line 65 * :bug: Added working fix * Saved styles to object for all pages (#457) * Added more examples to docs (#450) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * Issue #456 (#458) * :bug: Added text overlfow to Profile * :bug: Added text overflow to channel header * :bug: Added text overflow to pop over * :bug: Added textOverflow to AppHeader * :bug: Added text overflow to menu item * Add input example (#459) * Added more input examples * Added more message examples * Added more listItem examples * Saved style objects into consts * Saved styles into one object * Added error example on Select page and saved styles into object * Added more Slider examples * Added error style to Slider (Sjaak) * Saved styles into object for Input and Message * Changed valueDefaults to values and placed closing brackets on newline * :bug: Added disabled styles * :lipstick: Changed color * :fire: Removed inputs * Added error and disabled styles to Slider, fixed text overflow issues. * Issue-#462 (#464) * listItem set secondaryText lineHeight to 16px * Increased listItem height and fixed lineHeight * Fixed lineheight in list and updated examples * modified the max-height of the messageImage (#466) * modified the max-height of the messageImage * deleted commets and narrowed the max height down to 200px * Added more verticl spacing between Title, Description, Usage, Examples and Props (#468) * Fixed styling for Input page (#471) * Fixed styling for Input page * :lipstick: Changed Input's background color * Issue-#451: Fixed last few "style={{ }}"s (#469) * Fixed last few "style={{ }}"s * :bug: Reverted changes * :art: Renamed object * Issue #446: Added examples to components (#470) * Added AdminBadge example * Added Badge example * Added Button example * :art: Changed to single lines * Changed image Message max height, fixed Input background colour, fixed Input label colour. * Issue #477 (#478) * :sparkles: Added IconNotification * :memo: Added docs output * Issue #447 (#472) * Fixed styling for Input page * :sparkles: Added `lightbox/index.jsx`. * :lipstick: Added styles for `lightbox`. * :sparkles: Added lightbox to `message.jsx`. #447 * :memo: Docgen. * :hankey: Reverted unwanted commit. * :sparkles: Added `enableLightbox` prop. * :memo: Docgen. * :memo: Added `Docs` page. * :pencil2: New image link. * :bug: Added more checks for `enableLightbox`. * :bug: Added more checks. * :sparkles: Added onMenuClose to IconMenu (#479) * :sparkles: Added onMenuClose to IconMenu * :memo: Added docs * Added Lightbox component, added lightbox to Message, added IconNotification, added onMenuClose to IconMenu. * :sparkles: Added status indicator to Avatar (#484) Fixed issue #483 * :zap: Added recompose pure to WithTheme (#485) Fixed issue #481 * Added pure to WithTheme, added status to Avatar. * Profile status (#489) * :sparkles: Added status to Profile * :memo: Added docs output * Added status prop to Profile. * :bug: Added zIndex to icon and badge (#491) * Added zIndex to ListItem badge and icon style. * Fixed profile name being pushed under section (#475) * Fixed profile name being pushed under section * Same fix using styles instead of section element * New fix attempt for profile name being pushed under section * Reversed changes and added minHeight * Stickers (#497) * :sparkles: Added sticker type, added MessageHeader * :heavy_minus_sign: Removed press menu to prepare for more component splits * :art: Added MessageTime * :art: Changed import * :construction: WIP splitting messages * :art: Added ImageMessage * :art: Added StickerMessage * :hammer: Moved components to separate folders to allow for separate styles * :art: Moved styles to MessageTime folder * :art: Moved styles to MessageHeader * :construction: WIP styling StickerMessage * :lipstick: Finished sticker message style * :art: Moved styles to TextMessage * :lipstick: Added `flexShrink` to prevent shrinking. * :art: Moved style to ImageMessage * :memo: Added docs * Added stickers to Message, fixed bugs with Profile. * :bug: Added secondaryBadge prop for badges in the text field. * :bug: Adjusted AdminBadge styles to fix height issue. * :memo: Added with secondaryBadge to docs pages. * :memo: DocGen. * :bug: Added 2px lineHeight for overhanging 'g'. * :bug: Added 2px lineHeight to compensate for overhanging g. * :art: Renamed prop * Issue #493 (#501) * :sparkles: Added `IconMenu`. * :bug: Changed prop onClick to closeMenu. * :memo: Added section to docs for messages with icon menu. * :memo: DocGen. * :fire: Removed redundant method * :art: Renamed method * Compact messages image (#500) * :bug: Fixed compact stickers * :lipstick: Changed style for compact image messages * Added IconMenu to message, fixed compact Message styles, added textBadge to ListItem. * fixed #508 (#509) * Tables (#510) * :sparkles: Added Table components * :sparkles: Changed to Table components * :memo: Added docs page * :hankey: Added missing exports * :art: Changed to es6 functions * Added Table components, added value prop to CheckBox. * :bug: Added check for textBadge (#513) * Removed unknown handleSearch prop and fixed errors, for #517 (#519) * Issue #507 (#516) * :construction: WIP changing context * :construction: Added unsub * :twisted_rightwards_arrows: merged stash * :art: Added themeable component * :art: Added newline * :construction: Added themeable HoC * :art: Changed to es6 methods * :hammer: Changed back to stateless, added color propType, added compose * :memo: WIP theme doc page * :truck: Renamed file * :twisted_rightwards_arrows: Merged stash * :fire: Removed pure to allow hovers to work again * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :hammer: Refactored to new theme management * :fire: Removed theme wrapper * :memo: Added proper example for theme * :memo: Added h2 * :memo: Added default theme button * :truck: Made themeable part of the API * :art: Changed to lodash functions * :memo: Added themeable doc * :memo: Fixed usage * :memo: Changed getting started * :memo: Added docs output * :memo: Removed components I do not need docs for * added curry function for themeable options * :rotating_light: Removed React warning * :art: Changed naming * :memo: Finished themeable hoc doc * :memo: Added deprecation warnings * added option to use anchor-ui without withTheme component * :hammer: Applied theme changes to EmojiMenu * :hammer: Applied theme change to Modal * :art: Removed redundant * :green_heart: Fixed lint error * :hankey: Reverted change * Changed how theme color is managed, added ThemeProvider, added themeable HoC. * :hankey: Added missing export * Added export for ThemeProvider. * Issue #504 (#529) * :bug: Added `contentStyle` prop to iconMenu. * :memo: DocGen. #504 * :bug: Added default for prop. Fixed #504. * :memo: DocGen. #504 * Issue #203 avatar (#525) * Added test for avatar style function, #203 * Added test for each type * Issue #203 admin-badge (#524) * Added test for admin-badge style function * Fixed wrong property on inverted test * :lipstick: Added missing themeable to ChannelAvatar (#527) * Issue #518 (#532) * Made hideAlert prop optional, for #518 * Removed hideAlert from home and with-theme * :lipstick: Added theme color transition (#528) * :lipstick: Added theme color transition * :green_heart: Fixed tests * :hankey: Added default `right: inital` to select's popOver styles. (#531) * :hankey: Added default `right: inital` to select's popOver styles. We should find a better fix for this. Fixes #530. #530 * :bug: Moved popOver styles to const. * deleted line-height to fix the display of the adminbadge on firefox, … (#521) * deleted line-height to fix the display of the adminbadge on firefox, fixed #512 * modified lineheight secondarytext * changed line-height of the textbadge to 22px * reverted changes * :sparkles: Added IconColor (#537) * :sparkles: Added icon refresh (#539) * Various styling fixes, added icons, added themeable to ChannelAvatar, added contentStyle to IconMenu, added transition to all components that use theme colour. * Refactored style function for banner, #203 (#536) * Added test for card-content style function, #203 (#542) * Added test for card-header style function, #203 (#544) * Added test for channel-header style function, #203 (#545) * Added test for card style function, #203 (#540) * Window resize (#543) * :heavy_plus_sign: Added `react-event-listener`. * :sparkles: Added `closeMenu` on window resize. * :memo: DocGen. * :green_heart: Added new line. * Fixed empty objects (#551) * Issue #203 button (#538) * Added test for button style function, #203 * Combine-styles fix * Fixed empty objects * :hankey: Fixed github button * Issue #203 badge (#535) * Added test for badge style function, #203 * Small fix * Fixed empty objects and changed to es6 default argument * :… * Fixed Message theming and override capabilities. * Changed to 0 in favor of null. (#854) * Changed selectedIndex default value to 0 to prevent TypeError if handleSelect was fired before selectedIndex was changed. * Removed safari windows latest from support list. (#858) * Issue #859 (#860) * Added fallaback for avatar. * DocGen. Fixes #859. * Fixed tests. * DocGen * Added what it does to docs line. * Adjusted to path intead. * Added defaultImage to avatar. * Fixed clickable error bug. Fixes #862. (#863) * Added icons (#865) * Fixed clickable error bug. Fixes #862. * Added new icons. * Added arrow icons & fixed MessageInput clickable area. * Reverted changes. * Added arrow icons & fixed MessageInput clickable area. * Decreased Tab and ChannelHeader height. (#870) * Issue #868 (#869) * Prepared messages body.type giphy. * Prepared messages index for giphy. * Added missing ;. * Created type giphy message. Fixes #868. * Added giphy message to docs. * Added sentByText to messages index file. * DocGen. * Added test. * Fixed linting error. * Changed prop name. * Used correct calculations. Fixes #871. (#873) * Used correct calculations. Fixes #871. * Fixed test. * Made a bit DRY'er. * Added giphy message, adjusted get-pop-over-position calculation & decreased Tab height. * Added onHeaderClick to IconMenu and PopOver. (#875) * Added onHeaderClick to IconMenu and PopOver. * Added docgen. * [4.3.12] Added onHeaderClick to IconMenu and PopOver. * Fixed passthrough. (#877) * Removed opacity on giphy description. (#878) * Fixed giphyDescription prop passthrough & giphyDescription styling. * Added object-fit cover to overcome image & giphy stretching. (#880) * Added npm version badge. * Added object-fit to images & giphies, fixes stretching. * Added inputRef to SearchBox. (#884) * Issue #882 (#883) * Created Gallery component. * Added gallery to index exports. * DocGen. * Fixed missing styles. * Added doc page. Fixes #882. * Fixed requests. * DocGen. * Changed naming. * Adjusted some more naming. * DocGen. * Adjusted all image naming to item. * Added test for gallery. * Fixed docs. * Added gallery component, fixed image and gif stretching & added inputRef. * Added custom props to Gallery. (#886) * Added ...custom prop to gallery. * Issue #889 (#892) * Added buttonStyle prop. Fixes #889. * Updated docs. * Adjusted docs description. * [WIP] Component tests (#867) * Slightly adjusted admin-badge test. * WIP Possible new way of folder stucture to improve testing. * Fixed imports for TravisCI. * Revert change to DRY. * Added text prop node passthrough as well. * Adjusted it descriptions. * Adjusted it descriptions. * Issue #895 (#896) * Made title not required. * Removed redundant check. * Added enableLightbox to Gallery, fixes #895. * Added ligthbox to docs. * Changed open. * Added height. * Changed alts, added title. * Use item.alt or item.src als alt. * Fixed test. * Issue #769 (#897) * Added after element, fixes #769. * Fixed style consistency. * Issue #864 (#894) * Removed pure HOC from exports. * Removed shallowEqual. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed test. * Fixed tests. * Fixed test. * Fixed test. * Issue #899 (#900) * Added DateSeparator to exports. Fixes #899. * DocGen. * Added margin 0 to text styling. * Messages patch (#901) * Added sticker message patch. * Added emoji message patch. * Added lightbox option to gallery, removed pure exports, added override styles to iconButton in messages & patched some message bugs. * Date separator (#903) * Changed DateSeparator style. * Removed defaultProp. * Decreased margin. * Issue #552 admin badge (#904) * Made sure admin-badge test actually gets tested propperly. * Fixed component test. * Issue #552 alert (#905) * New structure for correct testing. * Refactored getStyle functions to es6 notation. * Fixed alert getStyle test. * Fixed alerts component test. * Issue #552 app header (#906) * New structure for correct testing. * Fixed AppHeader getStyle test. * Fixed AppHeader component test. * Issue #552 avatar (#907) * Fixed Avatar getStyle test. * New structure for correct testing. * Fixed Avatar component test. * Issue #910 (#911) * Used compact styles from styles file instead. * Fixed typo. * Removed position absolute and flex styling for compact image/ giphy messages. Fixes #910. * Issue #552 banner (#909) * Fixed Banner getStyle test. * New structure for correct testing. * Fixed Banner component test. * Issue #552 badge (#908) * Fixed Badge getStyle test. * New structure for correct testing. * Fixed Badge component test. * Adjusted date sepparator styles, fixed tests & fixed image/giphy message bug. * Adjusted date separator styles, fixed tests and fixed image/giphy message bug. * Made sure myMessage style for stickers is correct. (#913) * Fixed my sticker message style bug. * Media (#915) * Added Media component. * Added docs for Media. * Changed prop to object of queries. * Updated docs. * Issue #898 (#917) * Replaced \n with
. Fixes #898. * Added multiline to docs. * Added select for enableMultiline. * Added Media component & added multiline capabilities to Message component. * Issue #916 (#919) * Added active color to MenuItem icon. Fixes #916. * Added active with icon to docs. * DocGen. * Added top: ...px to header buttons. Fixes #891. (#921) * Issue #922 (#923) * Added footer to Menu component. Fixes #922. * DocGen. * Fixed tests. * Issue #926 (#928) * Fixed label styles, moved style prop to correct element. * Added override style for buttons container. * Added tests. * Made label prop optional. * Added icon prop, fixes #926. * Fixed test. * Fixed label padding. * Added docgen. * Added examples. * Changed rm to rimraf, fixes #925. (#927) * Added optional icon to RadioButton, made label optional. * Updated react-onclickoutside. (#931) * Fixed bug in unmounting of media listeners. (#935) * Update dev dependencies (#933) * Updated react-docgen. * Docgen. * Updated prettier. * Updated nyc. * Updated babel-cli. * Updated babel-eslint. * Sjaak/docs code examples (#936) * Installed marked and prismjs. * Added markdown component. * Added styles. * Added detailed code example. * Added Markdown component to AdminBadge. * Refactored to new Markdown component. * Changed colors. * Added languages. * Refactored to new Markdown. * Refactored to Markdown component. * Added title to Markdown. * Removed fonts. * Added title. * Uninstalled react-markdown. * Indented file. * Removed prefixes. * Sjaakluthart/docs styles (#938) * Removed unused className. * Removed redundant styles. * Added meyer reset. * Started with refactor. * Moved files. * Changed classname. * Renamed classNames. * Changed selector. * Added margin. * Fixed paper styles. * Changed heading styles. * Changed selector. * Changed markup. * Added margin. * Changed markup. * Changed to anchor-ui Table. * Increased margin. * Removed overflow. * Reverted changes. * Added responsive menu, fixes #180. * Sjaakluthart/code examples (#939) * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Added example. * Simplified handler. * Changed markup. * Changed syntax. * Added example. * Removed log. * Added example. * Issue #937 (#940) * Added header check to contentContainer. * Added test for `getStyles.contentContainer()`. Fixes #937. * Added code example for menu. * Fixed example. * Issue #552 button (#942) * Fixed button getStyle test. * New structure for correct testing. * Fixed index test. * Issue #941 (#943) * Replaced react-measure for own Media component. Fixes #941. * Removed react-measure from dependencies. * DocGen. * Sjaakluthart/code examples (#944) * Added code example. * Added code example. * Added code example. * Added code example. * Moved menu markdown to the correct spot. * Updated react-onclickoutside, updated dev dependecies, fixed unmounting in media component, added new code examples and fixed menu scroll bug. * DocGen. * Added a check for numbers followed by "." to overcome Catastrophic Backtracking regexp. (#946) * Issue #552 card (#952) * New structure for correct testing. * Fixed index test. * Added backgroundColor and color. (#953) * Issue #552 card content (#958) * New structure for correct testing. * Fixed index test. * Adjusted naming. * Imported component instead of radium export. * Issue #552 checkbox (#962) * Fixed getStyles test. * New structure for correct testing. * Issue #552 card header (#960) * New structure for correct testing. * Fixed index test. * Issue #552 channel header (#959) * New structure for correct testing. * Fixed getStyle test. * Added missing new line. * Fixed index test. * Fixed naming * Added node test. * Bumped messageInput multiline check to `> 49`. Fixes firefox/Edge15 iconButton push down. (#954) * Issue #552 checkbox (#965) * Fixed getStyles test. * New structure for correct testing. * Fixed index test. * Issue #552 commands (#966) * Added getStyle test for Commands. * New structure for correct testing. * WIP Index Test for commands. * Added index test for commands. * Issue #552 date separator (#972) * Added getStyles test for DateSeparator. * New structure for correct testing. * Added index test for DateSeparator. * Fixed typo. * Issue #552 dialog (#974) * Fixed getStyles test for Dialog. * New structure for correct testing. * Fixed index test for Dialog. * Sjaakluthart/image (#973) * Added image preloader * Image is global * Added basic docs page, needs more styling * Remove logging * In componentWillReceiveProps do not check for existing, only compare with previous * Consistent naming, errorComponent and preloadComponent * Added code example * Wrap example text in p * Fixed example. * Improved docs. * Remamed component. * Renamed files. * Renamed docs. * More renaming. * Renamed prop. * Removed Status constant. * Added component description. * Fixed prop description. * Docgen. * Fixed route. * Fixed docs page styling. * Sorted imports. * Fixed badge uncovered lines. (#975) * Fixed badge uncovered lines. * Fixed broken test. * Issue #552 divider (#976) * Refactored to es6 functions. * New structure for correct testing. * Fixed index test for Divider. * DocGen. * Issue #552 emoji filter (#978) * Added getStyles test for EmojiFilter. * Fixed getStyles test for EmojiFilter. * New structure for correct testing. * Added index test for EmojiFilter. * DocGen. * Issue #981 (#982) * Removed marginLeft from all message root styles. * Removed marginRight from all message root styles. Fixes #981. * Issue #977 (#980) * Added after succes to travis for CodeCoverage. * Reverted codecov package change. * Added coveralls package and npm script for travis. Should fix #977. * Small adjustments. * Should fix it. * Added coverage badge to readme. * Small naming changes. * Adjusted mocha opts. * Use codecov instead * Added codecov.yml. * Changed badge to codecov badge. * Sjaakluthart/image loader message (#979) * Added ImageLoader to image and giphy messages. * Added imagePlaceholder, imageError and onImageLoad. * Added onImageError. * Updated some test files, added ImageLoader and fixed Message no-Avatar bug. * Fixed typo, fixes #986. * Changed homepage. * Changed script. * Changed to buildbranch. * Sjaakluthart/eslint (#989) * Updated eslint config. * Fixed linter error. * Fixed linter error. * Disabled rule. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed code styling. * Fixed code styling. * Fixed code styling. * Disabled rule. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting errors. * Fixed linting error. * added () to fix unexpected newlines before/after )/( * removed unused default props * rewritten component to be a pure functionm * added rule to disable nesting htmlFor * fixed slider * fixed indenting * removed comment disable-line * removed max-len rule * removed comment, moved to oneline * removed multiple (( )) on calledWith * fixed tests * added comment * altered comment * fixed errors caused by cleaning up the linting errors (#991) * V5.0.0 (#993) * Issue #848 (#888) * Removed redundant typing message. * Removed redundant import. * Moved iconMenu into message body. * WIP added style to iconMenu for clean messages. * Moved sticker header on top of sticker body. * Added styles for sticker IconMenu. * Moved time on top of images and giphies. * Added styles for compact with new IconMenu placement. * Fixed collapsed styles. Fixes #848. * Fixed tests. * Added test for sticker messages. * Added styles for iconMenu in MessageHeader. * Bumped maxWidth of container to 80%. * Added readability maxWidth to TextMessage. * Issue #806 (#893) * Added menuIcon to Message. * Removed unused styles. * Replaced custom menus with iconMenu prop. * Added styles for iconMenu. * Applied API changes. * Fixed collapsedText. * Adjusted styles to look more like design. * Fixed sticker message styling. * Fixed tests. * Fixed sticker stretching. * Added font scaling for messageTime. * Removed redundant width styling from messageTime. * Fixed tests. * Issue #930 (#934) * Bumped react react-dom and html-react-parser version. * Bumped react and react-dom version. * Fixed all the tests. Fixes #930. * Created default style file to make message styles more dry. Fixes #494. (#949) * Replace dangerouslySetInnerHTML with html-react-parser. Fixes #761. (#951) * Replace dangerouslySetInnerHTML with html-react-parser. Fixes #761. * Removed createMarkup function. * Implemented 8dp grid to AppHeader. (#956) * Issue #751 alert (#955) * Implemented 8dp grid to Alert. * Cleaned-up Alert getStyle. * Reversed test. * Refactored message-list, made ref work again (#961) * Refactored message-list * renamed * Eslint fixes * Replaced emojione.imagePathPNG for emojione.emojiSize. Fixes #725. (#964) * Issue #783 (#948) * Bumped react react-dom and html-react-parser version. * Bumped react and react-dom version. * Fixed all the tests. Fixes #930. * Added react-portal to portal pop-over element to bottom of root. * Added own portal component. * Deconstructed props. * Added doc page about portal component. Fixes #783. * Added example for portal component. * Added description for docs page. * Added description for docs page. * Added alert about react v16. * Made passthrough for portal node prop instead. * Fixed Selects positioning. * Fixed pop-over-position test. * DocGen. * Adjusted in favor of comments. * Fixed broken check. * Changed example. * Changed text. * Cleanup. * Docgen. * Issue #872 (#950) * Added variable middle alignment for when it gets cut of. * Fixed horizontal middle so it actually alligns in the middle. * Added variable middle alignment for when it gets cut off horizontal. * Added 16 margin around the variable placements. * Fixed broken tests. * Added test for offset positioning. Fixes #872. * Removed logging. * Adjusted naming. * Implemented 8dp grid to Banner. (#968) * Implemented 8dp grid to Button. (#969) * Implemented 8dp grid to Card. (#970) * Issue #751 admin badge (#990) * Implemented 8dp grid to AdminBadge. * Fixed linting error. * Fixed broken test. * Implemented 8dp grid to AdminBadge. (#992) * Updated to React v16, added portal for PopOver, updated to emojione v3, refactored and restyled Message, replaced dangerouslySetInnerHTML with html-react-parser and adjusted some styling to 8dp grid. * Removed duplicate statements. * Added migration guide for v4.x to v5. --- .eslintrc | 13 +- .nycrc | 1 - MIGRATION.md | 50 ++ docs/components.json | 114 ++--- docs/package.json | 6 +- docs/src/components/alert/index.jsx | 4 +- docs/src/components/app.jsx | 12 +- docs/src/components/channel-header/example.js | 4 +- docs/src/components/commands/mentions.jsx | 2 +- .../components/commands/slash-commands.jsx | 2 +- docs/src/components/emoji-filter.jsx | 2 +- docs/src/components/input.jsx | 2 - docs/src/components/list.jsx | 8 +- docs/src/components/message.jsx | 116 +++-- docs/src/components/nav.jsx | 1 + docs/src/components/portal/example.js | 37 ++ docs/src/components/portal/index.jsx | 79 +++ docs/src/components/profile.jsx | 3 +- docs/src/css/index.css | 7 +- docs/src/index.js | 2 + mocha-setup.js | 4 + mocha.opts | 1 + package.json | 24 +- src/admin-badge/styles.js | 4 +- src/alert/component.jsx | 58 ++- src/alert/get-styles.js | 10 +- src/alert/styles.js | 13 +- src/app-header/component.jsx | 72 +-- src/app-header/styles.js | 6 +- src/avatar/component.jsx | 26 +- src/badge/component.jsx | 4 +- src/badge/styles.js | 4 +- src/banner/component.jsx | 60 ++- src/banner/styles.js | 2 +- src/button/component.jsx | 38 +- src/button/styles.js | 2 +- src/card-content/component.jsx | 24 +- src/card/component.jsx | 24 +- src/card/styles.js | 2 +- src/commands/component.jsx | 16 +- src/date-separator/component.jsx | 4 +- src/emoji-filter/component.jsx | 10 +- src/emoji-menu/create-markup.js | 9 - src/emoji-menu/emoji-categories.jsx | 39 +- src/emoji-menu/emoji-category.jsx | 45 +- src/emoji-menu/emoji-modifiers.jsx | 47 +- src/emoji-menu/index.jsx | 2 +- src/gallery/index.jsx | 82 +-- src/icon-menu/index.jsx | 109 ++-- src/index.js | 3 +- src/input/index.jsx | 2 +- src/internal/get-percentage.js | 6 +- src/internal/get-pop-over-position.js | 26 +- src/list-item/get-styles.js | 7 +- src/list-item/index.jsx | 198 ++++---- src/list/index.jsx | 53 +- src/loader/index.jsx | 30 +- src/menu-item/get-styles.js | 7 +- src/menu/index.jsx | 100 ++-- src/message-input/index.jsx | 8 +- src/message-list/index.jsx | 117 ++--- .../styles.js => default-styles.js} | 18 +- src/message/giphy-message/get-styles.js | 42 +- src/message/giphy-message/index.jsx | 132 ++--- src/message/giphy-message/styles.js | 31 +- src/message/image-message/get-styles.js | 42 +- src/message/image-message/index.jsx | 131 ++--- src/message/image-message/styles.js | 32 +- src/message/index.jsx | 465 +++++++----------- src/message/message-header/get-styles.js | 6 +- src/message/message-header/index.jsx | 43 +- src/message/message-time/get-styles.js | 20 +- src/message/message-time/index.jsx | 39 +- src/message/message-time/styles.js | 20 +- src/message/sticker-message/get-styles.js | 18 +- src/message/sticker-message/index.jsx | 90 ++-- src/message/sticker-message/styles.js | 31 +- src/message/text-message/get-styles.js | 12 +- src/message/text-message/index.jsx | 27 +- src/message/text-message/styles.js | 42 +- src/message/typing-message/get-styles.js | 51 -- src/message/typing-message/index.jsx | 75 --- src/pagination/index.jsx | 7 +- src/paper/index.jsx | 7 +- src/pop-over/index.jsx | 31 +- src/portal/index.jsx | 56 +++ src/profile-card/index.jsx | 9 +- src/profile/index.jsx | 6 +- src/radio-button-group/index.jsx | 3 +- src/select/index.jsx | 3 +- src/slider/index.jsx | 3 +- src/tab/index.jsx | 32 +- src/table-header/index.jsx | 7 +- src/tabs/index.jsx | 16 +- test/admin-badge/index.test.js | 6 +- test/alert/get-styles.test.js | 8 +- test/alert/index.test.js | 5 +- test/app-header/index.test.js | 5 +- test/avatar/index.test.js | 7 +- test/badge/index.test.js | 4 +- test/banner/index.test.js | 4 +- test/button/index.test.js | 7 +- test/empty-state/index.test.js | 3 +- test/input/index.test.js | 6 +- test/internal/get-pop-over-position.test.js | 182 +++++-- test/menu-item/index.test.js | 12 +- test/menu/index.test.js | 4 +- test/message/giphy-message-get-styles.test.js | 43 +- test/message/image-message-get-styles.test.js | 43 +- .../message/message-header-get-styles.test.js | 10 +- test/message/message-time-get-styles.test.js | 38 +- .../sticker-message-get-styles.test.js | 97 ++++ test/message/text-message.get-styles.test.js | 62 ++- test/slider/index.test.js | 9 +- test/switch/index.test.js | 8 +- test/tab/index.test.js | 12 +- 116 files changed, 2234 insertions(+), 1651 deletions(-) create mode 100644 MIGRATION.md create mode 100644 docs/src/components/portal/example.js create mode 100644 docs/src/components/portal/index.jsx create mode 100644 mocha-setup.js delete mode 100644 src/emoji-menu/create-markup.js rename src/message/{typing-message/styles.js => default-styles.js} (73%) delete mode 100644 src/message/typing-message/get-styles.js delete mode 100644 src/message/typing-message/index.jsx create mode 100644 src/portal/index.jsx create mode 100644 test/message/sticker-message-get-styles.test.js diff --git a/.eslintrc b/.eslintrc index cd66c7b8..0186a13c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,11 +5,20 @@ "comma-dangle": 0, "jsx-a11y/no-static-element-interactions": 0, "jsx-a11y/no-noninteractive-element-interactions": 0, - "react/no-danger": 0 + "jsx-a11y/click-events-have-key-events": 0, + "jsx-a11y/mouse-events-have-key-events": 0, + "react/no-danger": 0, + "jsx-a11y/label-has-for": [ 2, + { "components": [ "Label" ], + "required": + { "every": [ "id" ] }, + "allowChildren": false } + ] }, "globals": { "Image": true, - "window": true + "window": true, + "document": true }, "plugins": [ "mocha" diff --git a/.nycrc b/.nycrc index a25d539b..a10a6aa1 100644 --- a/.nycrc +++ b/.nycrc @@ -1,4 +1,3 @@ - { "reporter": [ "text" diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 00000000..cc53d96d --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,50 @@ +# Migrating from anchor-ui v4.x to v5 +In this version we updated to React v16, added Portal for PopOver, updated to emojione v3, refactored and restyled Message, replaced dangerouslySetInnerHTML with html-react-parser and adjusted some styling to 8dp grid. + +## React v16 +React v16 is needed to use Portal to it's fullest. Without this version of React the Component just renders the children within it's parent. +```bash +$ npm i -S react@16.0.0 react-dom@16.0.0 +``` + +## PopOver +This component now uses the React v16 createPortal function. To make sure this works React v16 is needed. Read the above paragraph to see how. + +## IconMenu for Message +If you are using an IconMenu on your Message Component you will have to pass a full IconMenu component instead of an array of MenuItems. +```jsx +/* v5 uses iconMenu prop */ + + + ... + + } + ... +/> + +/* v4.x */ +, + ... + ]} + ... +/> +``` + +## Styling +Some styling might be slightly adjusted. Below a list of Components that are affected. If you passed override styles to one of these Components u might want to check and see if they're still the same. + +- AdminBadge +- Alert +- AppHeader +- Badge +- Banner +- Button +- Card +- Message + +## Removed Message type typing +This version of the method component is no longer supported within our API. Remove all references to this type of Message. diff --git a/docs/components.json b/docs/components.json index 0175f5a0..b2a3ec08 100644 --- a/docs/components.json +++ b/docs/components.json @@ -4856,22 +4856,7 @@ "components/message/index.jsx": { "description": "Messages with optional styling for the current user's message,\ndifferent font sizes and message styles", "displayName": "Message", - "methods": [ - { - "name": "renderIconMenu", - "docblock": null, - "modifiers": [], - "params": [], - "returns": null - }, - { - "name": "renderImageIconMenu", - "docblock": null, - "modifiers": [], - "params": [], - "returns": null - } - ], + "methods": [], "props": { "avatar": { "type": { @@ -4927,10 +4912,6 @@ "value": "'sticker'", "computed": false }, - { - "value": "'typing'", - "computed": false - }, { "value": "'giphy'", "computed": false @@ -5072,17 +5053,6 @@ "computed": false } }, - "menuItems": { - "type": { - "name": "node" - }, - "required": false, - "description": "Enables PopOver with MenuItems", - "defaultValue": { - "value": "null", - "computed": false - } - }, "enableLightbox": { "type": { "name": "bool" @@ -5112,7 +5082,7 @@ "required": false, "description": "Text to display for collapsed messages", "defaultValue": { - "value": "'This image has been collapsed, click the button to expand it.'", + "value": "'This image has been collapsed.'", "computed": false } }, @@ -5127,50 +5097,6 @@ "computed": false } }, - "expand": { - "type": { - "name": "func" - }, - "required": false, - "description": "Callback fired when 'expand' MenuItem is clicked\n\nfunction(event: object) => void", - "defaultValue": { - "value": "null", - "computed": false - } - }, - "expandText": { - "type": { - "name": "node" - }, - "required": false, - "description": "Text to show in expand menu item", - "defaultValue": { - "value": "'Expand image'", - "computed": false - } - }, - "expandIcon": { - "type": { - "name": "node" - }, - "required": false, - "description": "Icon to show in expand menu item", - "defaultValue": { - "value": "null", - "computed": false - } - }, - "expandMenuItem": { - "type": { - "name": "node" - }, - "required": false, - "description": "Custom menu item. Should be a MenuItem component.\n Make sure this component handles image expanding.\n If this is passed none of the other expand props will be used.", - "defaultValue": { - "value": "null", - "computed": false - } - }, "edited": { "type": { "name": "node" @@ -5242,15 +5168,15 @@ "computed": false } }, - "iconColor": { + "iconMenu": { "type": { - "name": "string" + "name": "node" }, "required": false, - "description": "Color for the IconMenu's icon", + "description": "Render an IconMenu in Message", "defaultValue": { - "value": "colors.icons", - "computed": true + "value": "null", + "computed": false } }, "enableMultiline": { @@ -6092,6 +6018,32 @@ } } }, + "components/portal/index.jsx": { + "description": "Transportation of elements", + "displayName": "Portal", + "methods": [], + "props": { + "children": { + "type": { + "name": "node" + }, + "required": true, + "description": "Content to be portaled" + }, + "node": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Optional node to portal children to", + "defaultValue": { + "value": "null", + "computed": false + } + } + } + }, "components/profile/index.jsx": { "description": "Profile useful for showing a user's info", "displayName": "Profile", diff --git a/docs/package.json b/docs/package.json index 09d53957..0e6e8e42 100644 --- a/docs/package.json +++ b/docs/package.json @@ -8,6 +8,7 @@ "babel-jest": "17.0.2", "babel-loader": "6.2.7", "babel-preset-react-app": "^2.0.1", + "buildbranch": "^2.0.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", @@ -19,7 +20,6 @@ "file-loader": "0.9.0", "filesize": "3.3.0", "fs-extra": "0.30.0", - "gh-pages": "^0.12.0", "gzip-size": "3.0.0", "html-webpack-plugin": "2.24.0", "http-proxy-middleware": "0.17.2", @@ -51,8 +51,8 @@ "prismjs": "^1.8.3", "prop-types": "^15.5.6", "radium": "^0.19.1", - "react": "^15.5.3", - "react-dom": "^15.5.3", + "react": "^16.0.0", + "react-dom": "^16.0.0", "react-jss": "^5.3.0", "react-router": "^3.0.2", "uuid": "^3.0.1" diff --git a/docs/src/components/alert/index.jsx b/docs/src/components/alert/index.jsx index a5c3c119..76de196f 100644 --- a/docs/src/components/alert/index.jsx +++ b/docs/src/components/alert/index.jsx @@ -15,9 +15,9 @@ const AlertDoc = () => { flexWrap: 'wrap', alignItems: 'center', margin: 0, - padding: '20px' + padding: '24px' }, - alert: { margin: '10px' } + alert: { margin: '8px' } }; return ( diff --git a/docs/src/components/app.jsx b/docs/src/components/app.jsx index 737562a8..98f35704 100644 --- a/docs/src/components/app.jsx +++ b/docs/src/components/app.jsx @@ -41,14 +41,10 @@ class App extends Component { const { children } = this.props; const { media, menu } = this.state; - const childrenWithProps = React.Children.map( - children, child => React.cloneElement( - child, - { - setColor: this.setColor - } - ) - ); + const childrenWithProps = React.Children.map(children, child => React.cloneElement( + child, + { setColor: this.setColor } + )); const query = { medium: '(min-width: 768px)' diff --git a/docs/src/components/channel-header/example.js b/docs/src/components/channel-header/example.js index 983c2403..babe7e46 100644 --- a/docs/src/components/channel-header/example.js +++ b/docs/src/components/channel-header/example.js @@ -3,8 +3,8 @@ export default ` import React from 'react'; import ChannelHeader from 'anchor-ui/channel-header'; import Button from 'anchor-ui/button'; - import IconChannels from 'anchor-ui/cons/icon-channels'; - import IconPeople from 'anchor-ui/cons/icon-people'; + import IconChannels from 'anchor-ui/icons/icon-channels'; + import IconPeople from 'anchor-ui/icons/icon-people'; const ChannelHeaderExample = () => { { - const value = event.currentTarget.value; + const { value } = event.currentTarget; let valueToMatch = ''; diff --git a/docs/src/components/commands/slash-commands.jsx b/docs/src/components/commands/slash-commands.jsx index 8e0bb96c..d958b01c 100644 --- a/docs/src/components/commands/slash-commands.jsx +++ b/docs/src/components/commands/slash-commands.jsx @@ -16,7 +16,7 @@ class SlashCommands extends Component { } changeValue = (event) => { - const value = event.currentTarget.value; + const { value } = event.currentTarget; let valueToMatch = ''; diff --git a/docs/src/components/emoji-filter.jsx b/docs/src/components/emoji-filter.jsx index 072dfd0c..6a22f75e 100644 --- a/docs/src/components/emoji-filter.jsx +++ b/docs/src/components/emoji-filter.jsx @@ -26,7 +26,7 @@ class EmojiFilterDoc extends Component { } changeValue = (event) => { - const value = event.currentTarget.value; + const { value } = event.currentTarget; let valueToMatch = ''; diff --git a/docs/src/components/input.jsx b/docs/src/components/input.jsx index 3fa1d2c3..392fd9a4 100644 --- a/docs/src/components/input.jsx +++ b/docs/src/components/input.jsx @@ -20,8 +20,6 @@ class InputDoc extends Component { value: 'Default value', valueMultiline: '', valueText: '', - valueNumber: '', - valueDate: '', valueMaxLength: '', valueError: 'Value' }; diff --git a/docs/src/components/list.jsx b/docs/src/components/list.jsx index 1d35345b..28a7ffa5 100644 --- a/docs/src/components/list.jsx +++ b/docs/src/components/list.jsx @@ -72,9 +72,11 @@ const ListDoc = () => { active={currentChannel === channel.name} rightButton={ currentChannel === channel.name - ? + ? ( + + ) : null } avatar={channel.avatar} diff --git a/docs/src/components/message.jsx b/docs/src/components/message.jsx index ce24dbc1..f271c1e1 100644 --- a/docs/src/components/message.jsx +++ b/docs/src/components/message.jsx @@ -9,6 +9,9 @@ import components from '../../components.json'; import background from '../assets/images/channel-background.jpg'; import Paper from '../../../dist/paper'; import Select from '../../../dist/select'; +import colors from '../../../dist/settings/colors'; +import IconMenu from '../../../dist/icon-menu'; +import IconChevronDown from '../../../dist/icons/icon-chevron-down'; import Markdown from './markdown'; const usage = ` @@ -101,15 +104,7 @@ const messages = [ avatar: 'https://avatars0.githubusercontent.com/u/14125280?v=3&s=400', id: 8, type: 'giphy' - }, - { - body: 'is typing', - createdAt: new Date(), - username: 'Ian', - avatar: 'https://avatars0.githubusercontent.com/u/14125280?v=3&s=400', - id: 9, - type: 'typing' - }, + } ]; const currentUser = 'Sjaak'; @@ -144,7 +139,9 @@ class MessageDoc extends Component { selectAvatar = (event, avatar) => this.setState({ avatar }); render() { - const { collapsed, fontSize, compact, iconMenu, edited, multiline, avatar } = this.state; + const { + collapsed, fontSize, compact, iconMenu, edited, multiline, avatar + } = this.state; const componentData = _.find(components, component => component.displayName === 'Message'); const style = { paper: { @@ -166,11 +163,6 @@ class MessageDoc extends Component { } }; - const menuItems = [ - {}} />, - {}} /> - ]; - return (

Message

@@ -229,41 +221,67 @@ class MessageDoc extends Component { - {messages.map(message => ( - this.selectCollapse(false)} - fontSize={fontSize} - compact={compact} - menuItems={iconMenu ? menuItems : null} - edited={edited ? 'edited' : null} - highlights={[ - { - prefix: '@', - value: 'Lars', - id: '1' - }, - { - prefix: '@', - value: 'Ian', - id: '2' + {messages.map((message) => { + const menuItems = [ + {}} />, + {}} /> + ]; + + const expandMenuItem = this.selectCollapse(false)} />; + + if ((message.type === 'image' || message.type === 'giphy') && collapsed) { + menuItems.push(expandMenuItem); + } + + let uiIconMenu = null; + + const myMessage = message.username === currentUser; + + if (iconMenu) { + uiIconMenu = ( + } + > + {menuItems} + + ); + } + + return ( + alert(`mention ${username}`)} // eslint-disable-line no-alert - enableLinks - enableMultiline={multiline} - /> - ))} + fontSize={fontSize} + compact={compact} + edited={edited ? 'edited' : null} + highlights={[ + { + prefix: '@', + value: 'Lars', + id: '1' + }, + { + prefix: '@', + value: 'Ian', + id: '2' + } + ]} + onHighlightClick={(e, username) => alert(`mention ${username}`)} // eslint-disable-line no-alert + enableLinks + iconMenu={uiIconMenu} + enableMultiline={multiline} + /> + ); + })} diff --git a/docs/src/components/nav.jsx b/docs/src/components/nav.jsx index b62e5968..16f46bc5 100644 --- a/docs/src/components/nav.jsx +++ b/docs/src/components/nav.jsx @@ -71,6 +71,7 @@ const Nav = ({ media, toggleMenu, open }, context) => { router.push('/paper')} active={router.isActive('/paper')} text="Paper" /> router.push('/image-loader')} active={router.isActive('/image-loader')} text="ImageLoader" /> router.push('/pop-over')} active={router.isActive('/pop-over')} text="PopOver" /> + router.push('/portal')} active={router.isActive('/portal')} text="Portal" /> router.push('/profile')} active={router.isActive('/profile')} text="Profile" /> router.push('/profile-card')} active={router.isActive('/profile-card')} text="ProfileCard" /> router.push('/radio-button')} active={router.isActive('/radio-button')} text="RadioButton" /> diff --git a/docs/src/components/portal/example.js b/docs/src/components/portal/example.js new file mode 100644 index 00000000..4028dfdd --- /dev/null +++ b/docs/src/components/portal/example.js @@ -0,0 +1,37 @@ +export default ` + \`\`\`jsx + import React, { Component } from 'react'; + import Portal from 'anchor-ui/portal'; + + class MyComponent extends Component { + state = { + portalOpen: false + } + + togglePortal = () => { + const { portalOpen } = this.state; + + this.setState({ + portalOpen: !portalOpen + }); + } + + render() { + const { portalOpen } = this.state; + + return ( +
+ + { + portalOpen + ? +
I got portaled to the bottom of this section!
+ + :null + } +
+ ); + } + } + \`\`\` +`; diff --git a/docs/src/components/portal/index.jsx b/docs/src/components/portal/index.jsx new file mode 100644 index 00000000..23dae3d3 --- /dev/null +++ b/docs/src/components/portal/index.jsx @@ -0,0 +1,79 @@ +import React from 'react'; +import _ from 'lodash'; +import IconRocket from '../../../../dist/icons/icon-rocket'; +import Button from '../../../../dist/button'; +import Portal from '../../../../dist/portal'; +import Alert from '../../../../dist/alert'; +import Props from '../props'; +import components from '../../../components.json'; +import Paper from '../../../../dist/paper'; +import example from './example'; +import Markdown from '../markdown'; + +class PortalDoc extends React.Component { + constructor() { + super(); + + this.state = { + portal: false + }; + } + + togglePortal = () => { + const { portal } = this.state; + + this.setState({ + portal: !portal + }); + } + + render() { + const { portal } = this.state; + const componentData = _.find(components, component => component.displayName === 'Portal'); + const style = { + paper: { + margin: 0, + padding: '20px' + }, + button: { margin: '10px' }, + alert: { maxWidth: '100%' } + }; + + return ( +
+

Portal

+ +
+

Description

+

{componentData.description}

+
+
+

Examples

+ + +

{portal ? 'Remove the Portal' : 'Add a Portal'}

+ + { + portal + ? ( + +
I got portaled to the bottom of this section!
+ + ) + : null + } + +
+ +
+ ); + } +} + +export default PortalDoc; diff --git a/docs/src/components/profile.jsx b/docs/src/components/profile.jsx index 7cd78f99..06ea7c3f 100644 --- a/docs/src/components/profile.jsx +++ b/docs/src/components/profile.jsx @@ -25,7 +25,8 @@ const ProfileDoc = () => { }, profile: { width: '100%', - margin: '10px' } + margin: '10px' + } }; return ( diff --git a/docs/src/css/index.css b/docs/src/css/index.css index 475d3bc2..115188a7 100644 --- a/docs/src/css/index.css +++ b/docs/src/css/index.css @@ -10,6 +10,8 @@ body { padding: 0; height: inherit; color: #212121; + font-weight: 100; + font-family: 'Lato', sans-serif; } #root, @@ -18,11 +20,6 @@ main { height: inherit; } -main { - font-weight: 100; - font-family: 'Lato', sans-serif; -} - .small .emojione { font-size: 22px; } diff --git a/docs/src/index.js b/docs/src/index.js index 9df70c46..cfd6d17f 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -52,6 +52,7 @@ import DateSeparator from './components/date-separator'; import EmojiFilter from './components/emoji-filter'; import Gallery from './components/gallery'; import Media from './components/media'; +import Portal from './components/portal'; import './css/meyer-reset.css'; import './css/index.css'; import './css/prism.css'; @@ -106,6 +107,7 @@ ReactDOM.render( + diff --git a/mocha-setup.js b/mocha-setup.js new file mode 100644 index 00000000..c855e1cb --- /dev/null +++ b/mocha-setup.js @@ -0,0 +1,4 @@ +const Adapter = require('enzyme-adapter-react-16'); +const enzyme = require('enzyme'); + +enzyme.configure({ adapter: new Adapter() }); diff --git a/mocha.opts b/mocha.opts index cb6872d2..67632338 100644 --- a/mocha.opts +++ b/mocha.opts @@ -1,2 +1,3 @@ +--require ./mocha-setup --require babel-register --recursive diff --git a/package.json b/package.json index 1c5cd38e..2194c790 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "anchor-ui", - "version": "4.6.0", + "version": "5.0.0", "description": "React Component UI Kit", "main": "dist/index.js", "files": [ @@ -8,7 +8,7 @@ ], "scripts": { "test": "NODE_ENV=test nyc mocha --opts ./mocha.opts test/*", - "test:watch": "NODE_ENV=test mocha --watch -opts ./mocha.opts test/*", + "test:watch": "NODE_ENV=test mocha --opts ./mocha.opts --watch test/*", "watch": "babel -d dist/ -w src/", "compile": "rimraf dist && babel -d dist/ src/", "lint": "eslint '{src,docs/src,test}/**/**/*.{js,jsx}'", @@ -45,20 +45,19 @@ "babel-preset-stage-0": "^6.16.0", "chai": "^3.5.0", "codecov": "^3.0.0", - "enzyme": "^2.7.0", - "eslint": "^3.19.0", - "eslint-config-airbnb": "^15.0.1", - "eslint-plugin-import": "^2.6.1", - "eslint-plugin-jsx-a11y": "^5.1.0", + "enzyme": "^3.1.0", + "enzyme-adapter-react-16": "^1.0.3", + "eslint": "^4.11.0", + "eslint-config-airbnb": "^16.0.0", + "eslint-plugin-import": "^2.8.0", + "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-mocha": "^4.8.0", - "eslint-plugin-react": "^7.1.0", + "eslint-plugin-react": "^7.5.1", "mocha": "^3.2.0", "nyc": "^11.3.0", "prettier": "^1.7.4", - "react": "^15.4.2", - "react-addons-test-utils": "^15.4.2", + "react": "^16.0.0", "react-docgen": "^2.19.0", - "react-dom": "^15.4.2", "react-test-renderer": "^15.5.4", "rimraf": "^2.6.2", "sinon": "^1.17.7", @@ -83,10 +82,11 @@ "date-fns": "^1.27.2", "emojione": "^3.0.3", "escape-html": "^1.0.3", - "html-react-parser": "^0.3.4", + "html-react-parser": "^0.4.0", "lodash": "^4.17.4", "mobile-detect": "^1.3.6", "radium": "^0.19.0", + "react-dom": "^16.0.0", "react-event-listener": "^0.4.5", "react-onclickoutside": "^6.6.3", "recompose": "^0.22.0", diff --git a/src/admin-badge/styles.js b/src/admin-badge/styles.js index c06098af..55639179 100644 --- a/src/admin-badge/styles.js +++ b/src/admin-badge/styles.js @@ -6,9 +6,9 @@ const styleSheet = { color: colors.white, fontSize: '10px', lineHeight: '10px', - padding: '2px', + padding: '2px 4px', textAlign: 'center', - borderRadius: '3px', + borderRadius: '4px', fontWeight: 'inherit', border: `1px solid ${colors.theme}`, transition: 'background .3s ease-in-out' diff --git a/src/alert/component.jsx b/src/alert/component.jsx index 927f5821..b3d12522 100644 --- a/src/alert/component.jsx +++ b/src/alert/component.jsx @@ -10,31 +10,9 @@ import Button from '../button'; import colors from '../settings/colors'; import darken from '../internal/darken'; -const icons = { - success: , - error: , - warning: , - info: -}; - -/** Four types of (system) messages for alerting your user */ -const Alert = ({ text, hideAlert, type, style, iconStyle, textStyle, buttonStyle, ...custom }) => ( -
-
{icons[type]}
-

{text}

- { - hideAlert - ? - : null - } -
-); +const displayName = 'Alert'; -Alert.displayName = 'Alert'; - -Alert.propTypes = { +const propTypes = { /** Text to display */ text: PropTypes.node.isRequired, /** Type of alert. One of the following: ["info", "success", "warning", "error"] */ @@ -55,7 +33,7 @@ Alert.propTypes = { hideAlert: PropTypes.func }; -Alert.defaultProps = { +const defaultProps = { style: {}, iconStyle: {}, textStyle: {}, @@ -63,4 +41,34 @@ Alert.defaultProps = { hideAlert: null }; +const icons = { + success: , + error: , + warning: , + info: +}; + +/** Four types of (system) messages for alerting your user */ +const Alert = ({ + text, hideAlert, type, style, iconStyle, textStyle, buttonStyle, ...custom +}) => ( +
+
{icons[type]}
+

{text}

+ { + hideAlert + ? ( + + ) + : null + } +
+); + +Alert.displayName = displayName; +Alert.propTypes = propTypes; +Alert.defaultProps = defaultProps; + export default Alert; diff --git a/src/alert/get-styles.js b/src/alert/get-styles.js index 8f0573d8..b5ea1e5c 100644 --- a/src/alert/get-styles.js +++ b/src/alert/get-styles.js @@ -7,7 +7,15 @@ const root = (type, overrideStyle) => ( const icon = overrideStyle => combineStyles(styles.icon, overrideStyle); -const text = overrideStyle => combineStyles(styles.text, overrideStyle); +const text = (hideAlert = null, overrideStyle) => { + let style = styles.text; + + if (hideAlert) { + style = combineStyles(style, { paddingRight: '40px' }); + } + + return combineStyles(style, overrideStyle); +}; const button = overrideStyle => combineStyles(styles.button, overrideStyle); diff --git a/src/alert/styles.js b/src/alert/styles.js index d8be8189..033556f2 100644 --- a/src/alert/styles.js +++ b/src/alert/styles.js @@ -3,27 +3,28 @@ import darken from '../internal/darken'; export default { root: { - borderRadius: '3px', + borderRadius: '4px', boxSizing: 'border-box', fontSize: '16px', fontWeight: 'inherit', lineHeight: '20px', - padding: '14px 10px', + padding: '12px 8px', position: 'relative', - minWidth: '275px', - maxWidth: '500px' + minWidth: '272px', + maxWidth: '496px' }, icon: { height: '24px', position: 'absolute', top: '50%', + left: '8px', transform: 'translateY(-50%)', width: '24px' }, text: { margin: '0', paddingLeft: '32px', - paddingRight: '42px', + '&:first-letter': { textTransform: 'capitalize' } @@ -32,7 +33,7 @@ export default { position: 'absolute', top: '50%', transform: 'translateY(-50%)', - right: '5px' + right: '4px' }, success: { backgroundColor: colors.alert.success, diff --git a/src/app-header/component.jsx b/src/app-header/component.jsx index 987b4390..2bd2e02b 100644 --- a/src/app-header/component.jsx +++ b/src/app-header/component.jsx @@ -2,41 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; -/** Your app's header */ -const AppHeader = ( - { - text, - icon, - rightButton, - style, - iconStyle, - textStyle, - rightButtonStyle, - leftButton, - leftButtonStyle, - color, - ...custom - } -) => ( -
- { - leftButton - ?
{leftButton}
- : null - } - {icon ?
{icon}
: null} - {text ?

{text}

: null} - { - rightButton - ?
{rightButton}
- : null - } -
-); +const displayName = 'AppHeader'; -AppHeader.displayName = 'AppHeader'; - -AppHeader.propTypes = { +const propTypes = { /** Title text (your app's name) */ text: PropTypes.node, /** Icon (your app's icon) */ @@ -58,7 +26,7 @@ AppHeader.propTypes = { color: PropTypes.string.isRequired }; -AppHeader.defaultProps = { +const defaultProps = { text: null, style: {}, textStyle: {}, @@ -70,4 +38,38 @@ AppHeader.defaultProps = { leftButtonStyle: {} }; +/** Your app's header */ +const AppHeader = ({ + text, + icon, + rightButton, + style, + iconStyle, + textStyle, + rightButtonStyle, + leftButton, + leftButtonStyle, + color, + ...custom +}) => ( +
+ { + leftButton + ?
{leftButton}
+ : null + } + {icon ?
{icon}
: null} + {text ?

{text}

: null} + { + rightButton + ?
{rightButton}
+ : null + } +
+); + +AppHeader.displayName = displayName; +AppHeader.propTypes = propTypes; +AppHeader.defaultProps = defaultProps; + export default AppHeader; diff --git a/src/app-header/styles.js b/src/app-header/styles.js index 88ffc407..55682ef3 100644 --- a/src/app-header/styles.js +++ b/src/app-header/styles.js @@ -7,9 +7,9 @@ const styleSheet = { boxShadow: styles.depthShadows[0], boxSizing: 'border-box', height: '56px', - paddingTop: '10px', + paddingTop: '8px', paddingRight: '16px', - paddingBottom: '10px', + paddingBottom: '8px', paddingLeft: '16px', position: 'relative', width: '100%', @@ -22,7 +22,7 @@ const styleSheet = { color: colors.white, fontSize: '24px', fontWeight: 'inherit', - lineHeight: '36px', + lineHeight: '40px', margin: 0, textDecoration: 'none', overflow: 'hidden', diff --git a/src/avatar/component.jsx b/src/avatar/component.jsx index e1f0e964..4462e031 100644 --- a/src/avatar/component.jsx +++ b/src/avatar/component.jsx @@ -2,16 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; -/** An user's profile image */ -const Avatar = ({ image, defaultImage, style, status, statusStyle, ...custom }) => ( -
- {status ?
: null} -
-); - -Avatar.displayName = 'Avatar'; +const displayName = 'Avatar'; -Avatar.propTypes = { +const propTypes = { /** Path to user's profile image */ image: PropTypes.string.isRequired, /** Path to default image. This image will be shown if the image path doesn't resolve */ @@ -24,11 +17,24 @@ Avatar.propTypes = { statusStyle: PropTypes.instanceOf(Object) }; -Avatar.defaultProps = { +const defaultProps = { style: {}, status: '', statusStyle: {}, defaultImage: null }; +/** A user's profile image */ +const Avatar = ({ + image, defaultImage, style, status, statusStyle, ...custom +}) => ( +
+ {status ?
: null} +
+); + +Avatar.displayName = displayName; +Avatar.propTypes = propTypes; +Avatar.defaultProps = defaultProps; + export default Avatar; diff --git a/src/badge/component.jsx b/src/badge/component.jsx index 40c7a539..8ec66b9b 100644 --- a/src/badge/component.jsx +++ b/src/badge/component.jsx @@ -4,7 +4,9 @@ import isNumber from 'lodash/isNumber'; import getStyles from './get-styles'; /** Used for displaying a (notification) counter */ -const Badge = ({ value, maxValue, inverted, style, color, ...custom }) => { +const Badge = ({ + value, maxValue, inverted, style, color, ...custom +}) => { let content = value; if (isNumber(maxValue) && value > maxValue) { diff --git a/src/badge/styles.js b/src/badge/styles.js index c3b74eae..c814e9b6 100644 --- a/src/badge/styles.js +++ b/src/badge/styles.js @@ -4,7 +4,7 @@ import styles from '../settings/styles'; export default { badge: { backgroundColor: colors.theme, - borderRadius: '10px', + borderRadius: '12px', boxSizing: 'border-box', boxShadow: styles.depthShadows[0], color: colors.white, @@ -12,7 +12,7 @@ export default { fontSize: '12px', fontWeight: 'inherit', height: '20px', - lineHeight: '16px', + lineHeight: '14px', padding: '3px', textAlign: 'center', minWidth: '20px', diff --git a/src/banner/component.jsx b/src/banner/component.jsx index 4215fbf3..1dbf01b1 100644 --- a/src/banner/component.jsx +++ b/src/banner/component.jsx @@ -7,35 +7,35 @@ import Button from '../button'; import IconClose from '../icons/icon-close'; import colors from '../settings/colors'; -/** 728x90 and 320x50 banners */ -class Banner extends Component { - static displayName = 'Banner' +const displayName = 'Banner'; - static propTypes = { - /** Content of the Banner */ - content: PropTypes.shape({ - /** 728x90 banner */ - desktop: PropTypes.node.isRequired, - /** 320x50 banner */ - mobile: PropTypes.node.isRequired - }).isRequired, - /** - * Callback fired when the close button is clicked - * - * function(event: object) => void - */ - hideBanner: PropTypes.func.isRequired, - /** Override the styles of the root element */ - style: PropTypes.instanceOf(Object), - /** Toggle banner open */ - open: PropTypes.bool - } +const propTypes = { + /** Content of the Banner */ + content: PropTypes.shape({ + /** 728x90 banner */ + desktop: PropTypes.node.isRequired, + /** 320x50 banner */ + mobile: PropTypes.node.isRequired + }).isRequired, + /** + * Callback fired when the close button is clicked + * + * function(event: object) => void + */ + hideBanner: PropTypes.func.isRequired, + /** Override the styles of the root element */ + style: PropTypes.instanceOf(Object), + /** Toggle banner open */ + open: PropTypes.bool +}; - static defaultProps = { - style: {}, - open: false - } +const defaultProps = { + style: {}, + open: false +}; +/** 728x90 and 320x50 banners */ +class Banner extends Component { constructor() { super(); @@ -61,7 +61,9 @@ class Banner extends Component { } render() { - const { style, content, hideBanner, open } = this.props; + const { + style, content, hideBanner, open + } = this.props; const { type } = this.state; if (!open) { @@ -86,4 +88,8 @@ class Banner extends Component { } } +Banner.displayName = displayName; +Banner.propTypes = propTypes; +Banner.defaultProps = defaultProps; + export default Banner; diff --git a/src/banner/styles.js b/src/banner/styles.js index a4190360..4438d22d 100644 --- a/src/banner/styles.js +++ b/src/banner/styles.js @@ -6,7 +6,7 @@ export default { root: { position: 'relative', backgroundColor: colors.white, - borderRadius: '3px', + borderRadius: '4px', boxShadow: styles.depthShadows[0], overflow: 'hidden' }, diff --git a/src/button/component.jsx b/src/button/component.jsx index c010bbde..76ac98e8 100644 --- a/src/button/component.jsx +++ b/src/button/component.jsx @@ -2,23 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; -/** General purpose button with three types */ -const Button = ({ - children, onClick, iconButton, inverted, style, disabled, flatButton, color, ...custom -}) => ( - -); - -Button.displayName = 'Button'; +const displayName = 'Button'; -Button.propTypes = { +const propTypes = { /** Content of the button */ children: PropTypes.node.isRequired, /** @@ -40,7 +26,7 @@ Button.propTypes = { color: PropTypes.string.isRequired }; -Button.defaultProps = { +const defaultProps = { style: {}, iconButton: false, inverted: false, @@ -49,4 +35,22 @@ Button.defaultProps = { flatButton: false }; +/** General purpose button with three types */ +const Button = ({ + children, onClick, iconButton, inverted, style, disabled, flatButton, color, ...custom +}) => ( + +); + +Button.displayName = displayName; +Button.propTypes = propTypes; +Button.defaultProps = defaultProps; + export default Button; diff --git a/src/button/styles.js b/src/button/styles.js index b4090803..bdd531a6 100644 --- a/src/button/styles.js +++ b/src/button/styles.js @@ -26,7 +26,7 @@ export default { button: { backgroundColor: colors.theme, border: 0, - borderRadius: '3px', + borderRadius: '4px', boxShadow: styles.depthShadows[0], color: colors.white, cursor: 'pointer', diff --git a/src/card-content/component.jsx b/src/card-content/component.jsx index e43e2e79..1eebe98b 100644 --- a/src/card-content/component.jsx +++ b/src/card-content/component.jsx @@ -2,24 +2,28 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; -/** A Card is a piece of paper with unique related data */ -const CardContent = ({ children, style, ...custom }) => ( -
- {children} -
-); +const displayName = 'CardContent'; -CardContent.displayName = 'CardContent'; - -CardContent.propTypes = { +const propTypes = { /** The CardContent's content */ children: PropTypes.node.isRequired, /** Override the styles of the root element */ style: PropTypes.instanceOf(Object) }; -CardContent.defaultProps = { +const defaultProps = { style: {} }; +/** A Card is a piece of paper with unique related data */ +const CardContent = ({ children, style, ...custom }) => ( +
+ {children} +
+); + +CardContent.displayName = displayName; +CardContent.propTypes = propTypes; +CardContent.defaultProps = defaultProps; + export default CardContent; diff --git a/src/card/component.jsx b/src/card/component.jsx index 09fd3813..126a5200 100644 --- a/src/card/component.jsx +++ b/src/card/component.jsx @@ -2,24 +2,28 @@ import React from 'react'; import PropTypes from 'prop-types'; import getStyles from './get-styles'; -/** A Card is a piece of paper with unique related data */ -const Card = ({ children, style, ...custom }) => ( -
- {children} -
-); +const displayName = 'Card'; -Card.displayName = 'Card'; - -Card.propTypes = { +const propTypes = { /** The Card's content */ children: PropTypes.node.isRequired, /** Override the styles of the root element */ style: PropTypes.instanceOf(Object) }; -Card.defaultProps = { +const defaultProps = { style: {} }; +/** A Card is a piece of paper with unique related data */ +const Card = ({ children, style, ...custom }) => ( +
+ {children} +
+); + +Card.displayName = displayName; +Card.propTypes = propTypes; +Card.defaultProps = defaultProps; + export default Card; diff --git a/src/card/styles.js b/src/card/styles.js index 835b1559..cb92a9f4 100644 --- a/src/card/styles.js +++ b/src/card/styles.js @@ -3,7 +3,7 @@ import styles from '../settings/styles'; export default { root: { boxShadow: styles.depthShadows[0], - borderRadius: '3px', + borderRadius: '4px', overflow: 'hidden' } }; diff --git a/src/commands/component.jsx b/src/commands/component.jsx index 73de7987..089f0391 100644 --- a/src/commands/component.jsx +++ b/src/commands/component.jsx @@ -284,13 +284,15 @@ class Commands extends Component { { command.avatar - ?
- { - typeof command.avatar === 'string' - ? - : command.avatar - } -
+ ? ( +
+ { + typeof command.avatar === 'string' + ? + : command.avatar + } +
+ ) : null } {command.prefix}{command.value} diff --git a/src/date-separator/component.jsx b/src/date-separator/component.jsx index b43b0db6..001cfc6f 100644 --- a/src/date-separator/component.jsx +++ b/src/date-separator/component.jsx @@ -38,7 +38,9 @@ const defaultProps = { const displayName = 'DateSeparator'; /** A separator to show above a Message */ -const DateSeparator = ({ date, format, style, textStyle, locale }) => ( +const DateSeparator = ({ + date, format, style, textStyle, locale +}) => (

{formatDate(date, format, { locale })}

diff --git a/src/emoji-filter/component.jsx b/src/emoji-filter/component.jsx index 4c15d2a9..de63c356 100644 --- a/src/emoji-filter/component.jsx +++ b/src/emoji-filter/component.jsx @@ -96,9 +96,9 @@ class EmojiFilter extends Component { } const filteredEmoji = _.chain(emoji) - .filter(icon => icon.shortname.indexOf(value) === 0) - .reject(icon => icon.diversity && !_.includes(icon.title, tone)) - .value(); + .filter(icon => icon.shortname.indexOf(value) === 0) + .reject(icon => icon.diversity && !_.includes(icon.title, tone)) + .value(); if (filteredEmoji.length === 1 && _.includes(value, filteredEmoji[0].shortname)) { return []; @@ -197,9 +197,7 @@ class EmojiFilter extends Component { const options = { replace(domNode) { if (domNode.attribs && domNode.attribs.class === 'emojione') { - const src = domNode.attribs.src; - const alt = domNode.attribs.alt; - const title = domNode.attribs.title; + const { src, alt, title } = domNode.attribs; return {alt}; } diff --git a/src/emoji-menu/create-markup.js b/src/emoji-menu/create-markup.js deleted file mode 100644 index c490f614..00000000 --- a/src/emoji-menu/create-markup.js +++ /dev/null @@ -1,9 +0,0 @@ -import emojione from 'emojione'; - -function createMarkup(shortname) { - return { - __html: emojione.toImage(shortname) - }; -} - -export default createMarkup; diff --git a/src/emoji-menu/emoji-categories.jsx b/src/emoji-menu/emoji-categories.jsx index 1d0fad15..86c889c6 100644 --- a/src/emoji-menu/emoji-categories.jsx +++ b/src/emoji-menu/emoji-categories.jsx @@ -11,15 +11,32 @@ import IconObjects from '../icons/icon-objects'; import IconSymbols from '../icons/icon-symbols'; import getStyles from './get-styles'; +const propTypes = { + changeCategory: PropTypes.func.isRequired, + category: PropTypes.string.isRequired, + activeColor: PropTypes.string.isRequired, + recent: PropTypes.bool.isRequired, + style: PropTypes.instanceOf(Object), + iconStyle: PropTypes.instanceOf(Object), + iconColor: PropTypes.string.isRequired +}; + +const defaultProps = { + style: {}, + iconStyle: {} +}; + const EmojiCategories = ({ changeCategory, category, activeColor, recent, style, iconStyle, iconColor }) => (
{ recent - ?
changeCategory('recent')}> - -
+ ? ( +
changeCategory('recent')}> + +
+ ) : null }
changeCategory('people')}> @@ -46,19 +63,7 @@ const EmojiCategories = ({
); -EmojiCategories.propTypes = { - changeCategory: PropTypes.func.isRequired, - category: PropTypes.string.isRequired, - activeColor: PropTypes.string.isRequired, - recent: PropTypes.bool.isRequired, - style: PropTypes.instanceOf(Object), - iconStyle: PropTypes.instanceOf(Object), - iconColor: PropTypes.string.isRequired -}; - -EmojiCategories.defaultProps = { - style: {}, - iconStyle: {} -}; +EmojiCategories.propTypes = propTypes; +EmojiCategories.defaultProps = defaultProps; export default Radium(EmojiCategories); diff --git a/src/emoji-menu/emoji-category.jsx b/src/emoji-menu/emoji-category.jsx index fe6a55b2..a5dd775f 100644 --- a/src/emoji-menu/emoji-category.jsx +++ b/src/emoji-menu/emoji-category.jsx @@ -1,22 +1,41 @@ import React from 'react'; import PropTypes from 'prop-types'; import Radium, { Style } from 'radium'; -import createMarkup from './create-markup'; +import emojione from 'emojione'; +import htmlParser from 'html-react-parser'; import styles from './styles'; import getStyles from './get-styles'; -const EmojiCategory = ({ category, emojis, sendEmoji, style, emojiStyle }) => ( +const propTypes = { + category: PropTypes.string.isRequired, + emojis: PropTypes.arrayOf(PropTypes.shape({ + shortname: PropTypes.string.isRequired + })).isRequired, + sendEmoji: PropTypes.func.isRequired, + style: PropTypes.instanceOf(Object), + emojiStyle: PropTypes.instanceOf(Object) +}; + +const defaultProps = { + style: {}, + emojiStyle: {} +}; + +const EmojiCategory = ({ + category, emojis, sendEmoji, style, emojiStyle +}) => (

{category}

{emojis.map(emoji => (
sendEmoji(event, emoji)} style={getStyles.categoryEmoji(emojiStyle)} className="emoji" - /> + > + {htmlParser(emojione.toImage(emoji.shortname))} +
))}
@@ -33,21 +52,7 @@ const EmojiCategory = ({ category, emojis, sendEmoji, style, emojiStyle }) => (
); -EmojiCategory.propTypes = { - category: PropTypes.string.isRequired, - emojis: PropTypes.arrayOf( - PropTypes.shape({ - shortname: PropTypes.string.isRequired - }) - ).isRequired, - sendEmoji: PropTypes.func.isRequired, - style: PropTypes.instanceOf(Object), - emojiStyle: PropTypes.instanceOf(Object) -}; - -EmojiCategory.defaultProps = { - style: {}, - emojiStyle: {} -}; +EmojiCategory.propTypes = propTypes; +EmojiCategory.defaultProps = defaultProps; export default Radium(EmojiCategory); diff --git a/src/emoji-menu/emoji-modifiers.jsx b/src/emoji-menu/emoji-modifiers.jsx index 7048b405..bf66c5da 100644 --- a/src/emoji-menu/emoji-modifiers.jsx +++ b/src/emoji-menu/emoji-modifiers.jsx @@ -1,11 +1,30 @@ import React from 'react'; import PropTypes from 'prop-types'; import Radium, { Style } from 'radium'; -import createMarkup from './create-markup'; +import emojione from 'emojione'; +import htmlParser from 'html-react-parser'; import getStyles from './get-styles'; import styles from './styles'; -function EmojiModifiers({ modifiers, changeTone, tone, style, modifierStyle }) { +const propTypes = { + modifiers: PropTypes.arrayOf(PropTypes.shape({ + shortname: PropTypes.string.isRequired, + title: PropTypes.string.isRequired + })).isRequired, + changeTone: PropTypes.func.isRequired, + tone: PropTypes.string.isRequired, + style: PropTypes.instanceOf(Object), + modifierStyle: PropTypes.instanceOf(Object) +}; + +const defaultProps = { + style: {}, + modifierStyle: {} +}; + +function EmojiModifiers({ + modifiers, changeTone, tone, style, modifierStyle +}) { return (
@@ -28,11 +47,12 @@ function EmojiModifiers({ modifiers, changeTone, tone, style, modifierStyle }) { style={ getStyles.modifier(title === tone, modifierStyle) } - dangerouslySetInnerHTML={createMarkup(modifier.shortname)} key={`emoji-${modifier.shortname}`} onClick={() => changeTone(title)} className="modifier" - /> + > + {htmlParser(emojione.toImage(modifier.shortname))} +
); })} @@ -57,22 +77,7 @@ function EmojiModifiers({ modifiers, changeTone, tone, style, modifierStyle }) { ); } -EmojiModifiers.propTypes = { - modifiers: PropTypes.arrayOf( - PropTypes.shape({ - shortname: PropTypes.string.isRequired, - title: PropTypes.string.isRequired - }) - ).isRequired, - changeTone: PropTypes.func.isRequired, - tone: PropTypes.string.isRequired, - style: PropTypes.instanceOf(Object), - modifierStyle: PropTypes.instanceOf(Object) -}; - -EmojiModifiers.defaultProps = { - style: {}, - modifierStyle: {} -}; +EmojiModifiers.propTypes = propTypes; +EmojiModifiers.defaultProps = defaultProps; export default Radium(EmojiModifiers); diff --git a/src/emoji-menu/index.jsx b/src/emoji-menu/index.jsx index f3eb0ca8..64fb6329 100644 --- a/src/emoji-menu/index.jsx +++ b/src/emoji-menu/index.jsx @@ -17,7 +17,7 @@ import colors from '../settings/colors'; const storage = new Storage(); -emojione.imagePathPNG = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/64/'; +emojione.emojiSize = '64'; const propTypes = { /** diff --git a/src/gallery/index.jsx b/src/gallery/index.jsx index da14c028..78feaa42 100644 --- a/src/gallery/index.jsx +++ b/src/gallery/index.jsx @@ -7,6 +7,45 @@ import styles from './styles'; import getStyles from './get-styles'; import Lightbox from '../lightbox'; +const displayName = 'Gallery'; + +const propTypes = { + /** + * Array of objects containing gallery images. + * Each object must have a 'src' key, 'alt' and 'title' are optional + */ + items: PropTypes.arrayOf(PropTypes.shape({ + src: PropTypes.string.isRequired, + alt: PropTypes.string, + title: PropTypes.node + })).isRequired, + /** Height of the items within the gallery */ + itemHeight: PropTypes.number, + /** + * Callback fired when a Gallery's item is clicked, only works if enableLightbox equals false + * + * function(event: object, image: object) => void + */ + onItemClick: PropTypes.func, + /** Override the styles of the root element */ + style: PropTypes.instanceOf(Object), + /** Override the styles of the image container element */ + itemContainerStyle: PropTypes.instanceOf(Object), + /** Override the styles of the image element */ + itemStyle: PropTypes.instanceOf(Object), + /** Open a Lightbox when an item is clicked */ + enableLightbox: PropTypes.bool +}; + +const defaultProps = { + itemHeight: 320, + onItemClick: () => {}, + style: {}, + itemContainerStyle: {}, + itemStyle: {}, + enableLightbox: false +}; + /** Justified grid layout for showcasing images. */ class Gallery extends Component { constructor() { @@ -81,45 +120,8 @@ class Gallery extends Component { } } -Gallery.displayName = 'Gallery'; - -Gallery.propTypes = { - /** - * Array of objects containing gallery images. - * Each object must have a 'src' key, 'alt' and 'title' are optional - */ - items: PropTypes.arrayOf( - PropTypes.shape({ - src: PropTypes.string.isRequired, - alt: PropTypes.string, - title: PropTypes.node - }) - ).isRequired, - /** Height of the items within the gallery */ - itemHeight: PropTypes.number, - /** - * Callback fired when a Gallery's item is clicked, only works if enableLightbox equals false - * - * function(event: object, image: object) => void - */ - onItemClick: PropTypes.func, - /** Override the styles of the root element */ - style: PropTypes.instanceOf(Object), - /** Override the styles of the image container element */ - itemContainerStyle: PropTypes.instanceOf(Object), - /** Override the styles of the image element */ - itemStyle: PropTypes.instanceOf(Object), - /** Open a Lightbox when an item is clicked */ - enableLightbox: PropTypes.bool -}; - -Gallery.defaultProps = { - itemHeight: 320, - onItemClick: () => {}, - style: {}, - itemContainerStyle: {}, - itemStyle: {}, - enableLightbox: false -}; +Gallery.displayName = displayName; +Gallery.propTypes = propTypes; +Gallery.defaultProps = defaultProps; export default Radium(Gallery); diff --git a/src/icon-menu/index.jsx b/src/icon-menu/index.jsx index a02e326b..230bc2a5 100644 --- a/src/icon-menu/index.jsx +++ b/src/icon-menu/index.jsx @@ -9,58 +9,58 @@ import Button from '../button'; import getStyles from './get-styles'; import getPopOverPosition from '../internal/get-pop-over-position'; +const displayName = 'IconMenu'; + +const propTypes = { + /** Icon to toggle the menu with */ + icon: PropTypes.node.isRequired, + /** Content of the IconMenu (MenuItems) */ + children: PropTypes.node.isRequired, + /** Secondary set of MenuItems */ + secondaryMenuItems: PropTypes.node, + /** Text to divide the menu items */ + dividerText: PropTypes.node, + /** Optional header text */ + header: PropTypes.node, + /** Override the styles of the header element */ + headerStyle: PropTypes.instanceOf(Object), + /** Override the styles of the root element */ + style: PropTypes.instanceOf(Object), + /** Override the styles of the content container */ + contentStyle: PropTypes.instanceOf(Object), + /** + * Callback fired when the IconMenu closes + * + * function(event: object) => void + */ + onMenuClose: PropTypes.func, + /** Override the styles of the divider element */ + dividerStyle: PropTypes.instanceOf(Object), + /** + * Callback fired when the IconMenu's header is clicked + * + * function(event: object) => void + */ + onHeaderClick: PropTypes.func, + /** Override the styles of the Button component */ + buttonStyle: PropTypes.instanceOf(Object) +}; + +const defaultProps = { + header: null, + style: {}, + headerStyle: {}, + contentStyle: {}, + dividerStyle: {}, + secondaryMenuItems: null, + dividerText: null, + onMenuClose: () => {}, + onHeaderClick: () => {}, + buttonStyle: {} +}; + /** Open a menu from an Icon, give options related to the icon */ class IconMenu extends Component { - static displayName = 'IconMenu' - - static propTypes = { - /** Icon to toggle the menu with */ - icon: PropTypes.node.isRequired, - /** Content of the IconMenu (MenuItems) */ - children: PropTypes.node.isRequired, - /** Secondary set of MenuItems */ - secondaryMenuItems: PropTypes.node, - /** Text to divide the menu items */ - dividerText: PropTypes.node, - /** Optional header text */ - header: PropTypes.node, - /** Override the styles of the header element */ - headerStyle: PropTypes.instanceOf(Object), - /** Override the styles of the root element */ - style: PropTypes.instanceOf(Object), - /** Override the styles of the content container */ - contentStyle: PropTypes.instanceOf(Object), - /** - * Callback fired when the IconMenu closes - * - * function(event: object) => void - */ - onMenuClose: PropTypes.func, - /** Override the styles of the divider element */ - dividerStyle: PropTypes.instanceOf(Object), - /** - * Callback fired when the IconMenu's header is clicked - * - * function(event: object) => void - */ - onHeaderClick: PropTypes.func, - /** Override the styles of the Button component */ - buttonStyle: PropTypes.instanceOf(Object) - } - - static defaultProps = { - header: null, - style: {}, - headerStyle: {}, - contentStyle: {}, - dividerStyle: {}, - secondaryMenuItems: null, - dividerText: null, - onMenuClose: () => {}, - onHeaderClick: () => {}, - buttonStyle: {} - } - constructor() { super(); @@ -119,7 +119,10 @@ class IconMenu extends Component { applyCloseMenuToChildren(children) { return React.Children.map( - children, child => React.cloneElement(child, { closeMenu: this.closeMenu }) + children, + child => ( + React.cloneElement(child, { closeMenu: this.closeMenu }) + ) ); } @@ -206,6 +209,10 @@ class IconMenu extends Component { } } +IconMenu.displayName = displayName; +IconMenu.propTypes = propTypes; +IconMenu.defaultProps = defaultProps; + const enhance = compose( onClickOutside, Radium diff --git a/src/index.js b/src/index.js index 45775060..4670fd7e 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,7 @@ export EmojiMenu from './emoji-menu'; export EmptyState from './empty-state'; export Gallery from './gallery'; export IconMenu from './icon-menu'; +export ImageLoader from './image-loader'; export Input from './input'; export List from './list'; export ListItem from './list-item'; @@ -31,7 +32,7 @@ export Modal from './modal'; export Overlay from './overlay'; export Paper from './paper'; export PopOver from './pop-over'; -export ImageLoader from './image-loader'; +export Portal from './portal'; export Profile from './profile'; export ProfileCard from './profile-card'; export RadioButton from './radio-button'; diff --git a/src/input/index.jsx b/src/input/index.jsx index a7a0b2a4..377226b5 100644 --- a/src/input/index.jsx +++ b/src/input/index.jsx @@ -160,7 +160,7 @@ class Input extends Component { return (
- + {input}