Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor triangle to use calc() #616

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Refactor triangle to use calc() #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9414dd4
Refactor triangle to use calc()
May 19, 2022
a40a1de
Merge branch 'main' into triangle-mixin-calc
bhough Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

lint-staged --debug
yarn lint-staged --debug
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can omit this. But I thought it odd that the repo requires lint-staged be installed globally when it's a dependency of the project.

17 changes: 5 additions & 12 deletions docs/assets/polished.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1928,10 +1928,10 @@
}

var getBorderWidth = function getBorderWidth(pointingDirection, height, width) {
var fullWidth = "" + width[0] + (width[1] || '');
var halfWidth = "" + width[0] / 2 + (width[1] || '');
var fullHeight = "" + height[0] + (height[1] || '');
var halfHeight = "" + height[0] / 2 + (height[1] || '');
var fullWidth = width;
var halfWidth = "calc(" + width + " / 2)";
var fullHeight = height;
var halfHeight = "calc(" + height + " / 2)";

switch (pointingDirection) {
case 'top':
Expand Down Expand Up @@ -2026,20 +2026,13 @@
foregroundColor = _ref.foregroundColor,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor;
var widthAndUnit = getValueAndUnit(width);
var heightAndUnit = getValueAndUnit(height);

if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
throw new PolishedError(60);
}

return _extends__default["default"]({
width: '0',
height: '0',
borderColor: backgroundColor
}, getBorderColor(pointingDirection, foregroundColor), {
borderStyle: 'solid',
borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit)
borderWidth: getBorderWidth(pointingDirection, typeof height === 'number' ? height + "px" : height, typeof width === 'number' ? width + "px" : width)
});
}

Expand Down
20 changes: 10 additions & 10 deletions src/mixins/test/triangle.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('triangle', () => {
borderColor: 'black',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5 0 5 20',
borderWidth: 'calc(10px / 2) 0 calc(10px / 2) 20px',
height: '0',
width: '0',
})
Expand All @@ -34,7 +34,7 @@ describe('triangle', () => {
borderColor: 'black',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5em 0 5em 20em',
borderWidth: 'calc(10em / 2) 0 calc(10em / 2) 20em',
height: '0',
width: '0',
})
Expand All @@ -53,7 +53,7 @@ describe('triangle', () => {
borderColor: 'black',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5.25em 0 5.25em 20.5em',
borderWidth: 'calc(10.5em / 2) 0 calc(10.5em / 2) 20.5em',
height: '0',
width: '0',
})
Expand All @@ -71,7 +71,7 @@ describe('triangle', () => {
borderColor: 'transparent',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5px 0 5px 20px',
borderWidth: 'calc(10px / 2) 0 calc(10px / 2) 20px',
height: '0',
width: '0',
})
Expand All @@ -90,7 +90,7 @@ describe('triangle', () => {
borderColor: 'black',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5px 0 5px 20px',
borderWidth: 'calc(10px / 2) 0 calc(10px / 2) 20px',
height: '0',
width: '0',
})
Expand All @@ -108,7 +108,7 @@ describe('triangle', () => {
borderBottomColor: 'green',
borderColor: 'transparent',
borderStyle: 'solid',
borderWidth: '0 10px 20px 10px',
borderWidth: '0 calc(20px / 2) 20px calc(20px / 2)',
height: '0',
width: '0',
})
Expand All @@ -126,7 +126,7 @@ describe('triangle', () => {
borderColor: 'transparent',
borderLeftColor: 'red',
borderStyle: 'solid',
borderWidth: '5px 0 5px 20px',
borderWidth: 'calc(10px / 2) 0 calc(10px / 2) 20px',
height: '0',
width: '0',
})
Expand All @@ -144,7 +144,7 @@ describe('triangle', () => {
borderColor: 'transparent',
borderStyle: 'solid',
borderTopColor: 'red',
borderWidth: '20px 5px 0 5px',
borderWidth: '20px calc(10px / 2) 0 calc(10px / 2)',
height: '0',
width: '0',
})
Expand All @@ -162,7 +162,7 @@ describe('triangle', () => {
borderColor: 'transparent',
borderRightColor: 'blue',
borderStyle: 'solid',
borderWidth: '10px 10px 10px 0',
borderWidth: 'calc(20px / 2) 10px calc(20px / 2) 0',
height: '0',
width: '0',
})
Expand Down Expand Up @@ -267,7 +267,7 @@ describe('triangle', () => {
)
})

it('should throw an error when height or width is not a unit based value.', () => {
it.skip('should throw an error when height or width is not a unit based value.', () => {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q for the reviewer, do we want to keep this check, but then also explicitly check for a value starting with var(--?

expect(() => {
triangle({
foregroundColor: 'blue',
Expand Down
26 changes: 11 additions & 15 deletions src/mixins/triangle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @flow
import getValueAndUnit from '../helpers/getValueAndUnit'
import PolishedError from '../internalHelpers/_errors'

import type { SideKeyword } from '../types/sideKeyword'
Expand All @@ -8,13 +7,13 @@ import type { TriangleConfiguration } from '../types/triangleConfiguration'

const getBorderWidth = (
pointingDirection: SideKeyword,
height: [number, string],
width: [number, string],
height: number | string,
width: number | string,
): string => {
const fullWidth = `${width[0]}${width[1] || ''}`
const halfWidth = `${width[0] / 2}${width[1] || ''}`
const fullHeight = `${height[0]}${height[1] || ''}`
const halfHeight = `${height[0] / 2}${height[1] || ''}`
const fullWidth = width
const halfWidth = `calc(${width} / 2)`
const fullHeight = height
const halfHeight = `calc(${height} / 2)`

switch (pointingDirection) {
case 'top':
Expand Down Expand Up @@ -90,19 +89,16 @@ export default function triangle({
foregroundColor,
backgroundColor = 'transparent',
}: TriangleConfiguration): Styles {
const widthAndUnit = getValueAndUnit(width)
const heightAndUnit = getValueAndUnit(height)

if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
throw new PolishedError(60)
}

return {
width: '0',
height: '0',
borderColor: backgroundColor,
...getBorderColor(pointingDirection, foregroundColor),
borderStyle: 'solid',
borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit),
borderWidth: getBorderWidth(
pointingDirection,
typeof height === 'number' ? `${height}px` : height,
typeof width === 'number' ? `${width}px` : width,
),
}
}