From 589f4c33a6be9946fcf0d37eb9ec26f47c325aff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 14:53:01 +0100 Subject: [PATCH 01/15] add gutenberg component style updates exclusion for numberpicker --- styles/es-gutenberg-component-style-updates.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss index 384c5630f..827cbc266 100644 --- a/styles/es-gutenberg-component-style-updates.scss +++ b/styles/es-gutenberg-component-style-updates.scss @@ -75,7 +75,7 @@ } // Tweak NumberControl to better fit in. -.components-number-control { +.components-number-control:not(.es-number-picker .components-number-control) { .components-input-control__input { padding: 0 0.5rem !important; font-size: 0.78125rem !important; From b3b911fcee4760a3589f05ddfb4a57fb2824ed8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 14:53:09 +0100 Subject: [PATCH 02/15] update utility classes --- styles/es-utility-classes.scss | 98 ++++++++++++++++++++++++---------- 1 file changed, 70 insertions(+), 28 deletions(-) diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index c844410bf..a4f18979f 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -320,7 +320,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-t': ( - 'cssProp': 'border-top', + 'cssProp': 'border-block-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -329,7 +329,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-b': ( - 'cssProp': 'border-bottom', + 'cssProp': 'border-block-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -338,7 +338,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-l': ( - 'cssProp': 'border-left', + 'cssProp': 'border-inline-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -347,7 +347,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-r': ( - 'cssProp': 'border-right', + 'cssProp': 'border-inline-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -392,7 +392,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mt': ( - 'cssProp': 'margin-top', + 'cssProp': 'margin-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -401,7 +401,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mb': ( - 'cssProp': 'margin-bottom', + 'cssProp': 'margin-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -410,7 +410,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'ml': ( - 'cssProp': 'margin-left', + 'cssProp': 'margin-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -419,7 +419,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mr': ( - 'cssProp': 'margin-right', + 'cssProp': 'margin-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -455,7 +455,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pt': ( - 'cssProp': 'padding-top', + 'cssProp': 'padding-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -464,7 +464,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pb': ( - 'cssProp': 'padding-bottom', + 'cssProp': 'padding-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -473,7 +473,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pl': ( - 'cssProp': 'padding-left', + 'cssProp': 'padding-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -482,7 +482,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pr': ( - 'cssProp': 'padding-right', + 'cssProp': 'padding-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -500,7 +500,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'w': ( - 'cssProp': 'width', + 'cssProp': 'inline-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -509,7 +509,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'h': ( - 'cssProp': 'height', + 'cssProp': 'block-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -626,7 +626,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tl': ( - 'cssProp': 'border-top-left-radius', + 'cssProp': 'border-start-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -635,7 +635,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tr': ( - 'cssProp': 'border-top-right-radius', + 'cssProp': 'border-start-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -644,7 +644,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-bl': ( - 'cssProp': 'border-bottom-left-radius', + 'cssProp': 'border-end-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -653,7 +653,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-br': ( - 'cssProp': 'border-bottom-right-radius', + 'cssProp': 'border-end-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -1159,19 +1159,19 @@ $es-utility-props: ( } .es-border-t { - border-top: 1px solid currentColor; + border-block-start: 1px solid currentColor; } .es-border-b { - border-bottom: 1px solid currentColor; + border-block-end: 1px solid currentColor; } .es-border-l { - border-left: 1px solid currentColor; + border-inline-start: 1px solid currentColor; } .es-border-r { - border-right: 1px solid currentColor; + border-inline-end: 1px solid currentColor; } .es-border-x { @@ -1246,6 +1246,49 @@ $es-utility-props: ( } } +// Special 'size' utility class (w + h). +@each $name, $value in $es-spacings { + .es-size-#{$name} { + block-size: #{$value}; + inline-size: #{$value}; + } + + .-es-size-#{$name} { + block-size: -#{$value}; + inline-size: -#{$value}; + } + + .es-size-#{$name}\! { + block-size: #{$value} !important; + inline-size: #{$value} !important; + } + + .-es-size-#{$name}\! { + block-size: -#{$value} !important; + inline-size: -#{$value} !important; + } + + .es-min-size-#{$name} { + min-block-size: #{$value}; + min-inline-size: #{$value}; + } + + .es-min-size-#{$name}\! { + min-block-size: #{$value} !important; + min-inline-size: #{$value} !important; + } + + .es-max-size-#{$name} { + max-block-size: #{$value}; + max-inline-size: #{$value}; + } + + .es-max-size-#{$name}\! { + max-block-size: #{$value} !important; + max-inline-size: #{$value} !important; + } +} + @each $size, $value in $es-square-button-sizes { .es-button-square-#{$size} { width: #{$value} !important; @@ -1282,16 +1325,15 @@ $es-utility-props: ( // Default WP field spacing. .es-has-wp-field-v-space { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-block: 1.5rem; } .es-has-wp-field-b-space { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .es-has-wp-field-t-space { - margin-top: 1.5rem; + margin-block-start: 1.5rem; } // A11y high-visibility outline. @@ -1614,10 +1656,10 @@ $es-utility-props: ( // Helper to disable default Gutenberg field spacing (e.g. for inlining input fields). .es-no-field-spacing { - margin-bottom: 0 !important; + margin-block-end: 0 !important; .components-base-control__field { - margin-bottom: 0 !important; + margin-block-end: 0 !important; } } From a8a9e658bb9b4b86135e92438f70d5ac81d3f876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 14:55:06 +0100 Subject: [PATCH 03/15] make Collapsable disableable --- scripts/components/collapsable/collapsable.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index f6a87028b..7d1b6da86 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -16,6 +16,7 @@ import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshi * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the component classes. * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are kept visible when the component is expanded. + * @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled. * @returns */ export const Collapsable = ({ @@ -32,6 +33,8 @@ export const Collapsable = ({ actions, keepActionsOnExpand = false, + + disabled = false, }) => { const [isOpen, setIsOpen] = useState(false); @@ -60,7 +63,8 @@ export const Collapsable = ({ isOpen && 'is-active es-nested-color-pure-white! es-bg-admin-accent!' )} icon={isOpen ? icons.caretDownFill : icons.caretDown} - label={isOpen ? __('Hide options', 'eightshift-frontend-libs') : __('Show options', 'eightshift-frontend-libs')} + label={isOpen ? __('Close', 'eightshift-frontend-libs') : __('Expand', 'eightshift-frontend-libs')} + disabled={disabled} showTooltip /> From 7ce1958301f507a2c75ee828709058fafb6da996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:03:14 +0100 Subject: [PATCH 04/15] tweak responsive number picker reset button --- .../responsive-number-picker.js | 41 +++++++++---------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index 5a031d205..b4739bcef 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -120,29 +120,25 @@ export const ResponsiveNumberPicker = (props) => { }; const nearestValid = getNearest(); - const parsedValue = parseFloat(inheritCheck(currentValue) ? nearestValid : currentValue); return ( -
- { - const newValue = stringValues ? `${currentValue}` : currentValue; - onChange({ - ...value, - [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, - }); - }} - noBottomSpacing - fixedWidth={fieldWidth} - min={min} - max={max} - step={step} - {...additionalProps} - /> - - {typeof resetButton !== 'undefined' && + { + const newValue = stringValues ? `${currentValue}` : currentValue; + onChange({ + ...value, + [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, + }); + }} + noBottomSpacing + fixedWidth={fieldWidth} + min={min} + max={max} + step={step} + extraButton={typeof resetButton !== 'undefined' &&
+ {...additionalProps} + /> ); })} From 067c3edd7f5afcae1d92223f40c2b0326ddca222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:03:31 +0100 Subject: [PATCH 05/15] update numberpicker --- .../components/number-picker/number-picker.js | 109 +++++++++++------- .../number-picker/number-picker.scss | 43 ++++--- 2 files changed, 93 insertions(+), 59 deletions(-) diff --git a/scripts/components/number-picker/number-picker.js b/scripts/components/number-picker/number-picker.js index 4a2720183..5d13423a9 100644 --- a/scripts/components/number-picker/number-picker.js +++ b/scripts/components/number-picker/number-picker.js @@ -8,28 +8,33 @@ import { classnames } from '../../helpers'; /** * A simple number picker, built on the Gutenberg `NumberControl`. * - * @param {object} props - NumberPicker options. - * @param {Number} [props.min=0] - Minimum allowed value. - * @param {Number} props.max - Maximum allowed value. - * @param {Number} [props.step=1] - Step change. - * @param {Number} props.value - Current value. - * @param {function} [props.onChange] - Function called when the value changes. - * @param {boolean} [props.disabled=false] - If `true`, the component is disabled. - * @param {boolean} [props.noDragToChange=false] - If `true`, the up/down drag to change value is disabled. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.label] - Label to show above component. - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. - * @param {React.Component?} [props.help] - Help to show below the control. - * @param {React.Component?} [props.children] - Content to show. - * @param {string?} [props.additionalClasses] - Classes to add to the control base. - * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. - * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {object?} [props.inputField] - Allows passing raw config data to the `NumberPicker`, e.g. `shiftStep`. - * @param {string?} [props.placeholder] - Placeholder to show inside the NumberPicker. - * @param {Number?} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values. - * + * @param {object} props - `NumberPicker` options. + * @param {Number} [props.min=0] - Minimum allowed value. + * @param {Number} props.max - Maximum allowed value. + * @param {Number} [props.step=1] - Step change. + * @param {Number} props.value - Current value. + * @param {function} [props.onChange] - Function called when the value changes. + * @param {boolean} [props.disabled=false] - If `true`, the component is disabled. + * @param {boolean} [props.noDragToChange=false] - If `true`, the up/down drag to change value is disabled. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.label] - Label to show above component. + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {React.Component?} [props.help] - Help to show below the control. + * @param {React.Component?} [props.children] - Content to show. + * @param {string?} [props.additionalClasses] - Classes to add to the control base. + * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. + * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. + * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. + * @param {object?} [props.inputField] - Allows passing raw config data to the `NumberPicker`, e.g. `shiftStep`. + * @param {string?} [props.placeholder] - Placeholder to show inside the NumberPicker. + * @param {Number?} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values. + * @param {string|React.Component} [props.prefix] - If passed, displayed before input field. + * @param {string|React.Component} [props.suffix] - If passed, displayed after the input field. + * @param {string} [props.prefixClass] - If passed, replaces the prefix default class. + * @param {string} [props.suffixClass] - If passed, replaces the suffix default class. + * @param {React.Component?} [props.extraButton] - If passed, the control is displayed to the right of the spinner buttons. + * @param {boolean?} [props.noExtraButtonSeparator=false] - If passed, and the `extraButton` is added, the separator between the spinner buttons and the extra button is hidden. */ export const NumberPicker = (props) => { const { @@ -58,8 +63,20 @@ export const NumberPicker = (props) => { placeholder, fixedWidth = null, + + prefix, + suffix, + + prefixClass, + suffixClass, + + extraButton, + noExtraButtonSeparator = false, } = props; + const spinnerButtonClass = 'es-w-4! es-h-3! es-min-w-4! es-rounded-1! es-button-icon-12 es-p-0! es-hover-bg-cool-gray-100! es-transition'; + const prefixSuffixDefaultClass = 'es-user-select-none es-color-cool-gray-450'; + return ( { reducedBottomSpacing={reducedBottomSpacing} additionalClasses={classnames('es-number-picker', additionalClasses)} > -
+
+ {prefix && {prefix}} + { shiftStep={(typeof inputField === 'object' && inputField?.shiftStep > 0) ? inputField.shiftStep : 10} isShiftStepEnabled spinControls='none' - className='es-number-picker-input-value' - style={fixedWidth ? { width: `calc(1rem ${min < 0 ? '+ 0.5rem ' : ''} + ${fixedWidth} * 1ch)` } : {}} + className='es-number-picker-input es-m-0-bcf! es-p-0-bcf! es-m-0! es-p-0! es-border-none!' placeholder={placeholder} __nextHasNoMarginBottom /> -
+ {suffix && {suffix}} + +
+ + {extraButton && !noExtraButtonSeparator && +
+ } + + {extraButton && +
+ {extraButton} +
+ }
); diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss index 106f7963b..a13df2956 100644 --- a/scripts/components/number-picker/number-picker.scss +++ b/scripts/components/number-picker/number-picker.scss @@ -1,26 +1,35 @@ +// stylelint-disable declaration-no-important .es-number-picker { - .es-number-picker-input-value { - .components-input-control__input { - font-variant-numeric: tabular-nums; - - // stylelint-disable-next-line declaration-no-important - min-height: 2rem !important; + .es-number-picker-container { + &:has(.components-input-control__input:focus-visible) { + box-shadow: 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; } + } + .es-number-picker-input { .components-input-control__backdrop { - // stylelint-disable declaration-no-important - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - // stylelint-enable declaration-no-important + display: none !important; } - } - .components-button > svg { - transition: { - // stylelint-disable-next-line declaration-no-important - property: color, background-color, border-color, text-decoration-color, fill, stroke !important; - timing-function: var(--es-ease-out-cubic); - duration: 0.3s; + .components-input-control__container { + border: none !important; + box-shadow: none !important; + background: none !important; + + min-height: auto !important; + } + + .components-input-control__input { + appearance: none; + + margin: 0 !important; + padding: 0 !important; + min-height: auto !important; + + border: none !important; + box-shadow: none !important; + + width: var(--es-number-input-width) !important; } } } From 2878a69aad6fee7ac8069ffbd212d6c9eed86cbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:04:13 +0100 Subject: [PATCH 06/15] rename icontoggle to toggle --- scripts/components/index.js | 2 +- .../{icon-toggle => toggle}/docs/readme.mdx | 4 ++-- .../{icon-toggle => toggle}/docs/story.js | 18 +++++++++--------- .../icon-toggle.js => toggle/toggle.js} | 15 +++++++++++---- scripts/index.js | 2 +- 5 files changed, 24 insertions(+), 17 deletions(-) rename scripts/components/{icon-toggle => toggle}/docs/readme.mdx (94%) rename scripts/components/{icon-toggle => toggle}/docs/story.js (92%) rename scripts/components/{icon-toggle/icon-toggle.js => toggle/toggle.js} (91%) diff --git a/scripts/components/index.js b/scripts/components/index.js index f6df3d10c..0756b95f4 100644 --- a/scripts/components/index.js +++ b/scripts/components/index.js @@ -26,7 +26,7 @@ export { RangeSlider } from './custom-slider/custom-range-slider'; export { FancyDivider } from './fancy-divider/fancy-divider'; export { HelpModal } from './help-modal/help-modal'; export { IconLabel } from './icon-label/icon-label'; -export { IconToggle } from './icon-toggle/icon-toggle'; +export { Toggle, IconToggle } from './toggle/toggle'; export { Notification } from './inline-notification/inline-notification'; export { LinkInput, LinkEditComponent } from './link-input/link-input'; export { MatrixAlignControl } from './matrix-align-control/matrix-align-control'; diff --git a/scripts/components/icon-toggle/docs/readme.mdx b/scripts/components/toggle/docs/readme.mdx similarity index 94% rename from scripts/components/icon-toggle/docs/readme.mdx rename to scripts/components/toggle/docs/readme.mdx index 370763631..fa6fe4529 100644 --- a/scripts/components/icon-toggle/docs/readme.mdx +++ b/scripts/components/toggle/docs/readme.mdx @@ -3,14 +3,14 @@ import * as ComponentData from './story.js'; -# IconToggle +# Toggle A toggle/checkbox control with an optional icon. ## Usage ```jsx - { @@ -17,7 +17,7 @@ export const component = () => {
- { - { - { - { - { - { - ); }; + +/** + * Custom toggle control. + * + * @deprecated since 9.5.0 - renamed to `Toggle` + */ +export const IconToggle = (props) => ; diff --git a/scripts/index.js b/scripts/index.js index 0d21bd420..323627b1d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,7 +27,7 @@ export { RangeSlider } from './components/custom-slider/custom-range-slider'; export { FancyDivider } from './components/fancy-divider/fancy-divider'; export { HelpModal } from './components/help-modal/help-modal'; export { IconLabel } from './components/icon-label/icon-label'; -export { IconToggle } from './components/icon-toggle/icon-toggle'; +export { Toggle, IconToggle } from './components/toggle/toggle'; export { Notification } from './components/inline-notification/inline-notification'; export { LinkInput, LinkEditComponent } from './components/link-input/link-input'; export { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; From 0347849adf279051a4a81170930e64a30703e141 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:49:24 +0100 Subject: [PATCH 07/15] update icons --- scripts/editor/icons/icons.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js index df75c0cf2..ef8deebcc 100644 --- a/scripts/editor/icons/icons.js +++ b/scripts/editor/icons/icons.js @@ -724,8 +724,8 @@ export const icons = { textSizeAlt: , textLarger: , textSmaller: , - extract: , - extractAlt: , + extract: , + extractAlt: , tree: , treeAlt: , treeAlt2: , @@ -745,6 +745,7 @@ export const icons = { officeBuilding: , officeBuildings: , box: , + hoverBackgroundGlow: , }; /** From 22e11bba37b66c43cf80feda54d630af2b24ce5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:49:38 +0100 Subject: [PATCH 08/15] update dependencies --- package.json | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 20a644e36..dad607cc7 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,10 @@ "@infinumjs/eslint-config-react-js": "^3.5.0", "@stylistic/stylelint-plugin": "^2.1.0", "@uidotdev/usehooks": "^2.4.1", - "@wordpress/api-fetch": "^6.48.0", - "@wordpress/block-editor": "^12.19.1", - "@wordpress/dependency-extraction-webpack-plugin": "^5.2.0", - "@wordpress/dom-ready": "^3.51.0", + "@wordpress/api-fetch": "^6.49.0", + "@wordpress/block-editor": "^12.20.0", + "@wordpress/dependency-extraction-webpack-plugin": "^5.3.0", + "@wordpress/dom-ready": "^3.52.0", "autoprefixer": "^10.4.17", "babel-loader": "^9.1.3", "browser-sync": "^3.0.2", @@ -64,7 +64,7 @@ "crypto-browserify": "^3.12.0", "css-loader": "^6.10.0", "css-minimizer-webpack-plugin": "^6.0.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -78,9 +78,9 @@ "just-kebab-case": "^4.2.0", "just-throttle": "^4.2.0", "media-blender": "^2.1.0", - "mini-css-extract-plugin": "^2.8.0", + "mini-css-extract-plugin": "^2.8.1", "postcss": "^8.4.35", - "postcss-loader": "^8.1.0", + "postcss-loader": "^8.1.1", "postcss-scss": "^4.0.9", "promisify-child-process": "^4.1.2", "raw-loader": "^4.0.2", @@ -91,9 +91,9 @@ "react-html-parser": "^2.0.2", "react-select": "^5.8.0", "regenerator-runtime": "^0.14.1", - "sass": "^1.71.0", - "sass-loader": "^14.1.0", - "storybook": "^7.6.16", + "sass": "^1.71.1", + "sass-loader": "^14.1.1", + "storybook": "^7.6.17", "stream-browserify": "^3.0.0", "style-loader": "^3.3.4", "stylelint": "^16.2.1", @@ -106,7 +106,7 @@ "webpack-merge": "^5.10.0" }, "devDependencies": { - "@babel/preset-env": "^7.23.9", + "@babel/preset-env": "^7.24.0", "@eightshift/storybook": "^1.6.1", "@jest/globals": "^29.7.0", "babel-jest": "^29.7.0", @@ -116,11 +116,11 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^15.2.2", "micromodal": "^0.4.10", - "ol": "^8.2.0", - "ol-mapbox-style": "^12.2.0", + "ol": "^9.0.0", + "ol-mapbox-style": "^12.2.1", "react-test-renderer": "^18.2.0", "replace-in-file": "^7.1.0", - "swiper": "^11.0.6" + "swiper": "^11.0.7" }, "sideEffects": false, "lint-staged": { From 1b842b9f172e86809a634028269111814dc47049 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:55:29 +0100 Subject: [PATCH 09/15] update colorpickercomponent to allow new slots --- .../color-picker-component.js | 19 ++++++++++++++----- .../color-picker-component.scss | 13 ------------- styles/es-component-styles.scss | 1 - 3 files changed, 14 insertions(+), 19 deletions(-) delete mode 100644 scripts/components/color-picker-component/color-picker-component.scss diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index 55d6287b5..806c66216 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -37,6 +37,7 @@ import { ColorPalette } from '../color-palette-custom/color-palette-custom'; * @param {React.Component?} [props.buttonIconOverride] - If provided, overrides the default trigger button icon. * @param {object?} [props.additionalButtonArgs] - Allows passing additional arguments to the trigger button. * @param {object?} [props.additionalColorPaletteArgs] - Allows passing additional arguments to the color palette component. + * @param {React.Component?} [props.additionalControls] - Allows passing custom controls to the bottom of ColorPicker's popover. */ export const ColorPicker = (props) => { const { @@ -72,6 +73,8 @@ export const ColorPicker = (props) => { buttonIconOverride, additionalButtonArgs, additionalColorPaletteArgs, + + additionalControls, } = props; let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); @@ -179,8 +182,8 @@ export const ColorPicker = (props) => { allowCloseFromChildren noArrow > -
-
+
+

{pickerPopupTitle ?? defaultPopupTitle}

-
+
{
-
+
{ />
+ {additionalControls && +
+ {additionalControls} +
+ } + {canReset && -
+