-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Menu with core functionalities #981
Closed
Closed
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const boxPositions = { | ||
| BOTTOM_LEFT: 'BOTTOM_LEFT', | ||
| BOTTOM_RIGHT: 'BOTTOM_RIGHT', | ||
| TOP_LEFT: 'TOP_LEFT', | ||
| TOP_RIGHT: 'TOP_RIGHT', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
175 changes: 175 additions & 0 deletions
175
packages/storybook-ui/src/modules/ui/components/assets/svg_package.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| /* eslint-disable */ | ||
| (function webpackUniversalModuleDefinition(root, factory) { | ||
| if(typeof exports === 'object' && typeof module === 'object') | ||
| module.exports = factory(); | ||
| else if(typeof define === 'function' && define.amd) | ||
| define([], factory); | ||
| else if(typeof exports === 'object') | ||
| exports["svg_package"] = factory(); | ||
| else | ||
| root["svg_package"] = factory(); | ||
| })(this, function() { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
| /******/ // The module cache | ||
| /******/ var installedModules = {}; | ||
|
|
||
| /******/ // The require function | ||
| /******/ function __webpack_require__(moduleId) { | ||
|
|
||
| /******/ // Check if module is in cache | ||
| /******/ if(installedModules[moduleId]) | ||
| /******/ return installedModules[moduleId].exports; | ||
|
|
||
| /******/ // Create a new module (and put it into the cache) | ||
| /******/ var module = installedModules[moduleId] = { | ||
| /******/ i: moduleId, | ||
| /******/ l: false, | ||
| /******/ exports: {} | ||
| /******/ }; | ||
|
|
||
| /******/ // Execute the module function | ||
| /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
|
|
||
| /******/ // Flag the module as loaded | ||
| /******/ module.l = true; | ||
|
|
||
| /******/ // Return the exports of the module | ||
| /******/ return module.exports; | ||
| /******/ } | ||
|
|
||
|
|
||
| /******/ // expose the modules object (__webpack_modules__) | ||
| /******/ __webpack_require__.m = modules; | ||
|
|
||
| /******/ // expose the module cache | ||
| /******/ __webpack_require__.c = installedModules; | ||
|
|
||
| /******/ // identity function for calling harmony imports with the correct context | ||
| /******/ __webpack_require__.i = function(value) { return value; }; | ||
|
|
||
| /******/ // define getter function for harmony exports | ||
| /******/ __webpack_require__.d = function(exports, name, getter) { | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { | ||
| /******/ configurable: false, | ||
| /******/ enumerable: true, | ||
| /******/ get: getter | ||
| /******/ }); | ||
| /******/ } | ||
| /******/ }; | ||
|
|
||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
| /******/ __webpack_require__.n = function(module) { | ||
| /******/ var getter = module && module.__esModule ? | ||
| /******/ function getDefault() { return module['default']; } : | ||
| /******/ function getModuleExports() { return module; }; | ||
| /******/ __webpack_require__.d(getter, 'a', getter); | ||
| /******/ return getter; | ||
| /******/ }; | ||
|
|
||
| /******/ // Object.prototype.hasOwnProperty.call | ||
| /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
|
|
||
| /******/ // __webpack_public_path__ | ||
| /******/ __webpack_require__.p = ""; | ||
|
|
||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 8); | ||
| /******/ }) | ||
| /************************************************************************/ | ||
| /******/ ([ | ||
| /* 0 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0xOSAzSDVjLTEuMTEgMC0yIC45LTIgMnYxNGMwIDEuMS44OSAyIDIgMmgxNGMxLjExIDAgMi0uOSAyLTJWNWMwLTEuMS0uODktMi0yLTJ6bS05IDE0bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+Cjwvc3ZnPg==" | ||
|
|
||
| /***/ }, | ||
| /* 1 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA1djE0SDVWNWgxNG0wLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yeiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=" | ||
|
|
||
| /***/ }, | ||
| /* 2 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik00IDE4bDguNS02TDQgNnYxMnptOS0xMnYxMmw4LjUtNkwxMyA2eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=" | ||
|
|
||
| /***/ }, | ||
| /* 3 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMSAxOFY2bC04LjUgNiA4LjUgNnptLjUtNmw4LjUgNlY2bC04LjUgNnoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+" | ||
|
|
||
| /***/ }, | ||
| /* 4 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0xMSAxOGgydi0yaC0ydjJ6bTEtMTZDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4em0wLTE0Yy0yLjIxIDAtNCAxLjc5LTQgNGgyYzAtMS4xLjktMiAyLTJzMiAuOSAyIDJjMCAyLTMgMS43NS0zIDVoMmMwLTIuMjUgMy0yLjUgMy01IDAtMi4yMS0xLjc5LTQtNC00eiIvPgo8L3N2Zz4=" | ||
|
|
||
| /***/ }, | ||
| /* 5 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik0zIDE4aDE4di0ySDN2MnptMC01aDE4di0ySDN2MnptMC03djJoMThWNkgzeiIvPgo8L3N2Zz4=" | ||
|
|
||
| /***/ }, | ||
| /* 6 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE4bDguNS02TDYgNnYxMnpNMTYgNnYxMmgyVjZoLTJ6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==" | ||
|
|
||
| /***/ }, | ||
| /* 7 */ | ||
| /***/ function(module, exports) { | ||
|
|
||
| module.exports = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDZoMnYxMkg2em0zLjUgNmw4LjUgNlY2eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=" | ||
|
|
||
| /***/ }, | ||
| /* 8 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
|
|
||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ic_check_box_black_24px_svg__ = __webpack_require__(0); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ic_check_box_black_24px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__ic_check_box_black_24px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__ic_check_box_outline_blank_black_24px_svg__ = __webpack_require__(1); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__ic_check_box_outline_blank_black_24px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__ic_check_box_outline_blank_black_24px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ic_fast_forward_black_18px_svg__ = __webpack_require__(2); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ic_fast_forward_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__ic_fast_forward_black_18px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__ic_fast_rewind_black_18px_svg__ = __webpack_require__(3); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__ic_fast_rewind_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__ic_fast_rewind_black_18px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__ic_menu_black_18px_svg__ = __webpack_require__(5); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__ic_menu_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__ic_menu_black_18px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__ic_skip_next_black_18px_svg__ = __webpack_require__(6); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__ic_skip_next_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__ic_skip_next_black_18px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__ic_skip_previous_black_18px_svg__ = __webpack_require__(7); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__ic_skip_previous_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6__ic_skip_previous_black_18px_svg__); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ic_help_outline_black_18px_svg__ = __webpack_require__(4); | ||
| /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ic_help_outline_black_18px_svg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_7__ic_help_outline_black_18px_svg__); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| const images = { | ||
| checked_box: __WEBPACK_IMPORTED_MODULE_0__ic_check_box_black_24px_svg___default.a, | ||
| unchecked_box: __WEBPACK_IMPORTED_MODULE_1__ic_check_box_outline_blank_black_24px_svg___default.a, | ||
| fast_forward: __WEBPACK_IMPORTED_MODULE_2__ic_fast_forward_black_18px_svg___default.a, | ||
| fast_rewind: __WEBPACK_IMPORTED_MODULE_3__ic_fast_rewind_black_18px_svg___default.a, | ||
| menu: __WEBPACK_IMPORTED_MODULE_4__ic_menu_black_18px_svg___default.a, | ||
| skip_next: __WEBPACK_IMPORTED_MODULE_5__ic_skip_next_black_18px_svg___default.a, | ||
| skip_previous: __WEBPACK_IMPORTED_MODULE_6__ic_skip_previous_black_18px_svg___default.a, | ||
| help: __WEBPACK_IMPORTED_MODULE_7__ic_help_outline_black_18px_svg___default.a, | ||
| }; | ||
|
|
||
| /* harmony default export */ exports["default"] = images; | ||
|
|
||
|
|
||
| /***/ } | ||
| /******/ ]); | ||
| }); | ||
51 changes: 51 additions & 0 deletions
51
packages/storybook-ui/src/modules/ui/components/core_menu/floating_block.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import CoreMenu from '../../containers/core_menu'; | ||
| import { colorScheme, floating } from '../theme'; | ||
| import { boxPositions } from '../../../../libs/menu_positions'; | ||
|
|
||
| const rootStyle = { | ||
| position: 'absolute', | ||
|
|
||
| backgroundColor: colorScheme.block, | ||
| borderRadius: 2, | ||
| paddingBottom: 2, | ||
| ...floating, | ||
| }; | ||
|
|
||
| function getPosition(pos) { | ||
| switch (pos) { | ||
| case boxPositions.BOTTOM_RIGHT: | ||
| return { | ||
| right: 10, | ||
| bottom: 20, | ||
| }; | ||
| case boxPositions.TOP_LEFT: | ||
| return { | ||
| left: 10, | ||
| top: 20, | ||
| }; | ||
| case boxPositions.TOP_RIGHT: | ||
| return { | ||
| right: 10, | ||
| top: 20, | ||
| }; | ||
| default: | ||
| return { | ||
| left: 10, | ||
| bottom: 20, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| const FloatingBlock = ({ position }) => ( | ||
| <div style={{ ...rootStyle, ...getPosition(position) }}> | ||
| <CoreMenu downDirection={position === boxPositions.TOP_LEFT || position === boxPositions.TOP_RIGHT} /> | ||
| </div> | ||
| ); | ||
|
|
||
| FloatingBlock.propTypes = { | ||
| position: PropTypes.string, | ||
| }; | ||
|
|
||
| export default FloatingBlock; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not following why we're committing a webpack generated module into the repo with svgs in base64 string format.
I think for maintainability sake, we should include the original svgs in the repo and generate them during runtime.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you @danielduan
It's a legacy solution from PR for Storybook 2.0 :)
I think we can switch to the "normal" way to import svg.
We'll need to change some loaders in webpack config, for that. Actually, I think we need to do it very carefully!