Skip to content

Commit

Permalink
fix: address PR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikemai2awesome
mikemai2awesome committed Feb 6, 2020
1 parent 38b4eae commit 6f35b9b
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 84 deletions.
152 changes: 76 additions & 76 deletions packages/components/bolt-popover/__tests__/__snapshots__/popover.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ exports[`<bolt-popover> Component UUID of the popover 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-custom-unique-id"
>
<span slot="content"
id="js-bolt-popover-custom-unique-id"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-custom-unique-id"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -53,10 +53,10 @@ exports[`<bolt-popover> Component basic usage 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -95,10 +95,10 @@ exports[`<bolt-popover> Component content placement: auto 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -137,10 +137,10 @@ exports[`<bolt-popover> Component content placement: bottom 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -179,10 +179,10 @@ exports[`<bolt-popover> Component content placement: bottom-end 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -221,10 +221,10 @@ exports[`<bolt-popover> Component content placement: bottom-start 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -263,10 +263,10 @@ exports[`<bolt-popover> Component content placement: left 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -305,10 +305,10 @@ exports[`<bolt-popover> Component content placement: left-end 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -347,10 +347,10 @@ exports[`<bolt-popover> Component content placement: left-start 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -389,10 +389,10 @@ exports[`<bolt-popover> Component content placement: right 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -431,10 +431,10 @@ exports[`<bolt-popover> Component content placement: right-end 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -473,10 +473,10 @@ exports[`<bolt-popover> Component content placement: right-start 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -515,10 +515,10 @@ exports[`<bolt-popover> Component content placement: top 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -557,10 +557,10 @@ exports[`<bolt-popover> Component content placement: top-end 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -599,10 +599,10 @@ exports[`<bolt-popover> Component content placement: top-start 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -641,10 +641,10 @@ exports[`<bolt-popover> Component content spacing: medium 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -683,10 +683,10 @@ exports[`<bolt-popover> Component content spacing: none 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -725,10 +725,10 @@ exports[`<bolt-popover> Component content spacing: small 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down Expand Up @@ -767,10 +767,10 @@ exports[`<bolt-popover> Component content spacing: xsmall 1`] = `
</bolt-button>
</a>
</replace-with-grandchildren>
<span slot="content">
<replace-with-grandchildren class="c-bolt-popover__content"
id="js-bolt-popover-12345"
>
<span slot="content"
id="js-bolt-popover-12345"
>
<replace-with-grandchildren class="c-bolt-popover__content">
<span class="c-bolt-popover__bubble">
<a href="#js-bolt-popover-trigger-12345"
class="c-bolt-popover__nojs-close"
Expand Down
21 changes: 15 additions & 6 deletions packages/components/bolt-popover/src/popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,15 @@ $bolt-popover-transition: $bolt-transition-timing
* NoJS fallback trigger
*/
.c-bolt-popover__nojs-trigger {
position: relative;
}

.c-bolt-popover__nojs-trigger-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: inherit;
text-decoration: none;
}
Expand All @@ -61,7 +70,7 @@ $bolt-popover-transition: $bolt-transition-timing
transition: opacity $bolt-popover-transition;

.c-bolt-popover.is-expanded &,
bolt-popover:not([ready]) &:target {
bolt-popover:not([ready]) [slot='content']:target & {
visibility: visible;
opacity: 1;
}
Expand All @@ -71,10 +80,10 @@ $bolt-popover-transition: $bolt-transition-timing
top: 100%;
left: 50%;
transform: translate3d(-50%, #{bolt-v-spacing(xxsmall)}, 0);
}

&:target {
display: block;
}
bolt-popover:not([ready]) [slot='content']:target & {
display: block;
}
}

Expand All @@ -91,11 +100,12 @@ $bolt-popover-transition: $bolt-transition-timing
width: 1.25rem;
height: 1.25rem;
margin-bottom: bolt-v-spacing(xsmall);
margin-left: auto;
color: bolt-theme(link);
line-height: 1;
text-align: center;
font-size: 1rem;
border-bottom-right-radius: bolt-border-radius(large);
border-bottom-left-radius: bolt-border-radius(large);

&:hover,
&:focus {
Expand Down Expand Up @@ -246,7 +256,6 @@ $bolt-popover-transition: $bolt-transition-timing
.c-bolt-popover__nojs-close {
margin-top: bolt-v-spacing(#{$spacing-value-name}) * -1;
margin-right: bolt-spacing(#{$spacing-value-name}) * -1;
margin-left: bolt-spacing(#{$spacing-value-name}) * -1;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/bolt-popover/src/popover.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
</replace-with-grandchildren>
{% endif %}
{% if content %}
<span slot="content">
<replace-with-grandchildren class="{{ "#{base_class}__content" }}" id="{{ content_id }}">
<span slot="content" id="{{ content_id }}">
<replace-with-grandchildren class="{{ "#{base_class}__content" }}">
<span class="{{ "#{base_class}__bubble" }}">
<a href="#{{ trigger_id }}" class="{{ "#{base_class}__nojs-close" }}">
<span aria-hidden="true">&times;</span>
Expand Down

0 comments on commit 6f35b9b

Please sign in to comment.