diff --git a/README.md b/README.md index cc1d7b4..ed06bba 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,12 @@ React95 license

+

+ Components - + Website - + Discord Chat - + PayPal donation 💰 +

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components 💅

diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js index 37d073a..bd18fea 100644 --- a/src/components/Progress/Progress.js +++ b/src/components/Progress/Progress.js @@ -8,7 +8,6 @@ import { blockSizes } from "../common/system"; const Wrapper = styled(Cutout)` display: inline-block; - width: ${props => props.width}px; height: ${blockSizes.md}; position: relative; text-align: center; @@ -26,42 +25,40 @@ const WhiteBar = styled.div` color: ${({ theme }) => theme.text}; `; -const BlueBarContainer = styled.div` - width: ${props => props.percent}%; +const BlueBar = styled.div` position: absolute; - top: 0; - left: 0; - margin-left: 2px; - margin-top: -2px; - overflow: hidden; - background: ${({ theme }) => theme.progress}; -`; - -const BlueBar = styled.div` - width: ${props => props.width - 8}px; - height: 100%; + top: -2px; + left: 2px; + width: calc(100% - 4px); line-height: ${blockSizes.md}; + color: ${({ theme }) => theme.textInvert}; + background: ${({ theme }) => theme.progress}; + clip-path: polygon( + 0 0, + ${({ percent }) => percent}% 0, + ${({ percent }) => percent}% 100%, + 0 100% + ); `; -const ProgressBar = ({ width, percent, shadow }) => ( - - {percent}% - - {percent}% - +const ProgressBar = ({ width, percent, shadow, style }) => ( + + {percent}% + {percent}% ); ProgressBar.defaultProps = { - width: 250, + width: "100%", percent: 0, shadow: true }; ProgressBar.propTypes = { - width: propTypes.number, + width: propTypes.oneOfType([propTypes.string, propTypes.number]), percent: propTypes.number, + style: propTypes.object, shadow: propTypes.bool }; diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index a94be16..da3218f 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -103,6 +103,8 @@ const StyledDropdownListItem = styled.li` line-height: calc(${blockSizes.md} - 4px); font-size: ${fontSizes.md}; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; color: ${({ theme }) => theme.inputText}; &:hover { background: ${({ theme }) => theme.hoverBackground}; @@ -135,7 +137,7 @@ const Select = ({ setOpen(!open)} - style={{ ...style, width }} + style={{ ...style, width: width ? width : "auto" }} shadow={shadow} {...otherProps} > @@ -170,7 +172,7 @@ const Select = ({ Select.propTypes = { items: propTypes.arrayOf(propTypes.object).isRequired, className: propTypes.string, - width: propTypes.number, + width: propTypes.oneOfType([propTypes.string, propTypes.number]), height: propTypes.number, selectedIndex: propTypes.number, shadow: propTypes.bool,