diff --git a/README.md b/README.md
index cc1d7b4..ed06bba 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,12 @@
+
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,