@bethinkpl/design-system 38.0.1 → 39.0.0

package/lib/js/components/Buttons/HelpButton/HelpButton.stories.ts

@@ -29,8 +29,7 @@ const meta: Meta<ComponentProps<typeof HelpButton> & ComponentSlots<typeof HelpB
 			<template v-else #modal="{onClose}">
 				<modal @close-modal="onClose">test</modal>
 			</template>
-		</HelpButton>
-		<ds-banner style="margin-top: 20px;" :color="BANNER_COLORS.WARNING" title="Uwaga, z uwagi na brak lokalizacji w DS, na Modalu (tworzonym za pomocą propsa modalTitle i slota modalContent) nie wyświetla się Button w footerze do zamykania modala. Poprawimy to w ramach LMS-2762. Jako alternatywa można skorzystać ze slota modal i wstawić do modala co się chce ;)" />`,
+		</HelpButton>`,
 	}),
 	argTypes: {
 		modalTitle: {

package/lib/js/components/Buttons/HelpButton/HelpButton.vue

@@ -5,7 +5,6 @@
 			:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 			:size="size"
 			:state="isDisabled ? ICON_BUTTON_STATES.DISABLED : ICON_BUTTON_STATES.DEFAULT"
-			:touchable="false"
 			v-bind="$attrs"
 			@click="isOpen = true"
 		/>

package/lib/js/components/Buttons/IconButton/IconButton.stories.ts

@@ -41,7 +41,7 @@ const StoryTemplate: StoryFn<typeof IconButton> = (args) => ({
 		:type="type"
 		:radius="radius"
 		:color-scheme="colorScheme"
-		:touchable="touchable"
+		:touchable-deprecated="touchableDeprecated"
 		:elevation="elevation"
 		:color="color"
 		:state="state"
@@ -61,7 +61,7 @@ const args = {
 	radius: BUTTON_RADIUSES.CAPSULE,
 	label: 'Zamknij',
 	colorScheme: ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR,
-	touchable: true,
+	touchableDeprecated: false,
 	elevation: BUTTON_ELEVATIONS.NONE,
 	color: 'primary',
 	state: ICON_BUTTON_STATES.DEFAULT,
@@ -141,7 +141,7 @@ const argTypesDisabled = {
 	state: {
 		disable: true,
 	},
-	touchable: {
+	touchableDeprecated: {
 		disable: true,
 	},
 	default: {

package/lib/js/components/Buttons/IconButton/IconButton.vue

@@ -14,7 +14,7 @@
 
 			[colorClassName]: isButtonColor,
 
-			'-ds-touchable': touchable,
+			'-ds-touchable': touchableDeprecated,
 		}"
 		:style="{ color: computedColor }"
 		@mouseover="mouseOver"
@@ -63,6 +63,7 @@
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/spacings';
 @import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/mixins/touchable';
 
 @mixin setIconButtonAdditions($border: null, $icon: null) {
 	@if $border {
@@ -131,10 +132,13 @@
 		}
 	}
 
+	@include touchableHitArea;
+
 	align-items: center;
 	color: $color-primary-text;
 	cursor: pointer;
 	display: inline-flex;
+	position: relative;
 	transition: color ease-in-out $default-transition-time;
 
 	&:disabled,
@@ -282,8 +286,8 @@
 	&.-ds-touchable {
 		align-items: center;
 		justify-content: center;
-		min-height: $min-touchable-size;
-		min-width: $min-touchable-size;
+		min-height: $DEPRECATED-min-touchable-size;
+		min-width: $DEPRECATED-min-touchable-size;
 	}
 }
 </style>
@@ -388,9 +392,15 @@ export default defineComponent({
 				return Object.values(BUTTON_ELEVATIONS).includes(value);
 			},
 		},
-		touchable: {
+		/**
+		 * @deprecated Adds the `-ds-touchable` class, which inflates the layout footprint via
+		 * the deprecated `$DEPRECATED-min-touchable-size`. The non-inflating touch target is now
+		 * applied automatically on touch devices via `touchableHitArea` (`@media (pointer: coarse)`),
+		 * so this prop is redundant — renamed to flag it for removal once call sites migrate.
+		 */
+		touchableDeprecated: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 		state: {
 			type: String,

package/lib/js/components/Chip/Chip.vue

@@ -26,7 +26,6 @@
 		<icon-button
 			v-if="size !== CHIP_SIZES.X_SMALL && isRemovable"
 			class="ds-chip__remove"
-			:touchable="false"
 			:state="
 				state === CHIP_STATES.DISABLED
 					? ICON_BUTTON_STATES.DISABLED
@@ -43,8 +42,10 @@
 
 <style lang="scss" scoped>
 @import '../../../styles/settings/animations';
+@import '../../../styles/settings/icons';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/radiuses';
+@import '../../../styles/mixins/touchable';
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
 
@@ -216,7 +217,10 @@ $chip-colors: (
 	padding: $space-2 $space-4;
 
 	&.-ds-interactive {
+		@include touchableHitArea;
+
 		cursor: pointer;
+		position: relative;
 		transition: background-color ease-in-out $default-transition-time;
 	}
 

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -15,7 +15,6 @@
 					v-if="hasBackButton"
 					:size="ICON_BUTTON_SIZES.MEDIUM"
 					:icon="ICONS.FA_CHEVRON_LEFT"
-					:touchable="false"
 					@click="$emit('backClicked')"
 				/>
 				<div class="ds-drawerHeader__textWrapper">
@@ -59,7 +58,6 @@
 				:color="ICON_COLORS.NEUTRAL"
 				:icon="ICONS.FA_XMARK"
 				:size="ICON_BUTTON_SIZES.MEDIUM"
-				:touchable="false"
 				@click="$emit('close')"
 			/>
 		</div>

package/lib/js/components/Form/PasswordField/PasswordField.vue

@@ -10,7 +10,6 @@
 				:icon="eyeIcon"
 				:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 				:size="ICON_BUTTON_SIZES.X_SMALL"
-				:touchable="false"
 				data-test-id="password-toggle"
 				@click="isPasswordVisible = !isPasswordVisible"
 			/>

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -83,6 +83,7 @@
 			>
 				<template #reference>
 					<ds-icon-button
+						touchable-deprecated
 						:icon="dropdownIcon"
 						:size="ICON_BUTTON_SIZES.MEDIUM"
 						:color="ICON_BUTTON_COLORS.NEUTRAL"
@@ -107,6 +108,7 @@
 			:text="t('ds.overlayHeader.close')"
 		>
 			<ds-icon-button
+				touchable-deprecated
 				data-test-selector="overlay-header-close-button"
 				:icon="ICONS.FA_XMARK"
 				:size="ICON_BUTTON_SIZES.MEDIUM"

package/lib/js/components/Headers/SectionHeader/SectionHeader.vue

@@ -59,7 +59,6 @@
 							:icon="ICONS.FA_CIRCLE_QUESTION"
 							:size="ICON_BUTTON_SIZES.X_SMALL"
 							:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
-							:touchable="false"
 							@click.prevent.stop="onInfoClicked"
 						/>
 					</div>

package/lib/js/components/Icons/Icon/Icon.stories.ts

@@ -16,7 +16,7 @@ const StoryTemplate: StoryFn<typeof Icon> = (args) => ({
 		return args;
 	},
 	template:
-		'<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',
+		'<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable-deprecated="touchableDeprecated" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -30,7 +30,7 @@ const args = {
 	size: ICON_SIZES.MEDIUM,
 	icon: 'HEAD_WITH_QUESTION_MARK',
 	spinning: false,
-	touchable: false,
+	touchableDeprecated: false,
 	rotation: null,
 	flippedVertical: false,
 	flippedHorizontal: false,
@@ -68,7 +68,7 @@ const StoryAllIconsTemplate: StoryFn<typeof Icon> = (args) => ({
 	template:
 		'<div class="sbIconList">' +
 		'<div v-for="(icon, iconName) in ICONS" :key="iconName" class="sbIconList__icon">' +
-		'<icon :icon="icon" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" />' +
+		'<icon :icon="icon" :size="size" :touchable-deprecated="touchableDeprecated" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" />' +
 		'<div>{{iconName}}</div>' +
 		'</div>' +
 		'</div>',

package/lib/js/components/Icons/Icon/Icon.vue

@@ -2,7 +2,7 @@
 	<div
 		class="ds-icon"
 		:class="{
-			'-ds-touchable': touchable,
+			'-ds-touchable': touchableDeprecated,
 			'-ds-spin': spinning,
 			'-ds-flipped-vertical': flippedVertical,
 			'-ds-flipped-horizontal': flippedHorizontal,
@@ -55,7 +55,12 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		touchable: {
+		/**
+		 * @deprecated Adds the `-ds-touchable` class, which enlarges the hit area to the
+		 * deprecated `$DEPRECATED-min-touchable-size`. Still has effect; renamed to flag it
+		 * for removal so call sites can migrate away from this layout-inflating behavior.
+		 */
+		touchableDeprecated: {
 			type: Boolean,
 			default: false,
 		},

package/lib/js/components/Menu/MenuItem/MenuItem.vue

@@ -33,7 +33,6 @@
 									? ICON_BUTTON_STATES.DISABLED
 									: ICON_BUTTON_STATES.DEFAULT
 							"
-							:touchable="false"
 							@click.stop="isExpanded = !isExpanded"
 						/>
 						<span

package/lib/js/components/Modal/Modal.vue

@@ -5,7 +5,7 @@
 				<div v-if="showHeader" class="m-modal__header">
 					<slot name="header" />
 					<wnl-icon
-						touchable
+						touchable-deprecated
 						:icon="ICONS.FA_XMARK"
 						class="m-modal__header__close"
 						:size="ICON_SIZES.SMALL"

package/lib/js/components/Modals/Modal/Modal.vue

@@ -11,7 +11,7 @@
 				<div class="ds-modal__rightActions">
 					<slot name="rightActions" />
 					<wnl-icon-button
-						touchable
+						touchable-deprecated
 						:icon="ICONS.FA_XMARK"
 						:size="ICON_SIZES.SMALL"
 						:elevation="BUTTON_ELEVATIONS.X_SMALL"

package/lib/js/components/Pagination/Pagination.vue

@@ -69,6 +69,7 @@
 
 			<div v-if="navigationItems.length > 1" class="ds-pagination__items -ds-compact">
 				<icon-button
+					touchable-deprecated
 					:size="ICON_BUTTON_SIZES.MEDIUM"
 					:color="ICON_BUTTON_COLORS.NEUTRAL"
 					:icon="ICONS.FA_ANGLE_LEFT"
@@ -97,6 +98,7 @@
 				</div>
 
 				<icon-button
+					touchable-deprecated
 					:size="ICON_BUTTON_SIZES.MEDIUM"
 					:color="ICON_BUTTON_COLORS.NEUTRAL"
 					:icon="ICONS.FA_ANGLE_RIGHT"

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -25,7 +25,6 @@
 						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
-						:touchable="false"
 						@click="showModal = true"
 					/>
 				</div>

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -20,7 +20,6 @@
 						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
 						:icon="ICONS.FA_CIRCLE_QUESTION"
 						:size="ICON_SIZES.MEDIUM"
-						:touchable="false"
 						@click="showModal = true"
 					/>
 				</div>

package/lib/styles/components/_icons.scss

@@ -11,8 +11,8 @@
 		cursor: pointer;
 		display: flex;
 		justify-content: center;
-		min-height: $min-touchable-size;
-		min-width: $min-touchable-size;
+		min-height: $DEPRECATED-min-touchable-size;
+		min-width: $DEPRECATED-min-touchable-size;
 	}
 
 	&.-ds-spin {

package/lib/styles/mixins/_touchable.scss

@@ -0,0 +1,19 @@
+$touchable-size: 32px;
+
+// Enlarge the touch target on touch devices without affecting the layout footprint.
+// The visual element keeps its real size; a transparent ::after extends the hit area.
+// NOTE: the host element must establish a positioning context (e.g. `position: relative`)
+// so the absolutely-positioned ::after anchors to it.
+@mixin touchableHitArea {
+	@media (pointer: coarse) {
+		&::after {
+			content: '';
+			height: max(100%, #{$touchable-size});
+			left: 50%;
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			width: max(100%, #{$touchable-size});
+		}
+	}
+}

package/lib/styles/settings/_icons.scss

@@ -9,7 +9,7 @@ $icon-l: 32px;
 $icon-xl: 48px;
 $icon-xxl: 64px;
 
-$min-touchable-size: 40px;
+$DEPRECATED-min-touchable-size: 40px;
 
 $animation-fade-in: a-fadeIn 300ms; /* stylelint-disable-line value-keyword-case */
 $animation-spin: a-spinAround 1s infinite linear; /* stylelint-disable-line value-keyword-case */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "38.0.1",
+  "version": "39.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",