;
+
+const stretchStyles = ({ stretch = false }: StyleProps & ContainerProps) => {
+ if (stretch) {
+ return css`
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ `;
+ }
+
+ return css`
+ display: inline-flex;
+ align-items: flex-start;
+ width: auto;
+ `;
+};
+
+const baseStyles = ({ theme }: StyleProps) => css`
+ label: selector-group;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+
+ > div {
+ &:not(:last-child) {
+ margin-right: ${theme.spacings.mega};
+ }
+ }
+`;
+
+const StyledSelectorGroup = styled.div(baseStyles, stretchStyles);
+
+const OptionItem = styled.div`
+ label: selector-group__option-item;
+ flex-grow: 1;
+`;
+
+const StyledSelector = styled(Selector)`
+ width: 100%;
+`;
+
/**
* A group of Selectors.
*/
@@ -70,26 +122,44 @@ export const SelectorGroup = React.forwardRef(
name: customName,
label,
multiple,
- ...props
+ size,
+ stretch,
+ ...rest
}: SelectorGroupProps,
ref: SelectorGroupProps['ref'],
) => {
const name = customName || uniqueId('selector-group_');
+
return (
-
+
{options &&
- options.map(({ children, value, ...rest }) => (
-
- {children}
-
+ options.map(({ children, value, ...optionRest }) => (
+
+
+ {children}
+
+
))}
-
+
);
},
);
diff --git a/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap b/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap
index 879acb2026..41731fda6a 100644
--- a/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap
+++ b/packages/circuit-ui/components/SelectorGroup/__snapshots__/SelectorGroup.spec.tsx.snap
@@ -1,6 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SelectorGroup should render with default styles 1`] = `
+.circuit-9 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ width: 100%;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ width: auto;
+}
+
+.circuit-9 > div:not(:last-child) {
+ margin-right: 16px;
+}
+
+.circuit-2 {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
.circuit-0 {
border: 0;
-webkit-clip: rect(0 0 0 0);
@@ -14,108 +45,245 @@ exports[`SelectorGroup should render with default styles 1`] = `
width: 1px;
}
-.circuit-0:focus + label::before {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-0:focus + label::before::-moz-focus-inner {
- border: 0;
+.circuit-0:focus + label {
+ box-shadow: 0 0 0 1px #CCC,0 0 0 4px #AFD0FE;
}
-.circuit-0:checked + label {
- background-color: #F0F6FF;
+.circuit-0:focus + label:hover {
+ box-shadow: 0 0 0 1px #999,0 0 0 4px #AFD0FE;
}
-.circuit-0:checked + label::before {
- border: 2px solid #3063E9;
+.circuit-0:focus + label:active {
+ box-shadow: 0 0 0 1px #666,0 0 0 4px #AFD0FE;
}
.circuit-1 {
- display: block;
+ display: inline-block;
cursor: pointer;
padding: 16px 24px;
- border-radius: 8px;
background-color: #FFF;
text-align: center;
position: relative;
margin-bottom: 16px;
+ border: none;
+ border-radius: 8px;
+ -webkit-transition: box-shadow 0.1s ease-in-out;
+ transition: box-shadow 0.1s ease-in-out;
+ box-shadow: 0 0 0 1px #CCC;
+ padding: calc(8px + 1px) 24px;
+ margin-bottom: 0;
+ width: 100%;
}
-.circuit-1::before {
- display: block;
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+.circuit-1:hover {
+ background-color: #F5F5F5;
+ box-shadow: 0 0 0 1px #999;
+}
+
+.circuit-1:active {
+ background-color: #E6E6E6;
+ box-shadow: 0 0 0 1px #666;
+}
+
+
+`;
+
+exports[`SelectorGroup should render with horizontal layout by default 1`] = `
+.circuit-9 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
width: 100%;
- height: 100%;
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-align-items: flex-start;
+ -webkit-box-align: flex-start;
+ -ms-flex-align: flex-start;
+ align-items: flex-start;
+ width: auto;
+}
+
+.circuit-9 > div:not(:last-child) {
+ margin-right: 16px;
+}
+
+.circuit-2 {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+}
+
+.circuit-0 {
+ border: 0;
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.circuit-0:focus + label {
+ box-shadow: 0 0 0 1px #CCC,0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label:hover {
+ box-shadow: 0 0 0 1px #999,0 0 0 4px #AFD0FE;
+}
+
+.circuit-0:focus + label:active {
+ box-shadow: 0 0 0 1px #666,0 0 0 4px #AFD0FE;
+}
+
+.circuit-1 {
+ display: inline-block;
+ cursor: pointer;
+ padding: 16px 24px;
+ background-color: #FFF;
+ text-align: center;
+ position: relative;
+ margin-bottom: 16px;
+ border: none;
border-radius: 8px;
- border: 1px solid #CCC;
- -webkit-transition: border 0.1s ease-in-out;
- transition: border 0.1s ease-in-out;
+ -webkit-transition: box-shadow 0.1s ease-in-out;
+ transition: box-shadow 0.1s ease-in-out;
+ box-shadow: 0 0 0 1px #CCC;
+ padding: calc(8px + 1px) 24px;
+ margin-bottom: 0;
+ width: 100%;
}
.circuit-1:hover {
background-color: #F5F5F5;
-}
-
-.circuit-1:hover::before {
- border-color: #999;
+ box-shadow: 0 0 0 1px #999;
}
.circuit-1:active {
background-color: #E6E6E6;
-}
-
-.circuit-1:active::before {
- border-color: #666;
+ box-shadow: 0 0 0 1px #666;
}
-
-
-
-
+
+
+
- Option 2
-
-
-
+
+
+
- Option 3
-
+
+
+
`;