Skip to content

Commit

Permalink
Add unstyled prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@nderkim @dcousens
nderkim authored and dcousens committed Nov 16, 2022
1 parent 5d960cc commit 3aee85c
Show file tree
Hide file tree
Showing 20 changed files with 548 additions and 288 deletions.
6 changes: 5 additions & 1 deletion packages/react-select/src/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,8 @@ export interface Props<
tabIndex: number;
/** Select the currently focused option when the user presses tab */
tabSelectsValue: boolean;
/** Remove all non-essential styles */
unstyled: boolean;
/** The value of the select; reflected by the selected option */
value: PropsValue<Option>;
/** Sets the form attribute on the input */
Expand Down Expand Up @@ -315,6 +317,7 @@ export const defaultProps = {
styles: {},
tabIndex: 0,
tabSelectsValue: true,
unstyled: false,
};

interface State<
Expand Down Expand Up @@ -1092,7 +1095,8 @@ export default class Select<
key: Key,
props: StylesProps<Option, IsMulti, Group>[Key]
) => {
const base = defaultStyles[key](props as any);
const { unstyled } = this.props;
const base = defaultStyles[key](props as any, unstyled);
base.boxSizing = 'border-box';
const custom = this.props.styles[key];
return custom ? custom(base, props as any) : base;
Expand Down
28 changes: 14 additions & 14 deletions packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
cursor: default;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
position: relative;
-webkit-transition: all 100ms;
transition: all 100ms;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
}
Expand All @@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2px 8px;
-webkit-overflow-scrolling: touch;
position: relative;
overflow: hidden;
padding: 2px 8px;
box-sizing: border-box;
}
.emotion-5 {
color: hsl(0, 0%, 50%);
grid-area: 1/1/2/3;
color: hsl(0, 0%, 50%);
margin-left: 2px;
margin-right: 2px;
box-sizing: border-box;
}
.emotion-6 {
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
visibility: visible;
color: hsl(0, 0%, 20%);
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: inline-grid;
grid-area: 1/1/2/3;
grid-template-columns: 0 min-content;
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
color: hsl(0, 0%, 20%);
box-sizing: border-box;
}
Expand Down Expand Up @@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
width: 1px;
background-color: hsl(0, 0%, 80%);
margin-bottom: 8px;
margin-top: 8px;
width: 1px;
box-sizing: border-box;
}
.emotion-9 {
color: hsl(0, 0%, 80%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-transition: color 150ms;
transition: color 150ms;
color: hsl(0, 0%, 80%);
padding: 8px;
box-sizing: border-box;
}
Expand Down
28 changes: 14 additions & 14 deletions packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
cursor: default;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
position: relative;
-webkit-transition: all 100ms;
transition: all 100ms;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
}
Expand All @@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2px 8px;
-webkit-overflow-scrolling: touch;
position: relative;
overflow: hidden;
padding: 2px 8px;
box-sizing: border-box;
}
.emotion-5 {
color: hsl(0, 0%, 50%);
grid-area: 1/1/2/3;
color: hsl(0, 0%, 50%);
margin-left: 2px;
margin-right: 2px;
box-sizing: border-box;
}
.emotion-6 {
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
visibility: visible;
color: hsl(0, 0%, 20%);
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: inline-grid;
grid-area: 1/1/2/3;
grid-template-columns: 0 min-content;
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
color: hsl(0, 0%, 20%);
box-sizing: border-box;
}
Expand Down Expand Up @@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
width: 1px;
background-color: hsl(0, 0%, 80%);
margin-bottom: 8px;
margin-top: 8px;
width: 1px;
box-sizing: border-box;
}
.emotion-9 {
color: hsl(0, 0%, 80%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-transition: color 150ms;
transition: color 150ms;
color: hsl(0, 0%, 80%);
padding: 8px;
box-sizing: border-box;
}
Expand Down
28 changes: 14 additions & 14 deletions packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ exports[`defaults - snapshot 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
cursor: default;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -45,6 +40,11 @@ exports[`defaults - snapshot 1`] = `
position: relative;
-webkit-transition: all 100ms;
transition: all 100ms;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
}
Expand All @@ -65,33 +65,33 @@ exports[`defaults - snapshot 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2px 8px;
-webkit-overflow-scrolling: touch;
position: relative;
overflow: hidden;
padding: 2px 8px;
box-sizing: border-box;
}
.emotion-5 {
color: hsl(0, 0%, 50%);
grid-area: 1/1/2/3;
color: hsl(0, 0%, 50%);
margin-left: 2px;
margin-right: 2px;
box-sizing: border-box;
}
.emotion-6 {
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
visibility: visible;
color: hsl(0, 0%, 20%);
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: inline-grid;
grid-area: 1/1/2/3;
grid-template-columns: 0 min-content;
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
color: hsl(0, 0%, 20%);
box-sizing: border-box;
}
Expand Down Expand Up @@ -130,22 +130,22 @@ exports[`defaults - snapshot 1`] = `
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
width: 1px;
background-color: hsl(0, 0%, 80%);
margin-bottom: 8px;
margin-top: 8px;
width: 1px;
box-sizing: border-box;
}
.emotion-9 {
color: hsl(0, 0%, 80%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-transition: color 150ms;
transition: color 150ms;
color: hsl(0, 0%, 80%);
padding: 8px;
box-sizing: border-box;
}
Expand Down
28 changes: 14 additions & 14 deletions packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ exports[`snapshot - defaults 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
cursor: default;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -45,6 +40,11 @@ exports[`snapshot - defaults 1`] = `
position: relative;
-webkit-transition: all 100ms;
transition: all 100ms;
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
}
Expand All @@ -65,33 +65,33 @@ exports[`snapshot - defaults 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 2px 8px;
-webkit-overflow-scrolling: touch;
position: relative;
overflow: hidden;
padding: 2px 8px;
box-sizing: border-box;
}
.emotion-5 {
color: hsl(0, 0%, 50%);
grid-area: 1/1/2/3;
color: hsl(0, 0%, 50%);
margin-left: 2px;
margin-right: 2px;
box-sizing: border-box;
}
.emotion-6 {
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
visibility: visible;
color: hsl(0, 0%, 20%);
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: inline-grid;
grid-area: 1/1/2/3;
grid-template-columns: 0 min-content;
margin: 2px;
padding-bottom: 2px;
padding-top: 2px;
color: hsl(0, 0%, 20%);
box-sizing: border-box;
}
Expand Down Expand Up @@ -130,22 +130,22 @@ exports[`snapshot - defaults 1`] = `
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
width: 1px;
background-color: hsl(0, 0%, 80%);
margin-bottom: 8px;
margin-top: 8px;
width: 1px;
box-sizing: border-box;
}
.emotion-9 {
color: hsl(0, 0%, 80%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-transition: color 150ms;
transition: color 150ms;
color: hsl(0, 0%, 80%);
padding: 8px;
box-sizing: border-box;
}
Expand Down
Loading

0 comments on commit 3aee85c

Please sign in to comment.