├── .github
├── CODEOWNERS
├── ISSUE_TEMPLATE.md
└── workflows
│ └── tests.yml
├── .gitignore
├── .npmignore
├── CONTRIBUTING.md
├── README.md
├── bower.json
├── demo
├── index.html
└── polymer.svg
├── formatconfig.json
├── hero.svg
├── manifest.json
├── package-lock.json
├── package.json
├── paper-menu-button-animations.js
├── paper-menu-button.js
├── test
├── index.html
└── paper-menu-button.html
└── wct.conf.json
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @bicknellr
2 | /.travis.yml @azakus
3 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 | ### Description
3 |
4 |
5 | ### Expected outcome
6 |
7 |
8 |
9 | ### Actual outcome
10 |
11 |
12 |
13 | ### Live Demo
14 |
15 |
16 | ### Steps to reproduce
17 |
18 |
23 |
24 | ### Browsers Affected
25 |
26 | - [ ] Chrome
27 | - [ ] Firefox
28 | - [ ] Safari 9
29 | - [ ] Safari 8
30 | - [ ] Safari 7
31 | - [ ] Edge
32 | - [ ] IE 11
33 | - [ ] IE 10
34 |
--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
1 | name: tests
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | wct-local:
7 | runs-on: ubuntu-latest
8 |
9 | steps:
10 | - uses: actions/checkout@v2
11 | - uses: actions/setup-node@v1
12 | with:
13 | node-version: 14
14 |
15 | - name: Install the Polymer CLI
16 | run: npm install -g polymer-cli
17 |
18 | - name: Install NPM dependencies
19 | run: npm ci
20 |
21 | - name: Check formatting
22 | run: >-
23 | npm run format && git diff --exit-code || (echo -e
24 | '\n\033[31mERROR:\033[0m Project is not formatted. Please run "npm run
25 | format".' && false)
26 |
27 | - name: Test in local browsers (Chrome/Firefox)
28 | run: polymer test --module-resolution node --npm
29 |
30 | wct-sauce:
31 | # Skip if this is from a forked repository because we can't access Sauce
32 | # secrets.
33 | if: github.event.pull_request.base.repo.id == github.event.pull_request.head.repo.id
34 |
35 | runs-on: ubuntu-latest
36 |
37 | steps:
38 | - uses: actions/checkout@v2
39 | - uses: actions/setup-node@v1
40 | with:
41 | node-version: 14
42 |
43 | - name: Install the Polymer CLI
44 | run: npm install -g polymer-cli
45 |
46 | - name: Install NPM dependencies
47 | run: npm ci
48 |
49 | - name: Check formatting
50 | run: >-
51 | npm run format && git diff --exit-code || (echo -e
52 | '\n\033[31mERROR:\033[0m Project is not formatted. Please run "npm run
53 | format".' && false)
54 |
55 | - name: Test in Sauce Labs browsers (Safari/Edge/IE11/Chrome 41)
56 | env:
57 | SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
58 | SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
59 | run: >-
60 | polymer test --module-resolution node --npm
61 | --sauce 'Windows 10/microsoftedge'
62 | --sauce 'Windows 10/internet explorer@11'
63 | --sauce 'macOS 10.13/safari@11'
64 | --sauce 'OS X 10.11/safari@10'
65 | --sauce 'OS X 10.11/safari@9'
66 | --sauce 'Linux/chrome'
67 | --sauce 'Windows 10/chrome@beta'
68 | --sauce 'Windows 10/chrome'
69 | --sauce 'Windows 10/firefox'
70 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components*
2 | bower-*.json
3 | node_modules
4 | *.d.ts
5 | *.tgz
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.tgz
2 | .github
3 | formatconfig.json
4 | gen-tsd.json
5 | test/
6 | wct.conf.json
7 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
13 |
14 | # Polymer Elements
15 | ## Guide for Contributors
16 |
17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
18 |
19 | ### Filing Issues
20 |
21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
22 |
23 | 1. **Who will use the feature?** _“As someone filling out a form…”_
24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_
25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
26 |
27 | **If you are filing an issue to report a bug**, please provide:
28 |
29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
30 |
31 | ```markdown
32 | The `paper-foo` element causes the page to turn pink when clicked.
33 |
34 | ## Expected outcome
35 |
36 | The page stays the same color.
37 |
38 | ## Actual outcome
39 |
40 | The page turns pink.
41 |
42 | ## Steps to reproduce
43 |
44 | 1. Put a `paper-foo` element in the page.
45 | 2. Open the page in a web browser.
46 | 3. Click the `paper-foo` element.
47 | ```
48 |
49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
50 |
51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
52 |
53 | ### Submitting Pull Requests
54 |
55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
56 |
57 | When submitting pull requests, please provide:
58 |
59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
60 |
61 | ```markdown
62 | (For a single issue)
63 | Fixes #20
64 |
65 | (For multiple issues)
66 | Fixes #32, fixes #40
67 | ```
68 |
69 | 2. **A succinct description of the design** used to fix any related issues. For example:
70 |
71 | ```markdown
72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
73 | ```
74 |
75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
76 |
77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
78 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/@polymer/paper-menu-button)
2 | [](https://travis-ci.org/PolymerElements/paper-menu-button)
3 | [](https://webcomponents.org/element/@polymer/paper-menu-button)
4 |
5 | ## <paper-menu-button>
6 |
7 | `paper-menu-button` allows one to compose a designated "trigger" element with
8 | another element that represents "content", to create a dropdown menu that
9 | displays the "content" when the "trigger" is clicked.
10 |
11 | The child element assigned to the `dropdown-trigger` slot will be used as the
12 | "trigger" element. The child element assigned to the `dropdown-content` slot will be
13 | used as the "content" element.
14 |
15 | The `paper-menu-button` is sensitive to its content's `iron-select` events. If
16 | the "content" element triggers an `iron-select` event, the `paper-menu-button`
17 | will close automatically.
18 |
19 | ### Styling
20 |
21 | The following custom properties and mixins are also available for styling:
22 |
23 | | Custom property | Description | Default |
24 | | --- | --- | --- |
25 | | `--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `--primary-background-color` |
26 | | `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}` |
27 | | `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}` |
28 | | `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}` |
29 | | `--paper-menu-button-content` | Mixin applied to the paper-menu-button content | `{}` |
30 |
31 | ## paper-menu-button-animations.js
32 |
33 | Defines these animations:
34 | - <paper-menu-grow-height-animation>
35 | - <paper-menu-grow-width-animation>
36 | - <paper-menu-shrink-height-animation>
37 | - <paper-menu-shrink-width-animation>
38 |
39 | See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-menu-button),
40 | [Demo](https://www.webcomponents.org/element/@polymer/paper-menu-button/demo/demo/index.html).
41 |
42 | ## Usage
43 |
44 | ### Installation
45 | ```
46 | npm install --save @polymer/paper-menu-button
47 | ```
48 |
49 | ### In an html file
50 | ```html
51 |
52 |