Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ After that, simply register the breakpoints that are pertinent to your applicati

```js
export default {
mobile: '(max-width: 767px)',
tablet: '(min-width: 768px) and (max-width: 991px)',
mobile: '(max-width: 767px)',
tablet: '(min-width: 768px) and (max-width: 991px)',
desktop: '(min-width: 992px) and (max-width: 1200px)',
jumbo: '(min-width: 1201px)'
jumbo: '(min-width: 1201px)'
};
```

Expand All @@ -37,7 +37,7 @@ Now you can inject the _media_ service in any object with access to the containe

```js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { service } from '@ember/service';

export default class SomeController extends Controller {
@service media;
Expand All @@ -63,7 +63,7 @@ queries in CSS, instead simply use classes to style the different devices.
In your application.hbs template:

```hbs
<div class="{{media 'classNames'}}">
<div class='{{media "classNames"}}'>
Copy link

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency with other examples in the documentation (lines 54 and 108), consider using single quotes for the helper argument: <div class="{{media 'classNames'}}"> instead of double quotes. This maintains consistency across all media helper usage examples.

Suggested change
<div class='{{media "classNames"}}'>
<div class='{{media 'classNames'}}'>

Copilot uses AI. Check for mistakes.
{{outlet}}
</div>
```
Expand Down Expand Up @@ -103,6 +103,7 @@ When updating this addon, make sure to run the generate command. Choose `no` to
## Updating to 3.x

The major breaking changes to update to 3.x are so far:

- Test helpers are now all covered by `setBreakpoint`
- Calling media breakpoints in templates is now done with a helper. `{{media.isDesktop}}` -> `{{media 'isDesktop'}}`
- Tests run into issues if you have not ported to the new style tests (https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md)
Expand All @@ -116,10 +117,12 @@ Updating to 5.x should be seamless for modern (post-Octane) Ember apps.
If you are using engines and you want to share responsive behaviour between the main application and engine, you must pass the 'media' service to the engine app.

## Testing Helpers

This project provides a single test helper which works in both integration and acceptance tests to assist in testing
content specific to different breakpoints.

### Acceptance Tests

```javascript
...
import { setBreakpoint } from 'ember-responsive/test-support';
Expand All @@ -135,6 +138,7 @@ test('example test', async function (assert) {
```

### Integration Tests

```javascript
...
import { setBreakpoint } from 'ember-responsive/test-support';
Expand All @@ -152,7 +156,7 @@ test('it renders', function (assert) {

### Multiple Breakpoints in Tests

You can set multiple breakpoints to the helper. This is useful if your `breakpoints.js` file defines breakpoints
You can set multiple breakpoints to the helper. This is useful if your `breakpoints.js` file defines breakpoints
that overlap.

```javascript
Expand Down
2 changes: 1 addition & 1 deletion addon/helpers/media.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
import { service } from '@ember/service';

export default class Media extends Helper {
@service media;
Expand Down
2 changes: 1 addition & 1 deletion tests/integration/testing-helpers-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import Component from '@ember/component';
import hbs from 'htmlbars-inline-precompile';
import { inject as service } from '@ember/service';
import { service } from '@ember/service';
import { setBreakpoint } from 'ember-responsive/test-support';

module('Test Helpers | setBreakpoint', function (hooks) {
Expand Down