Skip to content
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.

Sign up for GitHub

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

Release 9.5.0 #803

Merged
merged 15 commits into from
Feb 29, 2024
Merged

Release 9.5.0 #803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
589f4c3
add gutenberg component style updates exclusion for numberpicker
goranalkovic-infinum Feb 28, 2024
b3b911f
update utility classes
goranalkovic-infinum Feb 28, 2024
a8a9e65
make Collapsable disableable
goranalkovic-infinum Feb 28, 2024
7ce1958
tweak responsive number picker reset button
goranalkovic-infinum Feb 28, 2024
067c3ed
update numberpicker
goranalkovic-infinum Feb 28, 2024
2878a69
rename icontoggle to toggle
goranalkovic-infinum Feb 28, 2024
0347849
update icons
goranalkovic-infinum Feb 28, 2024
22e11bb
update dependencies
goranalkovic-infinum Feb 28, 2024
1b842b9
update colorpickercomponent to allow new slots
goranalkovic-infinum Feb 28, 2024
9e662ae
update toggleOff icon
goranalkovic-infinum Feb 28, 2024
3bcb863
remove negative es-size classes
goranalkovic-infinum Feb 28, 2024
28471c1
fix collapsable docblock
goranalkovic-infinum Feb 28, 2024
f266203
update collapsable logic
goranalkovic-infinum Feb 28, 2024
8bf9b23
update changelog
goranalkovic-infinum Feb 28, 2024
aa65873
nest classes in number picker (before kancijan)
goranalkovic-infinum Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,26 @@ All notable changes to this project will be documented in this file.

This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).

## [9.5.0] - 2024-02-21
## [9.5.0] - 2024-02-29

### Added
- New `es-size`, `es-min-size`, and `es-max-size` (+ `-nested` variants) utility classes for setting height and width at once
- New `prefix`, `suffix`, `extraButton`, and `noExtraButtonSeparator` props in `NumberPicker`
- `Collapsable` now has a `disabled` prop to disable the expand/collapse button
- 1 new UI icon

### Updated
- `NumberPicker` has been completely updated visually
- `ResponsiveNumberPicker` now better visually integrates the reset button
- Fixed block renaming (due to recent Gutenberg changes)
- `LinkInput` should now pop the suggestion panel only when focused into the input field
- Fixed typo in `MultiSelect` story
- Tweaked Gutenberg override classes for `NumberControl` so they don't override FE libs `NumberPicker`
- Utility classes now use logical properties for paddings, margins, borders, widths, and heights
- `IconToggle` is now `Toggle`, but the previous name will also work (for now)
- Refreshed 3 UI icons
- Updated dependencies
- `ColorPicker` now has a slot for additional controls

## [9.4.2] - 2024-02-21

Expand Down
28 changes: 14 additions & 14 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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": {
Expand Down
11 changes: 9 additions & 2 deletions scripts/components/collapsable/collapsable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +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.
* @returns
* @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled.
*/
export const Collapsable = ({
icon,
Expand All @@ -32,9 +32,15 @@ export const Collapsable = ({
actions,

keepActionsOnExpand = false,

disabled = false,
}) => {
const [isOpen, setIsOpen] = useState(false);

if (disabled && isOpen) {
setIsOpen(false);
}

return (
<Control
icon={icon}
Expand All @@ -60,7 +66,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
/>
</div>
Expand Down
19 changes: 14 additions & 5 deletions scripts/components/color-picker-component/color-picker-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -72,6 +73,8 @@ export const ColorPicker = (props) => {
buttonIconOverride,
additionalButtonArgs,
additionalColorPaletteArgs,

additionalControls,
} = props;

let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs');
Expand Down Expand Up @@ -179,8 +182,8 @@ export const ColorPicker = (props) => {
allowCloseFromChildren
noArrow
>
<div className='es-min-w-96!'>
<div className='es-h-between es-p-3'>
<div className='es-min-w-84!'>
<div className='es-h-between es-p-2'>
<h4 className='es-m-0'>{pickerPopupTitle ?? defaultPopupTitle}</h4>

<Button
Expand All @@ -190,7 +193,7 @@ export const ColorPicker = (props) => {
/>
</div>

<div className='es-h-spaced es-px-3 es-pb-3 es-mb-3 es-border-b-cool-gray-300 es-w-full'>
<div className='es-h-spaced es-px-2 es-pb-2 es-mb-2 es-border-b-cool-gray-300 es-w-full'>
<ColorSwatch
color={currentColor?.color ?? 'es-undefined'}
additionalClasses='es-w-24 es-h-12 es-rounded-1.5!'
Expand All @@ -207,7 +210,7 @@ export const ColorPicker = (props) => {
</div>
</div>

<div className={classnames('es-px-3', !canReset && 'es-pb-3')}>
<div className={classnames('es-px-2', !canReset && 'es-pb-2')}>
<ColorPalette
colors={colors}
value={value}
Expand All @@ -221,8 +224,14 @@ export const ColorPicker = (props) => {
/>
</div>

{additionalControls &&
<div className='es-p-2 es-mt-2 es-border-t-cool-gray-300'>
{additionalControls}
</div>
}

{canReset &&
<div className='es-p-1 es-mt-3 es-border-t-cool-gray-300'>
<div className='es-p-1 es-mt-2 es-border-t-cool-gray-300'>
<Button
disabled={disabled}
onClick={() => onChange(undefined)}
Expand Down
13 changes: 0 additions & 13 deletions scripts/components/color-picker-component/color-picker-component.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion scripts/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
109 changes: 67 additions & 42 deletions scripts/components/number-picker/number-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

The executed script aimed to verify the presence of specific CSS classes within the number-picker.scss file by searching for each class individually. The output clearly indicates that none of the specified classes were found in the number-picker.scss file. This result suggests that the CSS classes defined in the spinnerButtonClass variable are not included in the component's stylesheet as expected. Therefore, this could potentially lead to styling issues if these classes are essential for the component's appearance and functionality but are not defined elsewhere in the project's stylesheets.

Given the evidence from the script's output, it is appropriate to conclude that the review comment is verified, indicating a potential issue with the styling consistency and centralization for the spinner buttons of the number-picker component.

Analysis chain

The spinnerButtonClass variable defines a set of CSS classes for the spinner buttons. It's good practice to keep styling consistent and centralized. However, ensure that these classes are defined in a stylesheet that is loaded with this component to avoid styling issues.

Scripts Executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify that the defined CSS classes for spinnerButtonClass are included in the component's stylesheet
fd 'number-picker\.scss' --exec grep -- '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'

Length of output: 152

Script:

#!/bin/bash
# Break down the search to look for key individual classes within the number-picker.scss file
classes=("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")
file=$(fd 'number-picker\.scss')

for class in "${classes[@]}"; do
    grep -q "$class" "$file" && echo "Found $class in $file" || echo "Did not find $class in $file"
done

Length of output: 2466


return (
<Control
icon={icon}
Expand All @@ -72,7 +89,16 @@ export const NumberPicker = (props) => {
reducedBottomSpacing={reducedBottomSpacing}
additionalClasses={classnames('es-number-picker', additionalClasses)}
>
<div className={classnames('es-display-flex es-items-center es-h-8', label && !inlineLabel && '-es-mt-1')}>
<div
className={classnames(
// eslint-disable-next-line max-len
'es-number-picker-container es-display-flex es-items-center es-gap-0.25 es-h-9 es-border-cool-gray-400 es-rounded-1.5 es-py-0.5 es-pl-1.5 es-pr-0.5 es-transition',
label && !inlineLabel && '-es-mt-1'
)}
style={fixedWidth && { '--es-number-input-width': `calc(${min < 0 ? '0.75ch + ' : ''}${fixedWidth} * 1ch)` }}
>
{prefix && <span className={classnames('es-mr-0.5', prefixClass ?? prefixSuffixDefaultClass)}>{prefix}</span>}

<NumberControl
min={min}
max={max}
Expand All @@ -85,15 +111,16 @@ export const NumberPicker = (props) => {
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
/>

<div className='es-display-flex es-flex-col es-h-full es-has-enhanced-contrast-icon'>
{suffix && <span className={classnames('es-mr-0.5', suffixClass ?? prefixSuffixDefaultClass)}>{suffix}</span>}

<div className='es-display-flex es-flex-col'>
<Button
icon={icons.chevronUp}
icon={icons.caretUpFill}
aria-label={__('Increment', 'eightshift-frontend-libs')}
onClick={() => {
if (typeof value === 'undefined' || value?.length < 1) {
Expand All @@ -103,17 +130,11 @@ export const NumberPicker = (props) => {

onChange(Math.min(parseFloat(value) + step), max);
}}
className={classnames(
// eslint-disable-next-line max-len
'es-w-4! es-min-w-4! es-rounded-0! es-rounded-tr-0.75! es-button-icon-10 es-border-y-cool-gray-400! es-border-r-cool-gray-400! es-p-0!',
value >= max
? 'es-opacity-100! es-nested-color-cool-gray-100!'
: 'es-nested-color-cool-gray-700! es-active-bg-cool-gray-50! es-active-nested-color-admin-accent!'
)}
className={classnames(spinnerButtonClass, !(disabled || value >= max) && 'es-nested-color-cool-gray-500')}
disabled={disabled || value >= max}
/>
<Button
icon={icons.chevronDown}
icon={icons.caretDownFill}
aria-label={__('Decrement', 'eightshift-frontend-libs')}
onClick={() => {
if (typeof value === 'undefined' || value?.length < 1) {
Expand All @@ -123,16 +144,20 @@ export const NumberPicker = (props) => {

onChange(Math.max(parseFloat(value) - step, min));
}}
className={classnames(
// eslint-disable-next-line max-len
'es-w-4! es-min-w-4! es-rounded-0! es-rounded-br-0.75! es-button-icon-10 es-border-b-cool-gray-400! es-border-r-cool-gray-400! es-p-0!',
value <= min
? 'es-opacity-100! es-nested-color-cool-gray-100!'
: 'es-nested-color-cool-gray-700! es-active-bg-cool-gray-50! es-active-nested-color-admin-accent!'
)}
className={classnames(spinnerButtonClass, !(disabled || value <= min) && 'es-nested-color-cool-gray-500')}
disabled={disabled || value <= min}
/>
</div>

{extraButton && !noExtraButtonSeparator &&
<div className='es-w-px es-h-9 -es-my-1 es-ml-0.5 es-bg-cool-gray-400' />
}

{extraButton &&
<div className='es-h-spaced es-px-0.5'>
{extraButton}
</div>
}
</div>
</Control>
);
Expand Down
Loading
Loading