From 2cb006d040e40c3cba01a056c3bf198603cba93c Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 15 Sep 2021 17:40:08 +0200 Subject: [PATCH] Replace styled-components with bulma helpers (#1783) Use Bulma helpers whenever possible instead of custom styled components. This pull request replaces primarily color definitions, spacing and flex instructions. --- gradle/changelog/simplify_styling.yaml | 2 + .../src/main/js/ProtocolInformation.tsx | 16 +- scm-ui/ui-components/src/BranchSelector.tsx | 8 +- .../ui-components/src/Breadcrumb.stories.tsx | 24 +- scm-ui/ui-components/src/Breadcrumb.tsx | 28 +- scm-ui/ui-components/src/CardColumn.tsx | 50 +- scm-ui/ui-components/src/CardColumnGroup.tsx | 25 +- .../src/CardColumnSmall.stories.tsx | 2 +- scm-ui/ui-components/src/CardColumnSmall.tsx | 41 +- scm-ui/ui-components/src/Date.stories.tsx | 23 +- scm-ui/ui-components/src/ErrorBoundary.tsx | 25 +- scm-ui/ui-components/src/Help.stories.tsx | 20 +- scm-ui/ui-components/src/Help.tsx | 11 +- scm-ui/ui-components/src/Loading.tsx | 16 +- .../ui-components/src/OverviewPageActions.tsx | 8 +- .../src/SplitAndReplace.stories.tsx | 22 +- scm-ui/ui-components/src/Tag.tsx | 39 +- .../src/__snapshots__/storyshots.test.ts.snap | 2363 +++++++++-------- .../src/buttons/CreateButton.tsx | 5 +- .../src/forms/AddEntryToTableField.tsx | 22 +- .../AddKeyValueEntryToTableField.stories.tsx | 28 +- .../forms/AddKeyValueEntryToTableField.tsx | 25 +- .../AutocompleteAddEntryToTableField.tsx | 2 +- scm-ui/ui-components/src/forms/Radio.tsx | 28 +- .../src/layout/FooterSection.tsx | 10 +- .../ui-components/src/layout/GroupEntries.tsx | 23 +- .../src/layout/GroupEntry.stories.tsx | 11 +- .../ui-components/src/layout/GroupEntry.tsx | 61 +- scm-ui/ui-components/src/layout/Page.tsx | 31 +- scm-ui/ui-components/src/modals/Modal.tsx | 2 +- .../src/navigation/SecondaryNavigation.tsx | 2 +- scm-ui/ui-components/src/popover/Popover.tsx | 20 +- scm-ui/ui-components/src/repos/DiffButton.tsx | 3 +- scm-ui/ui-components/src/repos/DiffFile.tsx | 34 +- .../src/repos/HealthCheckFailureDetail.tsx | 2 +- .../src/repos/HunkExpandDivider.tsx | 4 +- .../src/repos/HunkExpandLink.tsx | 9 +- .../src/repos/JumpToFileButton.tsx | 4 +- .../ui-components/src/repos/LoadingDiff.tsx | 16 +- .../src/repos/RepositoryEntry.tsx | 38 +- .../src/repos/RepositoryEntryLink.tsx | 9 +- .../src/repos/RepositoryFlags.tsx | 19 +- .../src/repos/annotate/Annotate.tsx | 11 +- .../src/repos/annotate/AnnotateLine.tsx | 2 - .../src/repos/annotate/Popover.tsx | 15 +- .../repos/changesets/ChangesetButtonGroup.tsx | 2 +- .../src/repos/changesets/ChangesetRow.tsx | 69 +- scm-ui/ui-components/src/table/SortIcon.tsx | 9 +- scm-ui/ui-components/src/table/Table.tsx | 2 +- scm-ui/ui-components/src/toast/Toast.tsx | 7 +- .../ui-components/src/toast/ToastButton.tsx | 23 +- .../ui-components/src/toast/ToastButtons.tsx | 6 +- .../src/toast/ToastNotification.tsx | 25 +- scm-ui/ui-styles/src/scm.scss | 36 +- .../src/admin/containers/AdminDetails.tsx | 14 +- .../components/PluginBottomActions.tsx | 12 +- .../admin/plugins/components/PluginEntry.tsx | 16 +- .../admin/plugins/components/PluginModal.tsx | 22 +- .../plugins/components/PluginTopActions.tsx | 19 +- .../admin/roles/components/AvailableVerbs.tsx | 2 +- .../admin/roles/components/SystemRoleTag.tsx | 8 +- scm-ui/ui-webapp/src/components/InfoBox.tsx | 35 +- scm-ui/ui-webapp/src/components/LoginForm.tsx | 10 +- scm-ui/ui-webapp/src/components/LoginInfo.tsx | 2 +- .../InitializationAdminAccountStep.tsx | 10 +- scm-ui/ui-webapp/src/containers/Login.tsx | 9 +- .../src/containers/Notifications.tsx | 65 +- .../ui-webapp/src/containers/OmniSearch.tsx | 31 +- .../ui-webapp/src/containers/PluginLoader.tsx | 46 +- .../ui-webapp/src/containers/ProfileInfo.tsx | 2 +- .../src/groups/components/table/Details.tsx | 11 +- .../groups/components/table/GroupMember.tsx | 10 +- .../components/PermissionsWrapper.tsx | 6 +- .../branches/components/BranchDetail.tsx | 41 +- .../repos/branches/components/BranchRow.tsx | 17 +- .../branches/components/DefaultBranchTag.tsx | 8 +- .../components/FileSearchResults.tsx | 16 +- .../codeSection/containers/FileSearch.tsx | 38 +- .../repos/components/ImportFromUrlForm.tsx | 32 +- .../changesets/ChangesetDetails.tsx | 75 +- .../changesets/ContributorTable.tsx | 2 +- .../repos/components/form/RepositoryForm.tsx | 50 +- .../form/RepositoryFormSwitcher.tsx | 28 +- .../components/list/RepositoryGroupEntry.tsx | 4 +- .../src/repos/containers/ExportRepository.tsx | 13 +- .../repos/containers/HealthCheckWarning.tsx | 4 +- .../repos/containers/RepositoryDangerZone.tsx | 10 +- .../src/repos/containers/RepositoryRoot.tsx | 7 +- .../src/repos/containers/RunHealthCheck.tsx | 8 +- .../components/content/MarkdownViewer.tsx | 9 +- .../content/SwitchableMarkdownViewer.tsx | 29 +- .../src/repos/sources/containers/Content.tsx | 26 +- .../src/repos/tags/components/TagDetail.tsx | 38 +- .../src/repos/tags/components/TagRow.tsx | 14 +- scm-ui/ui-webapp/src/search/Search.tsx | 2 +- .../src/users/components/UserConverter.tsx | 24 +- .../components/apiKeys/ApiKeyCreatedModal.tsx | 12 +- 97 files changed, 1931 insertions(+), 2244 deletions(-) create mode 100644 gradle/changelog/simplify_styling.yaml diff --git a/gradle/changelog/simplify_styling.yaml b/gradle/changelog/simplify_styling.yaml new file mode 100644 index 0000000000..e1f638db37 --- /dev/null +++ b/gradle/changelog/simplify_styling.yaml @@ -0,0 +1,2 @@ +- type: Changed + description: Replace styled-components with bulma helpers ([#1783](https://github.com/scm-manager/scm-manager/pull/1783)) diff --git a/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx index 13f506029d..360f314dda 100644 --- a/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx +++ b/scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.tsx @@ -27,18 +27,14 @@ import { Repository, Link } from "@scm-manager/ui-types"; import { ButtonAddons, Button } from "@scm-manager/ui-components"; import CloneInformation from "./CloneInformation"; -const Wrapper = styled.div` - position: relative; -`; - const Switcher = styled(ButtonAddons)` position: absolute; top: 0; right: 0; `; -const SmallButton = styled(Button).attrs(props => ({ - className: "is-small" +const SmallButton = styled(Button).attrs((props) => ({ + className: "is-small", }))` height: inherit; `; @@ -70,13 +66,13 @@ export default class ProtocolInformation extends React.Component { constructor(props: Props) { super(props); this.state = { - selected: selectHttpOrFirst(props.repository) + selected: selectHttpOrFirst(props.repository), }; } selectProtocol = (protocol: Link) => { this.setState({ - selected: protocol + selected: protocol, }); }; @@ -116,10 +112,10 @@ export default class ProtocolInformation extends React.Component { } return ( - +
{protocols.map(this.renderProtocolButton)} {cloneInformation} - +
); } } diff --git a/scm-ui/ui-components/src/BranchSelector.tsx b/scm-ui/ui-components/src/BranchSelector.tsx index 062221ce57..c530eb7344 100644 --- a/scm-ui/ui-components/src/BranchSelector.tsx +++ b/scm-ui/ui-components/src/BranchSelector.tsx @@ -44,10 +44,6 @@ const MinWidthControl = styled.div` min-width: 10rem; `; -const NoBottomMarginField = styled.div` - margin-bottom: 0 !important; -`; - const BranchSelector: FC = ({ branches, onSelectBranch, selectedBranch, label, disabled }) => { if (branches) { return ( @@ -56,7 +52,7 @@ const BranchSelector: FC = ({ branches, onSelectBranch, selectedBranch, l
- +
({ value: g, label: g }))} value={currentGroup} onChange={groupSelected} @@ -89,9 +89,9 @@ const OverviewPageActions: FC = ({ }; return ( -
+
{groupSelector} -
+
{ const replacements = [ { textToReplace: "'", replacement: , - replaceAll: true + replaceAll: true, }, { textToReplace: "`", replacement: , - replaceAll: true - } + replaceAll: true, + }, ]; return ( <> - +
- - +
+
- +
); }); diff --git a/scm-ui/ui-components/src/Tag.tsx b/scm-ui/ui-components/src/Tag.tsx index 7fc9ae4493..b1f0840c76 100644 --- a/scm-ui/ui-components/src/Tag.tsx +++ b/scm-ui/ui-components/src/Tag.tsx @@ -21,10 +21,9 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import React, { FC, HTMLAttributes } from "react"; +import React, { FC } from "react"; import classNames from "classnames"; import { Color, Size } from "./styleConstants"; -import styled, { css } from "styled-components"; type Props = { className?: string; @@ -39,19 +38,7 @@ type Props = { onRemove?: () => void; }; -type InnerTagProps = HTMLAttributes & { - small: boolean; -}; - -const smallMixin = css` - font-size: 0.7rem !important; - padding: 0.25rem !important; - font-weight: bold; -`; - -const InnerTag = styled.span` - ${(props) => props.small && smallMixin}; -`; +const smallClassNames = classNames("p-1", "is-size-7", "has-text-weight-bold"); const Tag: FC = ({ className, @@ -82,20 +69,26 @@ const Tag: FC = ({ return ( <> - {showIcon} {label} {children} - + {showDelete} ); diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index a0cc61cf35..6d32a2e9bd 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -8,7 +8,7 @@ exports[`Storyshots Annotate Default 1`] = ` className="panel-block" >