@wordpress/block-editor 14.0.0 → 14.2.0

package/src/components/block-draggable/use-scroll-when-dragging.js

@@ -18,36 +18,36 @@ const VELOCITY_MULTIPLIER =
  *                      and `onDragEnd` events respectively.
  */
 export default function useScrollWhenDragging() {
-	const dragStartY = useRef( null );
-	const velocityY = useRef( null );
-	const scrollParentY = useRef( null );
-	const scrollEditorInterval = useRef( null );
+	const dragStartYRef = useRef( null );
+	const velocityYRef = useRef( null );
+	const scrollParentYRef = useRef( null );
+	const scrollEditorIntervalRef = useRef( null );
 
 	// Clear interval when unmounting.
 	useEffect(
 		() => () => {
-			if ( scrollEditorInterval.current ) {
-				clearInterval( scrollEditorInterval.current );
-				scrollEditorInterval.current = null;
+			if ( scrollEditorIntervalRef.current ) {
+				clearInterval( scrollEditorIntervalRef.current );
+				scrollEditorIntervalRef.current = null;
 			}
 		},
 		[]
 	);
 
 	const startScrolling = useCallback( ( event ) => {
-		dragStartY.current = event.clientY;
+		dragStartYRef.current = event.clientY;
 
 		// Find nearest parent(s) to scroll.
-		scrollParentY.current = getScrollContainer( event.target );
+		scrollParentYRef.current = getScrollContainer( event.target );
 
-		scrollEditorInterval.current = setInterval( () => {
-			if ( scrollParentY.current && velocityY.current ) {
+		scrollEditorIntervalRef.current = setInterval( () => {
+			if ( scrollParentYRef.current && velocityYRef.current ) {
 				const newTop =
-					scrollParentY.current.scrollTop + velocityY.current;
+					scrollParentYRef.current.scrollTop + velocityYRef.current;
 
 				// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
 				// Better to use a small scroll interval.
-				scrollParentY.current.scroll( {
+				scrollParentYRef.current.scroll( {
 					top: newTop,
 				} );
 			}
@@ -55,14 +55,14 @@ export default function useScrollWhenDragging() {
 	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
-		if ( ! scrollParentY.current ) {
+		if ( ! scrollParentYRef.current ) {
 			return;
 		}
-		const scrollParentHeight = scrollParentY.current.offsetHeight;
+		const scrollParentHeight = scrollParentYRef.current.offsetHeight;
 		const offsetDragStartPosition =
-			dragStartY.current - scrollParentY.current.offsetTop;
+			dragStartYRef.current - scrollParentYRef.current.offsetTop;
 		const offsetDragPosition =
-			event.clientY - scrollParentY.current.offsetTop;
+			event.clientY - scrollParentYRef.current.offsetTop;
 
 		if ( event.clientY > offsetDragStartPosition ) {
 			// User is dragging downwards.
@@ -82,7 +82,7 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
 			const moveableDistance = Math.max(
@@ -99,19 +99,19 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
-			velocityY.current = 0;
+			velocityYRef.current = 0;
 		}
 	}, [] );
 
 	const stopScrolling = () => {
-		dragStartY.current = null;
-		scrollParentY.current = null;
+		dragStartYRef.current = null;
+		scrollParentYRef.current = null;
 
-		if ( scrollEditorInterval.current ) {
-			clearInterval( scrollEditorInterval.current );
-			scrollEditorInterval.current = null;
+		if ( scrollEditorIntervalRef.current ) {
+			clearInterval( scrollEditorIntervalRef.current );
+			scrollEditorIntervalRef.current = null;
 		}
 	};
 

package/src/components/block-edit/multiple-usage-warning.js

@@ -24,6 +24,8 @@ export function MultipleUsageWarning( {
 		<Warning
 			actions={ [
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					key="find-original"
 					variant="secondary"
 					onClick={ () => selectBlock( originalBlockClientId ) }
@@ -31,6 +33,8 @@ export function MultipleUsageWarning( {
 					{ __( 'Find original' ) }
 				</Button>,
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					key="remove"
 					variant="secondary"
 					onClick={ () => onReplace( [] ) }

package/src/components/block-inspector/index.js

@@ -32,6 +32,14 @@ import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
 
+function BlockStylesPanel( { clientId } ) {
+	return (
+		<PanelBody title={ __( 'Styles' ) }>
+			<BlockStyles clientId={ clientId } />
+		</PanelBody>
+	);
+}
+
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
 		( select ) => {
@@ -48,6 +56,15 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 		},
 		[ topLevelLockedBlock ]
 	);
+	const hasBlockStyles = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const { getBlockStyles } = select( blocksStore );
+			return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
+				?.length;
+		},
+		[ topLevelLockedBlock ]
+	);
 	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
 	return (
 		<div className="block-editor-block-inspector">
@@ -57,6 +74,9 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
+			{ hasBlockStyles && (
+				<BlockStylesPanel clientId={ topLevelLockedBlock } />
+			) }
 			{ contentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
@@ -81,7 +101,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getContentLockingParent,
 			getTemplateLock,
 		} = unlock( select( blockEditorStore ) );
-
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const _selectedBlockName =
 			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
@@ -276,11 +295,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			{ ! showTabs && (
 				<>
 					{ hasBlockStyles && (
-						<div>
-							<PanelBody title={ __( 'Styles' ) }>
-								<BlockStyles clientId={ clientId } />
-							</PanelBody>
-						</div>
+						<BlockStylesPanel clientId={ clientId } />
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot group="list" />
@@ -307,6 +322,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					/>
 					<InspectorControls.Slot group="styles" />
 					<PositionControls />
+					<InspectorControls.Slot group="bindings" />
 					<div>
 						<AdvancedControls />
 					</div>

package/src/components/block-list/block-invalid-warning.js

@@ -101,16 +101,18 @@ export default function BlockInvalidWarning( { clientId } ) {
 			<Warning
 				actions={ [
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						key="recover"
 						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
-						{ __( 'Attempt Block Recovery' ) }
+						{ __( 'Attempt recovery' ) }
 					</Button>,
 				] }
 				secondaryActions={ secondaryActions }
 			>
-				{ __( 'This block contains unexpected or invalid content.' ) }
+				{ __( 'Block contains unexpected or invalid content.' ) }
 			</Warning>
 			{ compare && (
 				<Modal

package/src/components/block-list/block.js

@@ -646,6 +646,8 @@ function BlockListBlockProvider( props ) {
 				blocksWithSameName.length &&
 				blocksWithSameName[ 0 ] !== clientId;
 
+			const editorMode = __unstableGetEditorMode();
+
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -672,6 +674,7 @@ function BlockListBlockProvider( props ) {
 					) && hasSelectedInnerBlock( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
+				editorMode,
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
@@ -680,8 +683,7 @@ function BlockListBlockProvider( props ) {
 					! isDragging(),
 				initialPosition:
 					_isSelected &&
-					( __unstableGetEditorMode() === 'edit' ||
-						__unstableGetEditorMode() === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
+					( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
 						? getSelectedBlocksInitialCaretPosition()
 						: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
@@ -728,6 +730,7 @@ function BlockListBlockProvider( props ) {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
+		editorMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		index,
@@ -782,6 +785,7 @@ function BlockListBlockProvider( props ) {
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
+		editorMode,
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,

package/src/components/block-list/content.scss

@@ -89,11 +89,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		&::after {
 			@include selected-block-focus();
 			z-index: 1;
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 
@@ -112,7 +107,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			right: 0;
 			left: 0;
 			top: -$default-block-margin * 0.5;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			border-top: 4px solid $gray-400;
 			bottom: auto;
 			box-shadow: none;
@@ -220,7 +215,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border-radius: $radius-block-ui;
 		background-color: rgba($white, 0.4);
 	}
 
@@ -255,11 +249,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected {
+	&.is-selected,
+	&.is-hovered {
 		cursor: default;
 
-		&.rich-text {
-			cursor: unset;
+		&.rich-text,
+		.rich-text {
+			cursor: auto;
 		}
 	}
 
@@ -285,11 +281,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
 			outline-color: var(--wp-block-synced-color);
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				outline-color: $dark-theme-focus;
-			}
 		}
 	}
 }
@@ -429,7 +420,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	width: 100%;
 	border: none;
 	outline: none;
-	border-radius: 2px;
+	border-radius: $radius-small;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;

package/src/components/block-list/use-block-props/index.js

@@ -26,6 +26,7 @@ import {
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
+import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
@@ -49,13 +50,13 @@ import { canBindBlock } from '../../../hooks/use-bindings-attributes';
  *
  * export default function Edit() {
  *
- *   const blockProps = useBlockProps(
+ *   const blockProps = useBlockProps( {
  *     className: 'my-custom-class',
  *     style: {
  *       color: '#222222',
  *       backgroundColor: '#eeeeee'
  *     }
- *   )
+ *   } )
  *
  *   return (
  *	    <div { ...blockProps }>
@@ -85,6 +86,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
+		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -115,6 +117,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
+		useZoomOutModeExit( { editorMode } ),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -68,6 +68,7 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
+			ownerDocument.defaultView.getSelection().removeAllRanges();
 			ref.current.focus();
 			return;
 		}

package/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+/**
+ * Allows Zoom Out mode to be exited by double clicking in the selected block.
+ *
+ * @param {string} clientId Block client ID.
+ */
+export function useZoomOutModeExit( { editorMode } ) {
+	const { __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	return useRefEffect(
+		( node ) => {
+			if ( editorMode !== 'zoom-out' ) {
+				return;
+			}
+
+			function onDoubleClick( event ) {
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+					__unstableSetEditorMode( 'edit' );
+				}
+			}
+
+			node.addEventListener( 'dblclick', onDoubleClick );
+
+			return () => {
+				node.removeEventListener( 'dblclick', onDoubleClick );
+			};
+		},
+		[ editorMode, __unstableSetEditorMode ]
+	);
+}

package/src/components/block-list/use-in-between-inserter.js

@@ -25,6 +25,7 @@ export function useInBetweenInserter() {
 		getBlockIndex,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
+		getSettings,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
 		getBlockEditingMode,
@@ -88,9 +89,11 @@ export function useInBetweenInserter() {
 					return;
 				}
 
+				const blockListSettings = getBlockListSettings( rootClientId );
 				const orientation =
-					getBlockListSettings( rootClientId )?.orientation ||
-					'vertical';
+					blockListSettings?.orientation || 'vertical';
+				const captureToolbars =
+					!! blockListSettings?.__experimentalCaptureToolbars;
 				const offsetTop = event.clientY;
 				const offsetLeft = event.clientX;
 
@@ -135,9 +138,18 @@ export function useInBetweenInserter() {
 					return;
 				}
 
-				// Don't show the inserter when hovering above (conflicts with
-				// block toolbar) or inside selected block(s).
-				if ( getSelectedBlockClientIds().includes( clientId ) ) {
+				// Don't show the inserter if the following conditions are met,
+				// as it conflicts with the block toolbar:
+				// 1. when hovering above or inside selected block(s)
+				// 2. when the orientation is vertical
+				// 3. when the __experimentalCaptureToolbars is not enabled
+				// 4. when the Top Toolbar is not disabled
+				if (
+					getSelectedBlockClientIds().includes( clientId ) &&
+					orientation === 'vertical' &&
+					! captureToolbars &&
+					! getSettings().hasFixedToolbar
+				) {
 					return;
 				}
 				const elementRect = element.getBoundingClientRect();

package/src/components/block-lock/style.scss

@@ -41,7 +41,7 @@
 
 	&:hover {
 		background-color: $gray-100;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 }
 

package/src/components/block-lock/toolbar.js

@@ -20,7 +20,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	const hasLockButtonShown = useRef( false );
+	const hasLockButtonShownRef = useRef( false );
 
 	// If the block lock button has been shown, we don't want to remove it
 	// from the toolbar until the toolbar is rendered again without it.
@@ -29,11 +29,11 @@ export default function BlockLockToolbar( { clientId } ) {
 	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
 		if ( isLocked ) {
-			hasLockButtonShown.current = true;
+			hasLockButtonShownRef.current = true;
 		}
 	}, [ isLocked ] );
 
-	if ( ! isLocked && ! hasLockButtonShown.current ) {
+	if ( ! isLocked && ! hasLockButtonShownRef.current ) {
 		return null;
 	}
 

package/src/components/block-mover/button.js

@@ -129,6 +129,8 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					ref={ ref }
 					className={ clsx(
 						'block-editor-block-mover-button',

package/src/components/block-mover/index.js

@@ -87,6 +87,8 @@ function BlockMover( {
 				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							label={ __( 'Drag' ) }

package/src/components/block-mover/style.scss

@@ -76,7 +76,7 @@
 		content: "";
 		position: absolute;
 		display: block;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		height: $grid-unit-40;
 
 		// Position the focus rectangle.

package/src/components/block-navigation/dropdown.js

@@ -27,6 +27,8 @@ function BlockNavigationDropdownToggle( {
 } ) {
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			{ ...props }
 			ref={ innerRef }
 			icon={ listView }

package/src/components/block-pattern-setup/index.js

@@ -22,11 +22,9 @@ import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
 import { unlock } from '../../lock-unlock';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
+const { CompositeV2: Composite, CompositeItemV2: CompositeItem } = unlock(
+	componentsPrivateApis
+);
 
 const SetupContent = ( {
 	viewMode,
@@ -35,7 +33,6 @@ const SetupContent = ( {
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
-	const compositeStore = useCompositeStore();
 	const containerClass = 'block-editor-block-pattern-setup__container';
 
 	if ( viewMode === VIEWMODES.carousel ) {
@@ -65,7 +62,6 @@ const SetupContent = ( {
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				store={ compositeStore }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import {
 	chevronRight,
@@ -17,7 +17,12 @@ import { VIEWMODES } from './constants';
 
 const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		<Button variant="primary" onClick={ onBlockPatternSelect }>
+		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
+			variant="primary"
+			onClick={ onBlockPatternSelect }
+		>
 			{ __( 'Choose' ) }
 		</Button>
 	</div>
@@ -31,14 +36,18 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			icon={ chevronLeft }
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
+			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
 			accessibleWhenDisabled
 		/>
 		<Button
-			icon={ chevronRight }
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
+			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
@@ -60,12 +69,16 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }

package/src/components/block-pattern-setup/style.scss

@@ -4,7 +4,7 @@
 	justify-content: center;
 	align-items: flex-start;
 	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.view-mode-grid {
 		padding-top: $grid-unit-05;
@@ -60,7 +60,7 @@
 
 				.block-editor-block-preview__container {
 					min-height: 100px;
-					border-radius: $radius-block-ui;
+					border-radius: $radius-medium;
 					border: $border-width solid $gray-300;
 				}