Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Feedback bar is mis-aligned; transient notices overlap (#39233) 

* Fix the feedback bar alignment to be centered

* Move the transient notices to the top of the feedback bar

* Add changelog file

* Remove feedback bar animation
This commit is contained in:
Maikel David Pérez Gómez 2023-08-03 10:06:45 -04:00 committed by GitHub
parent eb210907e0
commit b5db405265
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-39228 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Feedback bar is mis-aligned; transient notices overlap

62
packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx
View File

@ -200,40 +200,38 @@ export function FeedbackBar( { product }: FeedbackBarProps ) {
<>
{ shouldShowFeedbackBar && (
<div className="woocommerce-product-mvp-ces-footer">
<div className="woocommerce-product-mvp-ces-footer__body">
<Pill>Beta</Pill>
<div className="woocommerce-product-mvp-ces-footer__message">
{ createInterpolateElement(
__(
'How is your experience with the new product form? <span><shareButton>Share feedback</shareButton> or <turnOffButton>turn it off</turnOffButton></span>',
'woocommerce'
<Pill>Beta</Pill>
<div className="woocommerce-product-mvp-ces-footer__message">
{ createInterpolateElement(
__(
'How is your experience with the new product form? <span><shareButton>Share feedback</shareButton> or <turnOffButton>turn it off</turnOffButton></span>',
'woocommerce'
),
{
span: (
<span className="woocommerce-product-mvp-ces-footer__message-buttons" />
),
{
span: (
<span className="woocommerce-product-mvp-ces-footer__message-buttons" />
),
shareButton: (
<Button
variant="link"
onClick={ onShareFeedbackClick }
/>
),
turnOffButton: (
<Button
onClick={ onTurnOffEditorClick }
variant="link"
/>
),
}
) }
</div>
<Button
className="woocommerce-product-mvp-ces-footer__close-button"
icon={ closeSmall }
label={ __( 'Hide this message', 'woocommerce' ) }
onClick={ onHideFeedbackBarClick }
></Button>
shareButton: (
<Button
variant="link"
onClick={ onShareFeedbackClick }
/>
),
turnOffButton: (
<Button
onClick={ onTurnOffEditorClick }
variant="link"
/>
),
}
) }
</div>
<Button
className="woocommerce-product-mvp-ces-footer__close-button"
icon={ closeSmall }
label={ __( 'Hide this message', 'woocommerce' ) }
onClick={ onHideFeedbackBarClick }
></Button>
</div>
) }
</>

44
packages/js/product-editor/src/components/feedback-bar/style.scss
View File

@ -1,38 +1,20 @@
$gutenberg-blue: var(--wp-admin-theme-color);
@keyframes slide-up {
0% {
bottom: -60px;
}
100% {
bottom: 0;
}
}
.woocommerce-product-mvp-ces-footer {
position: fixed;
animation: slide-up 0.5s forwards;
width: 100%;
border-top: 1px solid var(--gutenberg-gray-100, #f0f0f0);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(6px);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
// the left/right padding is set to this to match the padding of
// .block-editor-block-list__layout.is-root-container and
// .editor-styles-wrapper combined
padding: $gap calc(2 * $gap + $gap-small);
gap: $gap;
&__body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
// the left/right padding is set to this to match the padding of
// .block-editor-block-list__layout.is-root-container and
// .editor-styles-wrapper combined
padding: $gap calc(2 * $gap + $gap-small);
gap: $gap;
@include breakpoint(">782px") {
padding: $gap 0;
max-width: 650px;
margin: 0 auto;
}
@include breakpoint(">782px") {
padding: $gap 0;
max-width: 650px;
margin: 0 auto;
}
.woocommerce-pill {