Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

feat(console): compact-style radio group (#3071)

Browse source
This commit is contained in:
Xiao Yijun 2023-02-08 15:55:04 +08:00 • committed by GitHub
parent 3a5ac1edc9
commit 514930eb21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/components/RadioGroup/Radio.tsx
View file

@ -24,7 +24,7 @@ export type Props = {
isChecked?: boolean;
onClick?: () => void;
tabIndex?: number;
type?: 'card' | 'plain';
type?: 'card' | 'plain' | 'compact';
isDisabled?: boolean;
disabledLabel?: AdminConsoleKey;
};

72
packages/console/src/components/RadioGroup/index.module.scss
View file

@ -10,7 +10,79 @@
}
}
.compact {
display: flex;
flex-wrap: nowrap;
font: var(--font-body-2);
align-items: center;
> .radio {
position: relative;
border: 1px solid var(--color-border);
user-select: none;
cursor: pointer;
flex: 1;
&:first-child {
border-radius: 12px 0 0 12px;
}
&:last-child {
border-radius: 0 12px 12px 0;
}
&:not(:first-child) {
border-left: none;
}
&.disabled {
cursor: not-allowed;
background-color: var(--color-layer-2);
}
&:not(.disabled):focus {
border-color: var(--color-primary);
}
&:not(.disabled):hover {
color: var(--color-text-link);
font: var(--font-label-2);
border-color: var(--color-primary);
background-color: var(--color-hover-variant);
&:not(:first-child)::before {
position: absolute;
content: '';
width: 1px;
top: -1px;
left: -1px;
bottom: -1px;
background-color: var(--color-primary);
}
}
.content {
padding: _.unit(5);
}
&.checked {
border-color: var(--color-primary);
&:not(:first-child)::before {
position: absolute;
content: '';
width: 1px;
top: -1px;
left: -1px;
bottom: -1px;
background-color: var(--color-primary);
}
}
}
}
.card {
/* stylelint-disable-next-line no-descending-specificity */
> .radio {
padding: _.unit(3);
border-radius: _.unit(4);

2
packages/console/src/components/RadioGroup/index.tsx
View file

@ -19,7 +19,7 @@ type Props = {
name: string;
children: RadioElement | RadioElement[];
value?: string;
type?: 'card' | 'plain';
type?: 'card' | 'plain' | 'compact';
className?: string;
onChange?: (value: string) => void;
};