From 8dcaf1b06598b0138bdd31261c04cacb71e938df Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 22 Apr 2020 15:49:51 +0200 Subject: [PATCH] Fix styled compo lint Signed-off-by: soupette --- .stylelintrc | 6 +++++- .../admin/src/components/GlobalStyle/index.js | 11 +++-------- .../admin/src/components/LeftMenuHeader/Wrapper.js | 1 - .../components/LeftMenuLinkContainer/Wrapper.js | 3 --- .../LeftMenuLinkSection/EmptyLinksListWrapper.js | 4 +--- .../admin/src/components/Notification/Li.js | 12 +++++------- .../admin/src/containers/App/components.js | 2 +- .../admin/src/containers/HomePage/components.js | 8 ++++---- .../admin/src/containers/LeftMenu/Wrapper.js | 4 ++-- .../admin/src/containers/LocaleToggle/Wrapper.js | 1 - .../src/components/DraggedField/RemoveWrapper.js | 12 ++++++------ .../src/components/InputJSONWithErrors/Wrapper.js | 2 +- .../MediaPreviewList/StyledMediaPreviewList.js | 1 - .../RepeatableComponent/BannerWrapper.js | 4 ++-- .../admin/src/components/SelectMany/components.js | 4 +--- .../src/components/SelectWrapper/components.js | 4 ++-- .../components/Wysiwyg/PreviewControlWrapper.js | 3 --- .../components/Wysiwyg/PreviewWysiwygWrapper.js | 2 -- .../src/components/WysiwygWithErrors/Wrapper.js | 4 ++-- .../containers/ListSettingsView/MenuDropdown.js | 1 - .../admin/src/containers/ListView/components.js | 14 +++++++------- .../admin/src/components/ComponentCard/Wrapper.js | 9 ++++----- .../components/DynamicZoneList/ComponentButton.js | 2 +- .../admin/src/components/List/List.js | 5 +---- .../src/components/RelationTargetPicker/Wrapper.js | 3 +-- .../components/InputSearchContainer/Components.js | 2 ++ 26 files changed, 51 insertions(+), 73 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 7bde962e4f4..749d63b4fb0 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,5 +5,9 @@ "extends": [ "stylelint-config-recommended", "stylelint-config-styled-components" - ] + ], + "rules": { + "font-family-no-missing-generic-family-keyword": null, + "no-descending-specificity": null + } } \ No newline at end of file diff --git a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js index f8599cb41f2..f5ecaa6d0ef 100644 --- a/packages/strapi-admin/admin/src/components/GlobalStyle/index.js +++ b/packages/strapi-admin/admin/src/components/GlobalStyle/index.js @@ -12,10 +12,6 @@ const GlobalStyle = createGlobalStyle` color: #292b2c; } - // ::-webkit-scrollbar { - // width: 0; - // } - * { -webkit-font-smoothing: antialiased; box-sizing: border-box; @@ -137,7 +133,6 @@ const GlobalStyle = createGlobalStyle` } - // scrollbar ::-webkit-scrollbar { width: 9px; } @@ -163,13 +158,13 @@ const GlobalStyle = createGlobalStyle` display: none; } - // firefox scrollbar + /* firefox scrollbar */ + /* stylelint-disable */ * { scrollbar-color: #bbb #eee; scrollbar-width: thin; } - - + /* stylelint-enable */ `; export default GlobalStyle; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js index 20db1a2e4e8..edcedc1e15e 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuHeader/Wrapper.js @@ -15,7 +15,6 @@ const Wrapper = styled.div` .projectName { display: block; - height: 100%; width: 100%; text-align: center; height: ${props => props.theme.main.sizes.leftMenu.height}; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js index 0e06019f199..c3963e43d5b 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/Wrapper.js @@ -11,9 +11,6 @@ const Wrapper = styled.div` overflow-y: auto; height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 10.2rem)); box-sizing: border-box; - // I am keeping these lines if we want to join the scrollbars again - // display: flex; - // flex-direction: column; .title { padding-left: 2rem; diff --git a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js index 297c1c43be6..f9454f2d5f7 100644 --- a/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js +++ b/packages/strapi-admin/admin/src/components/LeftMenuLinkSection/EmptyLinksListWrapper.js @@ -1,10 +1,8 @@ import styled from 'styled-components'; const EmptyLinksListWrapper = styled.div` - padding: 0.8rem 0 0.7rem 2rem; - // padding-top: 0.8rem; - // padding-left: 2rem; margin-bottom: 0.1rem; + padding: 0.8rem 0 0.7rem 2rem; line-height: 18px; `; diff --git a/packages/strapi-admin/admin/src/components/Notification/Li.js b/packages/strapi-admin/admin/src/components/Notification/Li.js index 54a1739d7b4..7188467441e 100644 --- a/packages/strapi-admin/admin/src/components/Notification/Li.js +++ b/packages/strapi-admin/admin/src/components/Notification/Li.js @@ -1,6 +1,8 @@ import styled, { createGlobalStyle } from 'styled-components'; import PropTypes from 'prop-types'; +/* eslint-disable indent */ + const GlobalNotification = createGlobalStyle` .notificationIcon { position: relative; @@ -64,7 +66,7 @@ const GlobalNotification = createGlobalStyle` .notificationSuccess{ background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props => - props.theme.main.colors.white}; + props.theme.main.colors.white}; } .notificationWarning { @@ -83,7 +85,7 @@ const GlobalNotification = createGlobalStyle` .notificationIcon:before { padding-top: 4px; - border-color: $brand-danger; // red + border-color: $brand-danger; border-color: ${props => props.theme.main.colors.red}; color: ${props => props.theme.main.colors.red}; } @@ -91,15 +93,13 @@ const GlobalNotification = createGlobalStyle` .notificationInfo { background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props => - props.theme.main.colors.white}; + props.theme.main.colors.white}; .notificationIcon:before { border-color: ${props => props.theme.main.colors.blue}; color: ${props => props.theme.main.colors.blue}; } } - - `; const Li = styled.li` @@ -118,8 +118,6 @@ const Li = styled.li` z-index: 10; padding: 1rem; - // The last notification must appear from - // the background of the previous one. &:last-child { z-index: 1; } diff --git a/packages/strapi-admin/admin/src/containers/App/components.js b/packages/strapi-admin/admin/src/containers/App/components.js index 2b2f178da36..db114c69ba0 100644 --- a/packages/strapi-admin/admin/src/containers/App/components.js +++ b/packages/strapi-admin/admin/src/containers/App/components.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` - font-amily: 'Lato'; + font-family: 'Lato'; font-size: 1.4rem; font-weight: 400; line-height: 1.5; diff --git a/packages/strapi-admin/admin/src/containers/HomePage/components.js b/packages/strapi-admin/admin/src/containers/HomePage/components.js index f47e42ccc33..be7892eba25 100644 --- a/packages/strapi-admin/admin/src/containers/HomePage/components.js +++ b/packages/strapi-admin/admin/src/containers/HomePage/components.js @@ -105,8 +105,8 @@ const ALink = styled.a` } &:hover, - focus, - active { + :focus, + :active { text-decoration: none; outline: 0; } @@ -179,8 +179,8 @@ const LinkWrapper = styled.a` background-color: #f7f8f8; &:hover, - focus, - active { + :focus, + :active { text-decoration: none; outline: 0; } diff --git a/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js b/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js index 7a606b0826e..a9d1d671bbf 100644 --- a/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js +++ b/packages/strapi-admin/admin/src/containers/LeftMenu/Wrapper.js @@ -16,7 +16,7 @@ const Wrapper = styled.div` width: ${props => props.theme.main.sizes.leftMenu.width}; background: ${props => props.theme.main.colors.strapi['blue-darker']}; - // scrollbar overrides + /* scrollbar overrides */ * { ::-webkit-scrollbar { width: 7px; @@ -35,7 +35,7 @@ const Wrapper = styled.div` background-color: ${props => props.theme.main.colors.leftMenu['link-color']}; } - // firefox + /* firefox */ scrollbar-color: ${props => props.theme.main.colors.leftMenu['title-color']} transparent; } `; diff --git a/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js b/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js index 7876161cd7a..c09533b4a90 100644 --- a/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js +++ b/packages/strapi-admin/admin/src/containers/LocaleToggle/Wrapper.js @@ -72,7 +72,6 @@ const Wrapper = styled.div` border: none !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; - overflow: hidden; box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05); &:before { diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js index 9ddb217520b..00e3939cec0 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DraggedField/RemoveWrapper.js @@ -1,22 +1,22 @@ import styled from 'styled-components'; import getColor from './utils/getColor'; +/* eslint-disable indent */ + const RemoveWrapper = styled.div` display: flex; flex-direction: column; justify-content: center; position: absolute; + top: 0px; + bottom: 0px; + right: 0; width: 30px; text-align: center; background-color: ${({ isOverEditBlock, isOverRemove, isSelected }) => - getColor(isOverRemove, isSelected, isOverEditBlock)}; + getColor(isOverRemove, isSelected, isOverEditBlock)}; cursor: pointer; - position: absolute; - top: 0px; - bottom: 0px; - right: 0; - svg { align-self: center; color: #b4b6ba; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js index e7938ad0a97..937877c2e54 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/InputJSONWithErrors/Wrapper.js @@ -18,7 +18,7 @@ const Wrapper = styled.div` } } > p { - width 100%; + width: 100%; padding-top: 14px; font-size: 1.2rem; line-height: normal; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js index ebf5cd264bb..999ecc605ab 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/MediaPreviewList/StyledMediaPreviewList.js @@ -94,7 +94,6 @@ const MediaPreviewFile = styled(MediaPreviewItem)` position: absolute; left: 120%; bottom: -10px; - display: none; max-width: 150px; color: #333740; } diff --git a/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js index 6f7d26c60d4..6e21510eb57 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js @@ -90,7 +90,7 @@ const BannerWrapper = styled.button` }} &:focus { - outline: 0;; + outline: 0; } @@ -164,7 +164,7 @@ const BannerWrapper = styled.button` `; }} - webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; > div { align-self: center; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js index 0ecaa5e1bf6..214c3bbe91a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js @@ -92,14 +92,12 @@ const Li = styled.li` > div { width: 90%; > a { + max-width: 100%; color: rgb(35, 56, 77); } > a:hover { text-decoration: none; } - > a { - max-width: 100%; - } &:first-of-type { display: flex; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js index 8e117f45b14..3f9cc425d54 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js @@ -26,7 +26,7 @@ const Wrapper = styled.div` flex-wrap: initial; padding: 0 10px; - // Arrow + /* Arrow */ &:before { content: '\f0d7'; position: absolute; @@ -40,7 +40,7 @@ const Wrapper = styled.div` > div { padding: 0; &:first-of-type { - // Placeholder + /* Placeholder */ > div span { color: #aaa; } diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js index 9253e51be58..aa3f9a16ce4 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewControlWrapper.js @@ -6,9 +6,6 @@ const PreviewControlWrapper = styled.div` width: 100%; padding: 0 17px; justify-content: space-between; - background-color: #fafafb; - line-height: 30px; - font-size: 12px; font-family: Lato; background-color: #fff; border-bottom: 1px solid #f3f4f4; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js index 3745f9bd65d..20f2bdaa090 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/PreviewWysiwygWrapper.js @@ -13,7 +13,6 @@ const PreviewWysiwygWrapper = styled.div` font-family: 'Lato'; cursor: text; - // TODO define rules for header's margin h1, h2, h3, @@ -71,7 +70,6 @@ const PreviewWysiwygWrapper = styled.div` padding-left: 20px; } - // NOTE: we might need this later span { white-space: pre-line; } diff --git a/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js index 9b562ee10c3..8a58dfaf64b 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` padding-bottom: 2.4rem; font-size: 1.3rem; - font-family: 'Lato'; + font-family: 'Lato'; label { display: block; margin-bottom: 1rem; @@ -14,7 +14,7 @@ const Wrapper = styled.div` } } > div + p { - width 100%; + width: 100%; padding-top: 12px; font-size: 1.2rem; line-height: normal; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js index edb6d083ec3..3f7e722834b 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/MenuDropdown.js @@ -3,7 +3,6 @@ import { DropdownMenu } from 'reactstrap'; const MenuDropdown = styled(DropdownMenu)` max-height: 180px; - // min-width: calc(100% + 2px); min-width: 230px; margin-left: -1px; margin-top: -1px; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js index 88ecb7ab7ba..f742331d32a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/components.js @@ -20,20 +20,21 @@ const AddFilterCta = styled(Button)` margin-right: 10px; padding: 0 10px; text-align: center; - background-color: #FFFFFF; - border: 1px solid #E3E9F3; + background-color: #ffffff; + border: 1px solid #e3e9f3; border-radius: 2px; line-height: 28px; font-size: 13px; font-weight: 500; font-family: Lato; - -webkit-font-smoothing-antialiased; + -webkit-font-smoothing: antialiased; cursor: pointer; &:hover { - background: #F7F8F8; + background: #f7f8f8; } - &:focus, &:active { - outline:0; + &:focus, + &:active { + outline: 0; } > span { margin-left: 10px; @@ -92,7 +93,6 @@ const FilterWrapper = styled.div` } -webkit-font-smoothing: antialiased; - font-size: 13px; `; const Separator = styled.span` diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Wrapper.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Wrapper.js index 04e02f23509..7f1d167542a 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Wrapper.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ComponentCard/Wrapper.js @@ -13,7 +13,6 @@ const Wrapper = styled.button` padding: 0; padding-top: 5px; border-radius: 2px; - border: 0; text-align: center; border: solid 1px #fafafb; background-color: #fafafb; @@ -22,7 +21,6 @@ const Wrapper = styled.button` outline: 0; } - div:first-of-type { display: flex; width: 35px; @@ -34,7 +32,7 @@ const Wrapper = styled.button` font-size: 12px; svg { - margin auto; + margin: auto; } } @@ -63,11 +61,12 @@ const Wrapper = styled.button` cursor: initial; } - &:hover, &.active { + &:hover, + &.active { border-color: #aed4fb; background-color: #e6f0fb; - div:first-of-type { + div:first-of-type { background-color: #aed4fb; color: #007eff; } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/DynamicZoneList/ComponentButton.js b/packages/strapi-plugin-content-type-builder/admin/src/components/DynamicZoneList/ComponentButton.js index 2e4f24da5f0..fef0cb7869c 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/DynamicZoneList/ComponentButton.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/DynamicZoneList/ComponentButton.js @@ -22,7 +22,7 @@ const ComponentButton = styled.button` display: flex; margin: auto; svg { - margin auto; + margin: auto; width: 11px; height: 11px; } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/List/List.js b/packages/strapi-plugin-content-type-builder/admin/src/components/List/List.js index abb4e28236f..659232078c6 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/List/List.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/List.js @@ -74,7 +74,6 @@ const Wrapper = styled(List)` justify-content: center; align-items: center; width: 100%; - // height: 90px; position: absolute; top: 0; left: 0; @@ -87,7 +86,6 @@ const Wrapper = styled(List)` } ul.nav { width: 100%; - // height: 90px; display: flex; flex-wrap: nowrap; overflow-x: auto; @@ -111,8 +109,7 @@ const Wrapper = styled(List)` position: absolute; bottom: 14px; left: 34px; - background-color: ${({ isFromDynamicZone }) => - isFromDynamicZone ? '#AED4FB' : '#f3f4f4'}; + background-color: ${({ isFromDynamicZone }) => (isFromDynamicZone ? '#AED4FB' : '#f3f4f4')}; color: transparent; text-align: center; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Wrapper.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Wrapper.js index a2f17f02f62..a502d79acd5 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Wrapper.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Wrapper.js @@ -43,7 +43,7 @@ const Wrapper = styled.div` } } } - // Dropdown List + /* Dropdown List */ > button + div { max-width: 100%; max-height: 180px; @@ -58,7 +58,6 @@ const Wrapper = styled.div` font-size: 1.3rem; font-family: Lato; font-weight: 400; - font-family: Lato; text-transform: capitalize; -webkit-font-smoothing: antialiased; cursor: pointer; diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/Components.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/Components.js index 7bd73d49fed..0fae343f212 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/Components.js +++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/Components.js @@ -1,5 +1,7 @@ import styled from 'styled-components'; +/* stylelint-disable */ + const Wrapper = styled.div` min-width: 200px; margin-bottom: 1.5rem;