Merge branch 'master' of https://github.com/luizbaldi/React95 into testing-library

README.md

@@ -6,6 +6,12 @@
   <a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/license/react95" alt="React95 license"></a>
   
 </p>
+<h3 align="center">
+  <a href="https://arturbien.github.io/React95/?path=/story/select--fixed-width">Components</a> -
+  <a href="https://react95.io/">Website</a> -
+  <a href="https://discord.gg/VfMmpPq">Discord Chat</a> -
+  <a href="https://www.paypal.me/react95">PayPal donation 💰</a>
+</h3>
 <p align="center">
   <b>Refreshed</b> Windows95 UI components for your modern React apps. <br> Built with styled-components 💅</p>
   

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 }) => (
-  <Wrapper width={width} shadow={shadow}>
-    <WhiteBar width={width}>{percent}%</WhiteBar>
-    <BlueBarContainer percent={percent}>
-      <BlueBar width={width}>{percent}%</BlueBar>
-    </BlueBarContainer>
+const ProgressBar = ({ width, percent, shadow, style }) => (
+  <Wrapper style={{ ...style, width }} shadow={shadow}>
+    <WhiteBar>{percent}%</WhiteBar>
+    <BlueBar percent={percent}>{percent}%</BlueBar>
   </Wrapper>
 );
 
 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
 };
 

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 = ({
     <Wrapper
       className={className}
       onClick={() => 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,