From 5296c4fee11e2a527765676d6b4f10d13b68ca87 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Wed, 13 Jun 2018 16:42:03 +0200 Subject: [PATCH] fix: Fixes #88 buttonbar style cornering on Accounts and Addresses pages (#90) * fix: Fixes #88 buttonbar style cornering on Accounts and Addresses pages - Add right corners to Forget - Add left corners to Reset * refactor: Move overrides for buttonbar corner styles into shared resource * fix: Add newline to end of file * refactor: Refactor using PostCSS variables, nesting, and import * refactor: Move variables into partials subfolder. Apply CSS when preceding sibling is spacer * fix: Remove unnecessary comma to pass CI linting * fix: Add initial divider with no padding to apply corners conditionally There is no CSS selector combinator that allows conditional styling of an element conditional upon "subsequent" sibling elements existing. This is a work-around whereby a dummy divider with no padding is added to the start of the button group such that the custom corner overrides only apply to button groups that contain a 1st and 3rd element that are dividers. Only options for conditional styling dependent on "preceding" sibling elements currently exist that are compatible across browsers (i.e. 'Adjacent sibling combinator' by use of `+` and 'General sibling combinator' by use of `~`, see below reference for details). Another alternative solution that was considered by not deemed generic enough was to conditionally apply the custom cornering only to button groups that are contained within a classname that contains the text "--Editor", on the assumption that the Forget, Reset, Save button group would only be used within a nesting containing such a wildcard value (as is currently the case) ``` div [class*="--Editor"] { .ui--Button-Group { .ui.buttons { .button:nth-child(1) { border-top-right-radius: $small-corner; border-bottom-right-radius: $small-corner; } .ui.button.compact.mini.basic + .button:nth-child(3) { border-top-left-radius: $small-corner; border-bottom-left-radius: $small-corner; } } } } ``` Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * fix: Resolve linting CI errors * fix: Add missing dependencies to package.json to pass CI * refactor: Move widthless divider into base Group component * refactor: Move button group custom cornering styles --- package.json | 7 ++++++- packages/apps/webpack.config.js | 5 +++++ packages/ui-app/src/Button/Group.js | 2 ++ packages/ui-app/src/styles/components.css | 16 ++++++++++++++++ .../ui-app/src/styles/partials/_variables.css | 1 + 5 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 packages/ui-app/src/styles/partials/_variables.css diff --git a/package.json b/package.json index f3bcd66d70..dc5679dfca 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,11 @@ }, "devDependencies": { "@polkadot/dev-react": "^0.19.25", - "gh-pages": "^1.1.0" + "autoprefixer": "^8.6.2", + "gh-pages": "^1.1.0", + "precss": "^3.1.2", + "postcss-import": "^11.1.0", + "postcss-nested": "^3.0.0", + "postcss-simple-vars": "^4.1.0" } } diff --git a/packages/apps/webpack.config.js b/packages/apps/webpack.config.js index bc9b451340..fca0eb3738 100644 --- a/packages/apps/webpack.config.js +++ b/packages/apps/webpack.config.js @@ -54,6 +54,11 @@ function createWebpack ({ alias = {}, context, name = 'index' }) { options: { ident: 'postcss', plugins: () => [ + require('precss'), + require('autoprefixer'), + require('postcss-simple-vars'), + require('postcss-nested'), + require('postcss-import'), require('postcss-clean')(), require('postcss-flexbugs-fixes') ] diff --git a/packages/ui-app/src/Button/Group.js b/packages/ui-app/src/Button/Group.js index 92496db83e..9a890f9e5c 100644 --- a/packages/ui-app/src/Button/Group.js +++ b/packages/ui-app/src/Button/Group.js @@ -8,6 +8,7 @@ import type { BareProps } from '../types'; import React from 'react'; import SUIButton from 'semantic-ui-react/dist/es/elements/Button'; +import Button from '@polkadot/ui-app/Button'; import classes from '../util/classes'; import Divider from './Divider'; @@ -22,6 +23,7 @@ function ButtonGroup ({ children, className, style }: Props): React$Node { style={style} > + {children} diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css index 2e40b433be..23d170a2eb 100644 --- a/packages/ui-app/src/styles/components.css +++ b/packages/ui-app/src/styles/components.css @@ -2,6 +2,8 @@ /* This software may be modified and distributed under the terms /* of the ISC license. See the LICENSE file for details. */ +@import 'partials/_variables.css'; + .ui--output { background: #f9f9f9; border-radius: 4px; @@ -24,3 +26,17 @@ background: #fff6f6; border-color: #e0b4b4; } + +.ui--Button-Group { + .ui.buttons { + .ui.button.compact.mini.basic + .button:nth-child(2) { + border-top-right-radius: $small-corner; + border-bottom-right-radius: $small-corner; + } + .ui.button.compact.mini.basic + .button:nth-child(2), + .ui.button.compact.mini.basic + .button:nth-child(4) { + border-top-left-radius: $small-corner; + border-bottom-left-radius: $small-corner; + } + } +} \ No newline at end of file diff --git a/packages/ui-app/src/styles/partials/_variables.css b/packages/ui-app/src/styles/partials/_variables.css new file mode 100644 index 0000000000..407875e354 --- /dev/null +++ b/packages/ui-app/src/styles/partials/_variables.css @@ -0,0 +1 @@ +$small-corner: .28571429rem; \ No newline at end of file