mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style disabled <GroupTitleInput>

Browse source
This commit is contained in:
Evan Hahn 2021-03-18 15:34:19 -05:00 committed by Josh Perez
parent b725ed2ffb
commit 358838a6bc
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/GroupTitleInput.scss
View file

@ -13,12 +13,24 @@
background: $color-white; background: $color-white;
color: $color-black; color: $color-black;
border-color: $color-gray-15; border-color: $color-gray-15;
&:disabled {
background: $color-gray-02;
border-color: $color-gray-05;
color: $color-gray-90;
}
} }
@include dark-theme { @include dark-theme {
background: $color-gray-80; background: $color-gray-80;
color: $color-gray-05; color: $color-gray-05;
border-color: $color-gray-45; border-color: $color-gray-45;
&:disabled {
background: $color-gray-95;
border-color: $color-gray-60;
color: $color-gray-20;
}
} }
&:focus { &:focus {

18
ts/components/GroupTitleInput.stories.tsx
View file

@ -14,8 +14,14 @@ const i18n = setupI18n('en', enMessages);
const story = storiesOf('Components/GroupTitleInput', module); const story = storiesOf('Components/GroupTitleInput', module);
const Wrapper = ({ disabled }: { disabled?: boolean }) => { const Wrapper = ({
const [value, setValue] = useState(''); disabled,
startingValue = '',
}: {
disabled?: boolean;
startingValue?: string;
}) => {
const [value, setValue] = useState(startingValue);
return ( return (
<GroupTitleInput <GroupTitleInput
@ -29,4 +35,10 @@ const Wrapper = ({ disabled }: { disabled?: boolean }) => {
story.add('Default', () => <Wrapper />); story.add('Default', () => <Wrapper />);
story.add('Disabled', () => <Wrapper disabled />); story.add('Disabled', () => (
<>
<Wrapper disabled />
<br />
<Wrapper disabled startingValue="Has a value" />
</>
));