Skip to content

Commit

Permalink
Merge pull request #3019 from woocommerce/PCP-4026-implement-the-save…
Browse files Browse the repository at this point in the history
…-button-logic

Implement the "Save" button logic (4026)
  • Loading branch information
stracker-phil authored Jan 24, 2025
2 parents 143e089 + d2cab43 commit f5be748
Show file tree
Hide file tree
Showing 135 changed files with 2,274 additions and 2,223 deletions.
2 changes: 1 addition & 1 deletion modules/ppcp-settings/resources/css/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

@mixin disabled-state($control-type) {
.components-#{$control-type}-control.is-disabled {
.components-#{$control-type}-control.ppcp--is-disabled {
.components-#{$control-type}-control__input,
.components-#{$control-type}-control__label,
.components-base-control__help {
Expand Down
10 changes: 10 additions & 0 deletions modules/ppcp-settings/resources/css/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $color-text-tertiary: #505050;
$color-text-text: #070707;
$color-border: #AEAEAE;
$color-divider: #F0F0F0;
$color-error-red: #cc1818;

$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -61,4 +62,13 @@ $card-vertical-gap: 48px;
--color-text-main: #{$color-text-text};
--color-text-teriary: #{$color-text-tertiary};
--color-text-description: #{$color-gray-700};
--color-error: #{$color-error-red};

// Default settings-block theme.
--block-item-gap: 16px;
--block-header-gap: 6px;
--block-separator-gap: 32px;
--block-separator-size: 1px;
--block-separator-color: var(--color-gray-200);
--block-action-gap: 16px; // Space between two consecutive action blocks.
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import './reusable-components/badge-box';
@import './reusable-components/busy-state';
@import './reusable-components/button';
@import './reusable-components/elements';
@import './reusable-components/fields';
@import './reusable-components/hstack';
@import './reusable-components/navigation';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,46 @@
margin-left: auto;
margin-right: auto;

&__toggler {
.ppcp--toggler {
display: block;
cursor: pointer;

background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 24px auto;
text-align: var(--accordion-text-align, center);
width: var(--accordion-width, auto);
margin: var(--accordion-toggler-gap, 24px) auto;
}

&__title-wrapper {
@include font(14, 32, 450);
color: $color-gray-900;

.ppcp--title-wrapper {
display: flex;
align-items: center;
gap: 16px;
}

&__content {
margin: 24px 0 0;
.ppcp--accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out, margin 0.2s ease-out;
opacity: 0;
margin: 0;

> .ppcp--content {
overflow: hidden;
}

&.ppcp--is-open {
grid-template-rows: 1fr;
opacity: 1;
margin: 24px 0 0;
transition: grid-template-rows 0.3s ease-in, opacity 0.3s ease-in, margin 0.3s ease-in;

> .ppcp--content {
// Show the overflow, since the focus-outline can extend outside the content div.
overflow: visible;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/**
* General styling for reusable components in the "Elements" folder.
*/

.ppcp--header {
display: flex;
flex-direction: column;
gap: 6px;

&:not(:last-child) {
padding-bottom: var(--block-header-gap, 6px);
}
}

.ppcp--title {
@include font(11, 22, 600);
color: var(--color-text-title);
display: block;
text-transform: uppercase;

&.ppcp--no-caps {
@include font(14, 16, 600);
text-transform: none;
}

&.ppcp--big {
@include font(16, 20, 600);
}

.ppcp-r-title-badge {
text-transform: none;
margin-left: 6px;
}
}

.ppcp--title-extra {
@include font(13, 20, 400);
color: var(--color-text-teriary);
text-transform: none;
margin-left: 5px;
}

.ppcp--title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}

.ppcp--description {
@include font(13, 20, 400);
margin: 0;
color: var(--color-text-description);

&:not(:last-child) {
padding-bottom: 1em;
}

a {
color: var(--color-blueberry);
}

strong {
color: var(--color-gray-800);
}
}

.ppcp--action {
& + .ppcp--action {
margin-top: var(--block-action-gap, 16px);
}
}
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
.components-flex {
display: flex;
-webkit-box-align: stretch;
align-items: stretch;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
.ppcp-r-app {
.components-flex {
display: flex;
-webkit-box-align: stretch;
align-items: stretch;
-webkit-box-pack: center;

.components-h-stack {
flex-direction: row;
justify-content: flex-start;
gap: 32px;
.components-h-stack {
flex-direction: row;
justify-content: flex-start;
gap: 32px;
}

.components-v-stack {
flex-direction: column;
justify-content: center;
}

// Fix layout for checkboxes inside a flex-stack.
.components-checkbox-control > .components-base-control__field > .components-flex {
flex-direction: row;
gap: 12px;
}
}

// Fix layout for checkboxes inside a flex-stack.
.components-checkbox-control >.components-base-control__field > .components-flex {
.ppcp--horizontal {
flex-direction: row;
gap: 12px;
align-items: center;
justify-content: space-between;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@
@include font(16, 24, 600);
color: var(--color-text);

.title {
.ppcp--nav-title {
margin-left: 18px;
}

.big {
.ppcp--big {
@include font(20, 28, 400);
}
}
Expand All @@ -79,7 +79,7 @@
}
}

&.is-scrolled {
&.ppcp--is-scrolled {
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
}

Expand All @@ -90,20 +90,20 @@
row-gap: 8px;
white-space: nowrap;

&--right {
.ppcp-r-navigation--right {
position: absolute;
right: 10px;
z-index: 10;
background: var(--ppcp-color-app-bg);
box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
}

&--progress-bar {
.ppcp-r-navigation--progress-bar {
height: 2px;
}

.components-button.is-title {
.title {
.ppcp--title {
margin-left: 4px;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
padding: 24px 16px 24px 16px;


&.selected {
&.ppcp--selected {
border-color: $color-blueberry;
outline-color: $color-blueberry;
box-shadow: $shadow-selection-box;
Expand Down
Loading

0 comments on commit f5be748

Please sign in to comment.