-
Notifications
You must be signed in to change notification settings - Fork 44
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
Generalize mocking of states in dummy pages #314
Changes from all commits
6cef50b
479aea4
5420f94
2ed672e
ddfc49a
a3ad600
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,8 @@ | |
|
||
// default focus for browsers that still rely on ":focus" | ||
&:focus, | ||
&.is-focus { | ||
&.is-focus, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. once the changes done across all the pages, I'll remove the |
||
&.mock-focus { | ||
box-shadow: var(--token-focus-ring-#{$color}-box-shadow); | ||
} | ||
// undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles | ||
|
@@ -21,7 +22,8 @@ | |
} | ||
// remove the focus ring on "active + focused" state (by design) | ||
&:focus:active, | ||
&.is-focus.is-active { | ||
&.is-focus.is-active, | ||
&.mock-focus.is-active { | ||
box-shadow: none; | ||
} | ||
} | ||
|
@@ -45,7 +47,8 @@ | |
|
||
// default focus for browsers that still rely on ":focus" | ||
&:focus, | ||
&.is-focus { | ||
&.is-focus, | ||
&.mock-focus { | ||
&::before { | ||
box-shadow: var(--token-focus-ring-#{$color}-box-shadow); | ||
} | ||
|
@@ -64,7 +67,8 @@ | |
} | ||
// remove the focus ring on "active + focused" state (by design) | ||
&:focus:active, | ||
&.is-focus.is-active { | ||
&.is-focus.is-active, | ||
&.mock-focus.is-active { | ||
&::before { | ||
box-shadow: none; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import Controller from '@ember/controller'; | ||
import { inject as service } from '@ember/service'; | ||
import { scheduleOnce } from '@ember/runloop'; | ||
|
||
function replaceMockStates() { | ||
document.querySelectorAll('[mock-state-value]').forEach((element) => { | ||
let targets; | ||
if (element.attributes['mock-state-selector']) { | ||
targets = element.querySelectorAll( | ||
element.attributes['mock-state-selector'].value | ||
); | ||
} else { | ||
targets = [element]; | ||
} | ||
const states = element.attributes['mock-state-value'].value.split('+'); | ||
const classes = states.map((state) => `mock-${state.trim()}`); | ||
targets.forEach((target) => { | ||
target.classList.add(...classes); | ||
}); | ||
}); | ||
} | ||
export default class ComponentsController extends Controller { | ||
@service router; | ||
|
||
constructor() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this all feels a bit magical to me but I also don't have a more idiomatic suggestion springing to mind. I think this is ok for "scrappy" but something we should at least be remembering if we run into unforeseen issues in the future. |
||
super(...arguments); | ||
this.router.on('routeDidChange', this, 'routeDidChange'); | ||
} | ||
|
||
routeDidChange() { | ||
scheduleOnce('afterRender', this, replaceMockStates); | ||
} | ||
|
||
willDestroy() { | ||
this.router.off('routeDidChange', this, 'routeDidChange'); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -344,7 +344,13 @@ | |
<div> | ||
<span class="dummy-text-small">{{capitalize size}}/{{state}}:</span> | ||
<br /> | ||
<Hds::Button @icon="plus" @text={{capitalize state}} @size={{size}} @color={{color}} class="is-{{state}}" /> | ||
<Hds::Button | ||
@icon="plus" | ||
@text={{capitalize state}} | ||
@size={{size}} | ||
@color={{color}} | ||
mock-state-value={{state}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. here you can see how one of these mock states is declared on a component, but only in the dummy documentation page |
||
/> | ||
</div> | ||
{{/each}} | ||
{{/each}} | ||
|
@@ -358,7 +364,7 @@ | |
@text={{capitalize state}} | ||
@color={{color}} | ||
@isFullWidth={{true}} | ||
class="is-{{state}}" | ||
mock-state-value={{state}} | ||
/> | ||
</div> | ||
{{/each}} | ||
|
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.
in the future, this class selectors could be removed using a css post-processor