Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 14:35:45 +01:00
Code Issues Packages Projects Releases Activity

Enrich styleguide with new features, rules and changes

Browse Source 
The styleguide for usage of visual elements has not been updated for a long time. In the course of this story it should be adapted to the current standards and rules. In addition, heavy violations were rectified directly.
This commit is contained in:
Florian Scholdei
2021-01-28 12:46:42 +01:00
committed by GitHub
parent 0046c78b40
commit 57c9484d41
12 changed files with 2530 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/BranchSelector.stories.tsx
View File

@@ -42,4 +42,4 @@ const Wrapper = styled.div`
storiesOf("BranchSelector", module)
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
.add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select branch:" />);
.add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);

3
scm-ui/ui-components/src/Breadcrumb.tsx
View File

@@ -45,7 +45,6 @@ type Props = {
};
const PermaLinkWrapper = styled.div`
margin: 1.2rem 0 0 1.5rem;
width: 16px;
height: 16px;
font-size: 13px;
@@ -132,7 +131,7 @@ const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, pa
return (
<>
<div className="is-flex">
<div className="is-flex is-align-items-center">
<PermaLinkWrapper>
{copying ? (
<Icon name="spinner fa-spin" />

8
scm-ui/ui-components/src/CardColumnSmall.tsx
View File

@@ -51,10 +51,6 @@ const ContentRight = styled.div`
align-items: start;
`;
const CenteredItems = styled.div`
align-items: center;
`;
const StyledLink = styled(Link)`
color: inherit;
:hover {
@@ -75,10 +71,10 @@ const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, f
<div className="media">
{renderAvatar}
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<CenteredItems className="is-flex">
<div className="is-flex is-align-items-center">
<ContentLeft>{contentLeft}</ContentLeft>
<ContentRight>{contentRight}</ContentRight>
</CenteredItems>
</div>
{renderFooter}
</FlexFullHeight>
</div>

2
scm-ui/ui-components/src/DateElement.ts
View File

@@ -24,7 +24,7 @@
import styled from "styled-components";
const DateElement = styled.time`
border-bottom: 1px dotted rgba(219, 219, 219);
border-bottom: 1px dotted rgb(219, 219, 219);
cursor: help;
`;

82
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -80,7 +80,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -160,7 +160,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42"
>
2020-05-10
@@ -260,7 +260,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -372,7 +372,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42"
>
2020-04-12
@@ -474,7 +474,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -633,7 +633,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -725,7 +725,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42"
>
2020-05-10
@@ -791,7 +791,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -912,7 +912,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42"
>
2020-04-12
@@ -955,7 +955,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -1119,7 +1119,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -1204,7 +1204,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42"
>
2020-05-10
@@ -1309,7 +1309,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -1426,7 +1426,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42"
>
2020-04-12
@@ -1533,7 +1533,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42"
>
2020-04-09
@@ -1625,7 +1625,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
<label
className="label is-size-6"
>
Select branch:
Select Branch
</label>
</div>
<div
@@ -1672,10 +1672,10 @@ exports[`Storyshots BreadCrumb Default 1`] = `
className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
>
<div
className="is-flex"
className="is-flex is-align-items-center"
>
<div
className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 grYLJW"
className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO"
>
<span
className="tooltip has-tooltip-right"
@@ -2356,7 +2356,7 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago
@@ -2374,7 +2374,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
>
<a
className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
href="/foo/bar"
onClick={[Function]}
>
@@ -2382,7 +2382,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="media"
>
<figure
className="CardColumnSmall__AvatarWrapper-tk9h0o-5 cEyGXM media-left"
className="CardColumnSmall__AvatarWrapper-tk9h0o-4 evHbLN media-left"
>
<i
className="fas fa-icons fa-2x fa-fw has-text-grey-light"
@@ -2392,7 +2392,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
>
<div
className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
className="is-flex is-align-items-center"
>
<div
className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -2422,7 +2422,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
>
<a
className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
href="/foo/bar"
onClick={[Function]}
>
@@ -2433,7 +2433,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
>
<div
className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
className="is-flex is-align-items-center"
>
<div
className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -4564,7 +4564,7 @@ exports[`Storyshots Date Date from now 1`] = `
>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2009-06-30 18:30:00"
>
over 10 years ago
@@ -4572,7 +4572,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-06-30 18:30:00"
>
3 months ago
@@ -4580,7 +4580,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-12 13:56:40"
>
less than a minute ago
@@ -4588,7 +4588,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-11 13:56:40"
>
1 day ago
@@ -4603,7 +4603,7 @@ exports[`Storyshots Date Short 1`] = `
>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2009-06-30 18:30:00"
>
2009-06-30
@@ -4611,7 +4611,7 @@ exports[`Storyshots Date Short 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-06-30 18:30:00"
>
2019-06-30
@@ -4619,7 +4619,7 @@ exports[`Storyshots Date Short 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-12 13:56:40"
>
2019-10-12
@@ -4627,7 +4627,7 @@ exports[`Storyshots Date Short 1`] = `
</p>
<p>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-11 13:56:40"
>
2019-10-11
@@ -48041,7 +48041,7 @@ exports[`Storyshots Navigation|Secondary Active when match 1`] = `
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]}
>
<i
@@ -48103,7 +48103,7 @@ exports[`Storyshots Navigation|Secondary Default 1`] = `
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]}
>
<i
@@ -48165,7 +48165,7 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]}
>
<i
@@ -48253,7 +48253,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]}
>
<i
@@ -48572,7 +48572,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago
@@ -48717,7 +48717,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago
@@ -48865,7 +48865,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago
@@ -49010,7 +49010,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago
@@ -49162,7 +49162,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
className="level-item"
>
<time
className="DateElement-sc-1schp8c-0 IMGpa"
className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01"
>
3 days ago

40
scm-ui/ui-components/src/modals/Modal.stories.tsx
View File

@@ -52,6 +52,24 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
// eslint-disable-next-line @typescript-eslint/no-empty-function
const doNothing = () => {};
const withFormElementsBody = (
<>
<RadioList>
<Radio label="One" checked={true} helpText="The first one" />
<Radio label="Two" checked={false} helpText="The second one" />
</RadioList>
<hr />
<p>{text}</p>
<hr />
<Textarea label="Text" onChange={doNothing} />
</>
);
const withFormElementsFooter = (
<ButtonGroup>
<Button label="One" />
<Button label="Two" />
</ButtonGroup>
);
storiesOf("Modal|Modal", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -66,21 +84,13 @@ storiesOf("Modal|Modal", module)
</CloseableModal>
))
.add("With form elements", () => (
<NonCloseableModal>
<RadioList>
<Radio label="One" checked={true} helpText="The first one" />
<Radio label="Two" checked={false} helpText="The second one" />
</RadioList>
<hr />
<p>{text}</p>
<hr />
<Textarea label="Text" onChange={doNothing} />
<hr />
<ButtonGroup>
<Button label="One" />
<Button label="Two" />
</ButtonGroup>
</NonCloseableModal>
<Modal
body={withFormElementsBody}
closeFunction={doNothing}
active={true}
title={"Hitchhiker Modal"}
footer={withFormElementsFooter}
/>
))
.add("With long tooltips", () => {
return (

3
scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
View File

@@ -54,9 +54,6 @@ const Icon = styled.i<CollapsedProps>`
`;
const MenuLabel = styled.p<CollapsedProps>`
height: 3.2rem;
display: flex;
align-items: center;
justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
cursor: pointer;
`;