fix: allow AdvancedRangeControl to set custom onReset

Author: Arukuen

src/components/advanced-range-control/editor.scss

@@ -69,3 +69,7 @@
 .stk-range-control--with-marks.stk-range-control--mark-mode .components-range-control__wrapper {
 	margin-inline-end: 8px;
 }
+
+div.components-base-control.stk-preset-controls {
+	flex-grow: 1;
+}

src/components/advanced-range-control/index.js

@@ -121,6 +121,10 @@ const AdvancedRangeControl = props => {
 
 		// On reset, allow overriding the value.
 		if ( newValue === '' ) {
+			// Reset should also change from mark mode
+			if ( isMarkMode ) {
+				setIsMarkMode( false )
+			}
 			const overrideValue = props.onOverrideReset?.()
 			if ( typeof overrideValue !== 'undefined' ) {
 				newValue = overrideValue
@@ -144,18 +148,18 @@ const AdvancedRangeControl = props => {
 		propsToPass.sliderMax = props.marks.length - 1
 		propsToPass.step = 1
 
-		// Show the marks and labels
+		// Show the marks and names
 		propsToPass.marks = props.marks.reduce( ( acc, mark, index ) => {
 			return [
 				{
 					value: index,
-					label: undefined,
+					name: undefined,
 				},
 				...acc,
 			]
 		}, [] )
 		propsToPass.renderTooltipContent = value => {
-			return props.marks[ value ]?.label || ''
+			return props.marks[ value ]?.name || ''
 		}
 
 		// Other necessary props for steps.
@@ -171,6 +175,11 @@ const AdvancedRangeControl = props => {
 		controlProps.className += isMarkMode ? ' stk-range-control--mark-mode' : ''
 	}
 
+	if ( props.isCustomPreset ) {
+		controlProps.className = controlProps.className || ''
+		controlProps.className += 'stk-preset-controls'
+	}
+
 	// We need to change the way we handle the value and onChange if we're doing marks
 	let rangeValue = propsToPass.isDynamic || props.hasCSSVariableValue ? parseFloat( derivedValue ) : derivedValue
 	let rangeOnChange = _onChange
@@ -227,17 +236,22 @@ const AdvancedRangeControl = props => {
 				</RangeControl>
 			</DynamicContentControl>
 			<ResetButton
+				// Allow running own reset for custom preset controls since
+				// unit is also needed to be reset
 				allowReset={ props.allowReset }
+				showReset={ props.showReset }
 				value={ derivedValue }
 				default={ props.default }
-				onChange={ _onChange }
+				onChange={ props.onReset ? props.onReset : _onChange }
 			/>
 		</AdvancedControl>
 	)
 }
 
 AdvancedRangeControl.defaultProps = {
 	allowReset: true,
+	onReset: undefined,
+	showReset: undefined,
 	isDynamic: false,
 	default: '',
 
@@ -250,9 +264,10 @@ AdvancedRangeControl.defaultProps = {
 	onOverrideReset: undefined,
 	forcePlaceholder: false,
 
-	marks: undefined, // [{ value: '14px', label: 'S' }, { value: '16px', label: 'M' }]
+	marks: undefined, // [{ value: '14px', name: 'S' }, { value: '16px', name: 'M' }]
 	allowCustom: true,
 	hasCSSVariableValue: false,
+	isCustomPreset: false,
 }
 
 export default memo( AdvancedRangeControl, isEqual )