Add block style to radio button (#463)

src/components/v-radio/v-radio.story.ts

@@ -25,7 +25,7 @@ export const basic = () =>
 			return { value };
 		},
 		template: `
-			<div>
+			<div style="max-width: 300px;">
 				<v-radio :disabled="disabled" value="red" v-model="value" label="Red" />
 				<v-radio :disabled="disabled" value="blue" v-model="value" label="Blue" />
 				<v-radio :disabled="disabled" value="green" v-model="value" label="Green" />
@@ -33,3 +33,25 @@ export const basic = () =>
 			</div>
 		`,
 	});
+
+export const blockStyle = () =>
+	defineComponent({
+		components: { RawValue },
+		props: {
+			disabled: {
+				default: boolean('Disabled', false),
+			},
+		},
+		setup() {
+			const value = ref(null);
+			return { value };
+		},
+		template: `
+			<div style="max-width: 300px;">
+				<v-radio block style="margin-bottom: 12px;" :disabled="disabled" value="red" v-model="value" label="Red" />
+				<v-radio block style="margin-bottom: 12px;" :disabled="disabled" value="blue" v-model="value" label="Blue" />
+				<v-radio block :disabled="disabled" value="green" v-model="value" label="Green" />
+				<raw-value>{{ value }}</raw-value>
+			</div>
+		`,
+	});

src/components/v-radio/v-radio.vue

@@ -4,7 +4,7 @@
 		type="button"
 		:aria-pressed="isChecked ? 'true' : 'false'"
 		:disabled="disabled"
-		:class="{ checked: isChecked }"
+		:class="{ checked: isChecked, block }"
 		@click="emitValue"
 	>
 		<v-icon :name="icon" />
@@ -39,6 +39,18 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		iconOn: {
+			type: String,
+			default: 'radio_button_checked',
+		},
+		iconOff: {
+			type: String,
+			default: 'radio_button_unchecked',
+		},
+		block: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const isChecked = computed<boolean>(() => {
@@ -46,7 +58,7 @@ export default defineComponent({
 		});
 
 		const icon = computed<string>(() => {
-			return isChecked.value ? 'radio_button_checked' : 'radio_button_unchecked';
+			return isChecked.value ? props.iconOn : props.iconOff;
 		});
 
 		return { isChecked, emitValue, icon };
@@ -95,6 +107,28 @@ export default defineComponent({
 		}
 	}
 
+	&.block {
+		position: relative;
+		width: 100%;
+		height: var(--input-height);
+		padding: 10px; // 14 - 4 (border)
+		background-color: var(--page-background);
+		border: 2px solid var(--background-subdued);
+		border-radius: var(--border-radius);
+
+		&::before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+			width: 100%;
+			height: 100%;
+			background-color: var(--background-subdued);
+			border-radius: var(--border-radius);
+			content: '';
+		}
+	}
+
 	&:not(:disabled):hover {
 		.v-icon {
 			--v-icon-color: var(--foreground-subdued);
@@ -105,6 +139,19 @@ export default defineComponent({
 		.v-icon {
 			--v-icon-color: var(--v-radio-color);
 		}
+
+		&.block {
+			border-color: var(--v-radio-color);
+
+			.label {
+				color: var(--v-radio-color);
+			}
+
+			&::before {
+				background-color: var(--v-radio-color);
+				opacity: 0.1;
+			}
+		}
 	}
 }
 </style>