From 52e0f3a77181880efd608c935926fd32e6735204 Mon Sep 17 00:00:00 2001
From: MrPanquecas <ricardo.simoescosta@hotmail.com>
Date: Thu, 11 Jul 2019 17:20:30 +0100
Subject: [PATCH 1/4] Select component allow other units in width, fix #46

---
 src/components/Select/Select.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index a94be16..f79674c 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -135,7 +135,7 @@ const Select = ({
     <Wrapper
       className={className}
       onClick={() => setOpen(!open)}
-      style={{ ...style, width }}
+      style={{ ...style, width: width ? width : "auto" }}
       shadow={shadow}
       {...otherProps}
     >
@@ -170,7 +170,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,

From d09dc7c94b949e6ee4e45fc6c0bc585767ff3bec Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Fri, 12 Jul 2019 17:23:00 +0200
Subject: [PATCH 2/4] closes #45

---
 src/components/Select/Select.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index f79674c..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};

From 99a1d2e9e237f393ff49ab318254e810e7d6d3b2 Mon Sep 17 00:00:00 2001
From: Artur Bien <artur.bien@gmail.com>
Date: Fri, 12 Jul 2019 18:04:43 +0200
Subject: [PATCH 3/4] closes #44

---
 src/components/Progress/Progress.js | 41 +++++++++++++----------------
 1 file changed, 19 insertions(+), 22 deletions(-)

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 }) => (
-  <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
 };
 

From ea317b8618e8fd064db8225c558cda9625cb40af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Bie=C5=84?= <artur.bien@gmail.com>
Date: Tue, 16 Jul 2019 21:51:15 +0200
Subject: [PATCH 4/4] Update README.md

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

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