@bethinkpl/design-system 16.6.2 → 17.0.0

package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue

@@ -4,34 +4,62 @@
 		:class="{
 			'-rounded': radius === TOGGLE_BUTTON_RADIUSES.ROUNDED,
 		}"
-		:disable="!isInteractive"
+		:disable="!isInteractiveComputed"
 		:color="rippleColor"
 	>
-		<span
+		<div
 			class="toggleButton"
 			:class="{
-				'-outlined': type === TOGGLE_BUTTON_TYPES.OUTLINED,
-				'-filled': type === TOGGLE_BUTTON_TYPES.FILLED,
-
-				'-xSmall': size === TOGGLE_BUTTON_SIZES.X_SMALL,
 				'-small': size === TOGGLE_BUTTON_SIZES.SMALL,
+				'-medium': size === TOGGLE_BUTTON_SIZES.MEDIUM,
+				'-large': size === TOGGLE_BUTTON_SIZES.LARGE,
 
-				'-long': isLong,
+				'-hasSmallHorizontalPadding': hasSmallHorizontalPadding,
 
 				'-rounded': radius === TOGGLE_BUTTON_RADIUSES.ROUNDED,
 
 				[colorClassName]: true,
 
-				'-elevationXSmall': elevation === TOGGLE_BUTTON_ELEVATIONS.X_SMALL,
-				'-elevationSmall': elevation === TOGGLE_BUTTON_ELEVATIONS.SMALL,
-
-				'-interactive': isInteractive,
+				'-disabled': state === TOGGLE_BUTTON_STATES.DISABLED,
+				'-loading': state === TOGGLE_BUTTON_STATES.LOADING,
+				'-interactive': isInteractiveComputed,
 				'-selected': isSelected,
 			}"
-			@click="isInteractive && $emit('click')"
+			@click="isInteractiveComputed && $emit('click')"
 		>
-			<span class="toggleButton__content">{{ text }}</span>
-		</span>
+			<div class="toggleButton__contentWrapper">
+				<ds-icon
+					v-if="iconLeft"
+					class="toggleButton__icon"
+					:icon="iconLeft"
+					:size="iconSize"
+				/>
+				<span
+					v-if="label"
+					class="toggleButton__content"
+					:class="{
+						'-small': labelSize === TOGGLE_BUTTON_LABEL_SIZES.SMALL,
+						'-uppercase': isLabelUppercase,
+					}"
+				>
+					{{ label }}
+				</span>
+				<ds-icon
+					v-if="iconRight"
+					class="toggleButton__icon"
+					:icon="iconRight"
+					:size="iconSize"
+				/>
+			</div>
+
+			<ds-icon
+				v-if="state === TOGGLE_BUTTON_STATES.LOADING"
+				class="toggleButton__icon toggleButton__loadingSpinner"
+				:icon="ICONS.FAD_SPINNER_THIRD"
+				:size="iconSize"
+				spinning
+			/>
+		</div>
 	</ds-ripple>
 </template>
 
@@ -43,53 +71,170 @@
 @import '../../../../styles/settings/radiuses';
 @import '../../../../styles/settings/shadows';
 
-$toggle-button-size-x-small: 28px;
-$toggle-button-size-small: 32px;
-$toggle-button-size-medium: 40px;
+$toggle-button-size-small: 28px;
+$toggle-button-size-medium: 32px;
+$toggle-button-size-large: 40px;
+
+$toggle-button-border-size: 1px;
+$toggle-button-border-size-large: 2px;
 
 $toggle-button-colors: (
-	'primary': (
-		'text': $color-primary-text,
-		'outline': $color-primary-border-weak,
-		'filled': (
-			'background': $color-primary-background-medium,
-			'background-hovered': $color-primary-background-medium-hovered,
-			'background-focused': $color-primary-background-medium-focused,
+	'neutral': (
+		'color': $color-neutral-text,
+		'border': $color-neutral-border,
+		'border-hovered': $color-neutral-border-hovered,
+		'border-focused': $color-neutral-border-focused,
+		'background': $color-neutral-background-ghost,
+		'background-hovered': $color-neutral-background-ghost-hovered,
+		'background-focused': $color-neutral-background-ghost-focused,
+		'icon': $color-neutral-icon-weak,
+		'outline-hovered': $color-neutral-background-ghost-hovered,
+		'outline-focused': $color-neutral-background-ghost-focused,
+		'disabled': (
+			'color': $color-neutral-text-disabled,
+			'border': $color-neutral-border-disabled,
+			'background': $color-neutral-background-ghost-disabled,
+			'icon': $color-neutral-icon-weak-disabled,
 		),
-		'outlined': (
+		'selected': (
+			'color': $color-neutral-text-heavy,
 			'border': $color-primary-border,
-			'background': $color-primary-background-ghost,
-			'background-hovered': $color-primary-background-ghost-hovered,
-			'background-focused': $color-primary-background-ghost-focused,
+			'border-hovered': $color-primary-border-hovered,
+			'border-focused': $color-primary-border-focused,
+			'background': $color-primary-background,
+			'background-hovered': $color-primary-background-hovered,
+			'background-focused': $color-primary-background-focused,
+			'icon': $color-primary-icon,
+			'outline-hovered': $color-primary-background-ghost-hovered,
+			'outline-focused': $color-primary-background-ghost-focused,
+			'disabled': (
+				'color': $color-neutral-text-heavy-disabled,
+				'border': $color-primary-border-disabled,
+				'background': $color-primary-background-disabled,
+				'icon': $color-primary-icon-disabled,
+			),
+		),
+	),
+	'neutralHeavy': (
+		'color': $color-neutral-text,
+		'border': $color-neutral-border-heavy,
+		'border-hovered': $color-neutral-border-heavy-hovered,
+		'border-focused': $color-neutral-border-heavy-focused,
+		'background': $color-neutral-background-ghost,
+		'background-hovered': $color-neutral-background-ghost-hovered,
+		'background-focused': $color-neutral-background-ghost-focused,
+		'icon': $color-neutral-icon,
+		'outline-hovered': $color-neutral-background-ghost-hovered,
+		'outline-focused': $color-neutral-background-ghost-focused,
+		'disabled': (
+			'color': $color-neutral-text-disabled,
+			'border': $color-neutral-border-heavy-disabled,
+			'background': $color-neutral-background-ghost-disabled,
+			'icon': $color-neutral-icon-weak-disabled,
 		),
 		'selected': (
-			'background': $color-primary-background-strong,
-			'background-hovered': $color-primary-background-strong-hovered,
-			'background-focused': $color-primary-background-strong-focused,
+			'color': $color-neutral-text-heavy,
+			'background': $color-primary-background,
+			'background-hovered': $color-primary-background-hovered,
+			'background-focused': $color-primary-background-focused,
+			'border': $color-primary-border,
+			'border-hovered': $color-primary-border-hovered,
+			'border-focused': $color-primary-border-focused,
+			'icon': $color-primary-icon,
+			'outline-hovered': $color-primary-background-ghost-hovered,
+			'outline-focused': $color-primary-background-ghost-focused,
+			'disabled': (
+				'color': $color-neutral-text-heavy-disabled,
+				'border': $color-primary-border-disabled,
+				'background': $color-primary-background-disabled,
+				'icon': $color-primary-icon-disabled,
+			),
 		),
 	),
-	'neutral': (
-		'text': $color-neutral-text-weak,
-		'outline': $color-neutral-border-weak,
-		'filled': (
-			'background': $color-neutral-background-medium,
-			'background-hovered': $color-neutral-background-medium-hovered,
-			'background-focused': $color-neutral-background-medium-focused,
-		),
-		'outlined': (
-			'border': $color-neutral-border-strong,
-			'background': $color-neutral-background-ghost,
-			'background-hovered': $color-neutral-background-ghost-hovered,
-			'background-focused': $color-neutral-background-ghost-focused,
+	'neutralStrong': (
+		'color': $color-neutral-text,
+		'border': $color-neutral-border-strong,
+		'border-hovered': $color-neutral-border-strong-hovered,
+		'border-focused': $color-neutral-border-strong-focused,
+		'background': $color-neutral-background-ghost,
+		'background-hovered': $color-neutral-background-ghost-hovered,
+		'background-focused': $color-neutral-background-ghost-focused,
+		'icon': $color-neutral-icon,
+		'outline-hovered': $color-neutral-background-ghost-hovered,
+		'outline-focused': $color-neutral-background-ghost-focused,
+		'disabled': (
+			'color': $color-neutral-text-disabled,
+			'border': $color-neutral-border-strong-disabled,
+			'background': $color-neutral-background-ghost-disabled,
+			'icon': $color-neutral-icon-disabled,
 		),
 		'selected': (
+			'color': $color-inverted-text,
 			'background': $color-neutral-background-strong,
 			'background-hovered': $color-neutral-background-strong-hovered,
 			'background-focused': $color-neutral-background-strong-focused,
+			'border': $color-neutral-background-strong,
+			'border-hovered': $color-neutral-background-strong-hovered,
+			'border-focused': $color-neutral-background-strong-focused,
+			'icon': $color-inverted-icon,
+			'outline-hovered': $color-neutral-background-ghost-hovered,
+			'outline-focused': $color-neutral-background-ghost-focused,
+			'disabled': (
+				'color': $color-inverted-text-disabled,
+				'border': $color-neutral-background-strong-disabled,
+				'background': $color-neutral-background-strong-disabled,
+				'icon': $color-inverted-icon-disabled,
+			),
+		),
+	),
+	'primary': (
+		'color': $color-primary-text,
+		'border': $color-primary-border,
+		'border-hovered': $color-primary-border-hovered,
+		'border-focused': $color-primary-border-focused,
+		'background': $color-primary-background-ghost,
+		'background-hovered': $color-primary-background-ghost-hovered,
+		'background-focused': $color-primary-background-ghost-focused,
+		'icon': $color-primary-icon-weak,
+		'outline-hovered': $color-primary-background-ghost-hovered,
+		'outline-focused': $color-primary-background-ghost-focused,
+		'disabled': (
+			'color': $color-primary-text-disabled,
+			'border': $color-primary-border-disabled,
+			'background': $color-neutral-background-ghost-disabled,
+			'icon': $color-primary-icon-weak-disabled,
+		),
+		'selected': (
+			'color': $color-inverted-text,
+			'background': $color-primary-background-strong,
+			'background-hovered': $color-primary-background-strong-hovered,
+			'background-focused': $color-primary-background-strong-focused,
+			'border': $color-primary-background-strong,
+			'border-hovered': $color-primary-background-strong-hovered,
+			'border-focused': $color-primary-background-strong-focused,
+			'icon': $color-inverted-icon,
+			'outline-hovered': $color-primary-background-ghost-hovered,
+			'outline-focused': $color-primary-background-ghost-focused,
+			'disabled': (
+				'color': $color-inverted-text-disabled,
+				'border': $color-primary-background-strong-disabled,
+				'background': $color-primary-background-strong-disabled,
+				'icon': $color-inverted-icon-disabled,
+			),
 		),
 	),
 );
 
+@function substract-border($padding, $size) {
+	$size-map: (
+		'small': $toggle-button-border-size,
+		'medium': $toggle-button-border-size,
+		'large': $toggle-button-border-size-large,
+	);
+
+	@return $padding - map-get($size-map, $size);
+}
+
 .toggleButtonWrapper {
 	display: inline-block;
 
@@ -103,84 +248,105 @@ $toggle-button-colors: (
 }
 
 .toggleButton {
-	@include label-l-default-bold;
+	$root: &;
 
 	@each $color-name, $color-map in $toggle-button-colors {
 		&.-color-#{$color-name} {
-			color: map-get($color-map, 'text');
+			background-color: map-get($color-map, 'background');
+			border-color: map-get($color-map, 'border');
+			color: map-get($color-map, 'color');
 
 			&:hover {
-				outline-color: map-get($color-map, 'outline');
+				background-color: map-get($color-map, 'background-hovered');
+				border-color: map-get($color-map, 'border-hovered');
+				outline-color: map-get($color-map, 'outline-hovered');
 			}
 
-			&.-filled {
-				background-color: map-get($color-map, 'filled', 'background');
+			&:focus {
+				background-color: map-get($color-map, 'background-focused');
+				border-color: map-get($color-map, 'border-focused');
+				outline-color: map-get($color-map, 'outline-focused');
+			}
+
+			&.-selected {
+				background-color: map-get($color-map, 'selected', 'background');
+				border-color: map-get($color-map, 'selected', 'border');
+				color: map-get($color-map, 'selected', 'color');
 
 				&:hover {
-					background-color: map-get($color-map, 'filled', 'background-hovered');
+					background-color: map-get($color-map, 'selected', 'background-hovered');
+					border-color: map-get($color-map, 'selected', 'border-hovered');
+					outline-color: map-get($color-map, 'selected', 'outline-hovered');
 				}
 
 				&:focus {
-					background-color: map-get($color-map, 'filled', 'background-focused');
+					background-color: map-get($color-map, 'selected', 'background-focused');
+					border-color: map-get($color-map, 'selected', 'border-focused');
+					outline-color: map-get($color-map, 'selected', 'outline-focused');
 				}
-			}
-
-			&.-outlined {
-				background-color: map-get($color-map, 'outlined', 'background');
-				border-color: map-get($color-map, 'outlined', 'border');
 
-				&:hover {
-					background-color: map-get($color-map, 'outlined', 'background-hovered');
+				#{$root}__icon {
+					color: map-get($color-map, 'selected', 'icon');
 				}
+			}
 
-				&:focus {
-					background-color: map-get($color-map, 'outlined', 'background-focused');
+			&.-disabled {
+				background-color: map-get($color-map, 'disabled', 'background');
+				border-color: map-get($color-map, 'disabled', 'border');
+				color: map-get($color-map, 'disabled', 'color');
+
+				#{$root}__icon {
+					color: map-get($color-map, 'disabled', 'icon');
 				}
 			}
 
-			&.-selected {
-				background-color: map-get($color-map, 'selected', 'background');
+			&.-disabled.-selected {
+				background-color: map-get($color-map, 'selected', 'disabled', 'background');
+				border-color: map-get($color-map, 'selected', 'disabled', 'border');
+				color: map-get($color-map, 'selected', 'disabled', 'color');
 
-				&:hover {
-					background-color: map-get($color-map, 'selected', 'background-hovered');
+				#{$root}__icon {
+					color: map-get($color-map, 'selected', 'disabled', 'icon');
 				}
+			}
 
-				&:focus {
-					background-color: map-get($color-map, 'selected', 'background-focused');
-				}
+			#{$root}__icon {
+				color: map-get($color-map, 'icon');
 			}
 		}
 	}
 
 	align-items: center;
-	// we can't use percent value because we don't want ellipse shape when text is longer
-	// value it big enough to make circle when text is short
+	// we can't use percent value because we don't want ellipse shape when label is longer
+	// value it big enough to make circle when label is short
 	border-radius: 100px;
+	border-style: solid;
+	border-width: $toggle-button-border-size;
 	display: flex;
 	justify-content: center;
-	min-height: $toggle-button-size-medium;
-	min-width: $toggle-button-size-medium;
 	outline: 6px solid transparent;
-	// vertical passing is smaller than designed, but we compensate that with `min-height`.
-	// This shortcut allows us to use the same padding on .filled and .outlined versions, so number of variants is cut by half
-	padding: $space-xxs;
 	pointer-events: none;
 	transition: color ease-in-out $default-transition-time,
 		border-color ease-in-out $default-transition-time,
 		background-color ease-in-out $default-transition-time,
 		outline-color ease-in-out $default-transition-time;
 
+	&__contentWrapper {
+		align-items: center;
+		display: flex;
+		gap: $space-xxxxs;
+		justify-content: center;
+	}
+
 	&__content {
+		@include label-l-default-bold;
+
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-	}
-
-	&.-long {
-		padding: $space-xxs $space-s;
 
-		&.-rounded {
-			padding: $space-xxs $space-xs;
+		&.-uppercase {
+			@include label-l-default-bold-uppercase;
 		}
 	}
 
@@ -188,151 +354,213 @@ $toggle-button-colors: (
 		border-radius: $radius-s;
 	}
 
-	&.-outlined {
-		border: 2px solid;
-	}
-
-	&.-selected {
-		color: $color-inverted-text;
-	}
-
 	&.-interactive {
 		cursor: pointer;
 		pointer-events: initial;
 	}
 
-	&.-xSmall {
-		min-height: $toggle-button-size-x-small;
-		min-width: $toggle-button-size-x-small;
-		padding: $space-xxxxs;
-
-		&.-long {
-			padding: $space-xxxxs $space-xs;
-
-			&.-rounded {
-				padding: $space-xxxxs $space-xxs;
-			}
+	&.-loading {
+		#{$root}__contentWrapper {
+			opacity: 0;
 		}
 	}
 
 	&.-small {
 		min-height: $toggle-button-size-small;
 		min-width: $toggle-button-size-small;
-		padding: $space-xxxs;
+		padding: substract-border($space-xxxs, 'small') substract-border($space-xs, 'small');
 
-		&.-long {
-			// Exception in padding rules in Figma. -capsule has the same padding as -rounded
-			padding: $space-xxxs $space-xs;
+		&.-hasSmallHorizontalPadding {
+			padding: substract-border($space-xxxs, 'small') substract-border($space-xxxxxs, 'small');
+		}
 
-			&.-rounded {
-				padding: $space-xxxs $space-xs;
+		#{$root}__content.-small {
+			@include label-s-default-bold;
+
+			&.-uppercase {
+				@include label-s-default-bold-uppercase;
 			}
 		}
 	}
 
-	&.-elevationXSmall,
-	&.-elevationSmall {
-		background-color: $color-default-background;
+	&.-medium {
+		min-height: $toggle-button-size-medium;
+		min-width: $toggle-button-size-medium;
+		padding: substract-border($space-xxs, 'medium') substract-border($space-xs, 'medium');
+
+		&.-hasSmallHorizontalPadding {
+			padding: substract-border($space-xxs, 'medium')
+				substract-border($space-xxxxxs, 'medium');
+		}
+
+		#{$root}__content.-small {
+			@include label-m-default-bold;
+
+			&.-uppercase {
+				@include label-m-default-bold-uppercase;
+			}
+		}
 	}
 
-	&.-elevationSmall {
-		box-shadow: $shadow-l;
+	&.-large {
+		border-width: $toggle-button-border-size-large;
+		min-height: $toggle-button-size-large;
+		min-width: $toggle-button-size-large;
+		padding: substract-border($space-xs, 'large') substract-border($space-s, 'large');
+
+		&.-hasSmallHorizontalPadding {
+			padding: substract-border($space-xxs, 'large') substract-border($space-xxxxxs, 'large');
+		}
+	}
+
+	&__loadingSpinner {
+		position: absolute;
 	}
 }
 </style>
 
 <script lang="ts">
 import { Value } from '../../../utils/type.utils';
-import DsRipple, { RIPPLE_COLORS } from '../../Ripple';
+import DsRipple, { RIPPLE_COLORS, RippleColor } from '../../Ripple';
+import { PropType, toRaw } from 'vue';
 
 import {
 	TOGGLE_BUTTON_COLORS,
-	TOGGLE_BUTTON_ELEVATIONS,
+	TOGGLE_BUTTON_LABEL_SIZES,
 	TOGGLE_BUTTON_RADIUSES,
 	TOGGLE_BUTTON_SIZES,
-	TOGGLE_BUTTON_TYPES,
+	TOGGLE_BUTTON_STATES,
+	ToggleButtonColor,
+	ToggleButtonLabelSize,
+	ToggleButtonRadius,
+	ToggleButtonSize,
+	ToggleButtonState,
 } from './ToggleButton.consts';
+import { ICON_SIZES, IconItem, ICONS, IconSize } from '../../Icons/Icon';
+import DsIcon from '../../Icons/Icon/Icon.vue';
 
 export default {
 	name: 'ToggleButton',
 	components: {
+		DsIcon,
 		DsRipple,
 	},
 	props: {
-		text: {
-			type: String,
-			default: '',
-		},
-		size: {
-			type: String,
-			default: TOGGLE_BUTTON_SIZES.MEDIUM,
-			validator(value: Value<typeof TOGGLE_BUTTON_SIZES>) {
-				return Object.values(TOGGLE_BUTTON_SIZES).includes(value);
-			},
-		},
-		type: {
-			type: String,
-			default: TOGGLE_BUTTON_TYPES.FILLED,
-			validator(value: Value<typeof TOGGLE_BUTTON_TYPES>) {
-				return Object.values(TOGGLE_BUTTON_TYPES).includes(value);
-			},
-		},
 		color: {
-			type: String,
-			default: TOGGLE_BUTTON_COLORS.PRIMARY,
+			type: String as PropType<ToggleButtonColor>,
+			default: TOGGLE_BUTTON_COLORS.NEUTRAL,
 			validator(value: Value<typeof TOGGLE_BUTTON_COLORS>) {
 				return Object.values(TOGGLE_BUTTON_COLORS).includes(value);
 			},
 		},
-		radius: {
-			type: String,
-			default: TOGGLE_BUTTON_RADIUSES.CAPSULE,
-			validator(value: Value<typeof TOGGLE_BUTTON_RADIUSES>) {
-				return Object.values(TOGGLE_BUTTON_RADIUSES).includes(value);
+		hasSmallHorizontalPadding: {
+			type: Boolean,
+			default: false,
+		},
+		iconLeft: {
+			type: Object as PropType<IconItem>,
+			default: null,
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
+			},
+		},
+		iconRight: {
+			type: Object as PropType<IconItem>,
+			default: null,
+			validator(icon) {
+				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
 		isInteractive: {
 			type: Boolean,
 			default: true,
 		},
+		isLabelUppercase: {
+			type: Boolean,
+			default: false,
+		},
 		isSelected: {
 			type: Boolean,
 			default: false,
 		},
-		elevation: {
+		label: {
 			type: String,
-			default: TOGGLE_BUTTON_ELEVATIONS.NONE,
-			validator(value: Value<typeof TOGGLE_BUTTON_ELEVATIONS>) {
-				return Object.values(TOGGLE_BUTTON_ELEVATIONS).includes(value);
+			default: '',
+		},
+		labelSize: {
+			type: String as PropType<ToggleButtonLabelSize>,
+			default: TOGGLE_BUTTON_SIZES.MEDIUM,
+		},
+		radius: {
+			type: String as PropType<ToggleButtonRadius>,
+			default: TOGGLE_BUTTON_RADIUSES.CAPSULE,
+			validator(value: Value<typeof TOGGLE_BUTTON_RADIUSES>) {
+				return Object.values(TOGGLE_BUTTON_RADIUSES).includes(value);
+			},
+		},
+		size: {
+			type: String as PropType<ToggleButtonSize>,
+			default: TOGGLE_BUTTON_SIZES.MEDIUM,
+			validator(value: Value<typeof TOGGLE_BUTTON_SIZES>) {
+				return Object.values(TOGGLE_BUTTON_SIZES).includes(value);
+			},
+		},
+		state: {
+			type: String as PropType<ToggleButtonState>,
+			default: TOGGLE_BUTTON_STATES.DEFAULT,
+			validator(value: Value<typeof TOGGLE_BUTTON_STATES>) {
+				return Object.values(TOGGLE_BUTTON_STATES).includes(value);
 			},
 		},
 	},
 	emits: ['click'],
 	data() {
 		return {
+			ICONS: Object.freeze(ICONS),
 			TOGGLE_BUTTON_COLORS: Object.freeze(TOGGLE_BUTTON_COLORS),
-			TOGGLE_BUTTON_ELEVATIONS: Object.freeze(TOGGLE_BUTTON_ELEVATIONS),
-			TOGGLE_BUTTON_SIZES: Object.freeze(TOGGLE_BUTTON_SIZES),
-			TOGGLE_BUTTON_TYPES: Object.freeze(TOGGLE_BUTTON_TYPES),
+			TOGGLE_BUTTON_LABEL_SIZES: Object.freeze(TOGGLE_BUTTON_LABEL_SIZES),
 			TOGGLE_BUTTON_RADIUSES: Object.freeze(TOGGLE_BUTTON_RADIUSES),
+			TOGGLE_BUTTON_SIZES: Object.freeze(TOGGLE_BUTTON_SIZES),
+			TOGGLE_BUTTON_STATES: Object.freeze(TOGGLE_BUTTON_STATES),
 		};
 	},
 	computed: {
 		colorClassName(): string {
 			return `-color-${this.color}`;
 		},
-		rippleColor() {
-			if (this.isSelected) {
-				return RIPPLE_COLORS.INVERTED;
+		iconSize(): IconSize {
+			return this.size === TOGGLE_BUTTON_SIZES.LARGE
+				? ICON_SIZES.X_SMALL
+				: ICON_SIZES.XX_SMALL;
+		},
+		isInteractiveComputed(): boolean {
+			if (this.state !== TOGGLE_BUTTON_STATES.DEFAULT) {
+				return false;
 			}
 
-			return {
-				[TOGGLE_BUTTON_COLORS.NEUTRAL]: RIPPLE_COLORS.NEUTRAL,
-				[TOGGLE_BUTTON_COLORS.PRIMARY]: RIPPLE_COLORS.PRIMARY,
-			}[this.color];
+			return this.isInteractive;
 		},
-		isLong() {
-			return this.text.length > 1;
+		rippleColor(): RippleColor {
+			const map = {
+				[TOGGLE_BUTTON_COLORS.NEUTRAL]: {
+					false: RIPPLE_COLORS.NEUTRAL,
+					true: RIPPLE_COLORS.PRIMARY,
+				},
+				[TOGGLE_BUTTON_COLORS.NEUTRAL_HEAVY]: {
+					false: RIPPLE_COLORS.NEUTRAL,
+					true: RIPPLE_COLORS.PRIMARY,
+				},
+				[TOGGLE_BUTTON_COLORS.NEUTRAL_STRONG]: {
+					false: RIPPLE_COLORS.NEUTRAL,
+					true: RIPPLE_COLORS.INVERTED,
+				},
+				[TOGGLE_BUTTON_COLORS.PRIMARY]: {
+					false: RIPPLE_COLORS.PRIMARY,
+					true: RIPPLE_COLORS.INVERTED,
+				},
+			};
+
+			return map[this.color][this.isSelected];
 		},
 	},
 };