feat(ItemGroup): Complete basic content (#3)

#3
fluent-org · Aug 11, 2019 · 6ba7e02 · 6ba7e02
1 parent 7623484
commit 6ba7e02
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 71 deletions.
diff --git a/packages/fluent-ui.com/src/docs/components/ItemGroup/api.md b/packages/fluent-ui.com/src/docs/components/ItemGroup/api.md
@@ -16,6 +16,7 @@ import { ItemGroup } from '@fluent-ui/core'
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| children | React.ReactElement &or; React.ReactElement[] |  | The content of the `ItemGroupGroup`. |
+| children | React.ReactElement &or; React.ReactElement[] |  | The content of the `ItemGroup`. |
 | title | string |  | The text displayed by the title. |
 | icon | React.ReactElement |  | The icon displayed by the title. |
+| shrink | 'expand' &or; 'float' | 'expand' | How the control group is expanded. |
diff --git a/packages/fluent-ui/src/Input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/fluent-ui/src/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Input basic 1`] = `
   opacity: 0;
 }
 
-.c2.zoom-enter {
+.c2.zoom-enter-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
   transform: scale3d(0,0,0);
@@ -40,12 +40,6 @@ exports[`Input basic 1`] = `
   transform: none;
 }
 
-.c2.zoom-exit {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
 .c2.zoom-exit-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
@@ -108,6 +102,41 @@ exports[`Input basic 1`] = `
   height: 0;
 }
 
+.c2.grow-enter {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-enter-active {
+  opacity: 1;
+  -webkit-transform: scale(1,1);
+  -ms-transform: scale(1,1);
+  transform: scale(1,1);
+}
+
+.c2.grow-enter-done {
+  opacity: 1;
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
+.c2.grow-exit-active {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-exit-done {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
 .c0 {
   display: inline-block;
   position: relative;
@@ -219,7 +248,7 @@ exports[`Input prop cleared 1`] = `
   opacity: 0;
 }
 
-.c2.zoom-enter {
+.c2.zoom-enter-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
   transform: scale3d(0,0,0);
@@ -231,12 +260,6 @@ exports[`Input prop cleared 1`] = `
   transform: none;
 }
 
-.c2.zoom-exit {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
 .c2.zoom-exit-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
@@ -299,6 +322,41 @@ exports[`Input prop cleared 1`] = `
   height: 0;
 }
 
+.c2.grow-enter {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-enter-active {
+  opacity: 1;
+  -webkit-transform: scale(1,1);
+  -ms-transform: scale(1,1);
+  transform: scale(1,1);
+}
+
+.c2.grow-enter-done {
+  opacity: 1;
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
+.c2.grow-exit-active {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-exit-done {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
 .c0 {
   display: inline-block;
   position: relative;
@@ -441,7 +499,7 @@ exports[`Input prop error 1`] = `
   opacity: 0;
 }
 
-.c2.zoom-enter {
+.c2.zoom-enter-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
   transform: scale3d(0,0,0);
@@ -453,12 +511,6 @@ exports[`Input prop error 1`] = `
   transform: none;
 }
 
-.c2.zoom-exit {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
 .c2.zoom-exit-active {
   -webkit-transform: scale3d(0,0,0);
   -ms-transform: scale3d(0,0,0);
@@ -521,6 +573,41 @@ exports[`Input prop error 1`] = `
   height: 0;
 }
 
+.c2.grow-enter {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-enter-active {
+  opacity: 1;
+  -webkit-transform: scale(1,1);
+  -ms-transform: scale(1,1);
+  transform: scale(1,1);
+}
+
+.c2.grow-enter-done {
+  opacity: 1;
+  -webkit-transform: none;
+  -ms-transform: none;
+  transform: none;
+}
+
+.c2.grow-exit-active {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
+.c2.grow-exit-done {
+  opacity: 0;
+  -webkit-transform: scale(0.75,0.5625);
+  -ms-transform: scale(0.75,0.5625);
+  transform: scale(0.75,0.5625);
+}
+
 .c0 {
   display: inline-block;
   position: relative;

diff --git a/packages/fluent-ui/src/ItemGroup/ItemGroup.styled.ts b/packages/fluent-ui/src/ItemGroup/ItemGroup.styled.ts
@@ -1,17 +1,20 @@
-import { styled, th } from '../styles/styled'
+import Box from '../Box'
+import { styled, th, variant, css } from '../styles/styled'
 import { StyledItemWrapper } from '../Item/Item.styled'
 
-export const StyledItemGroupWrapper = styled.div``
-
 export const StyledItemGroupTitleWrapper = styled.div<{ active: boolean }>`
   position: relative;
   color: ${({ active }): string => (active ? th.color('primary.default') : 'inherit')};
+  & > ${StyledItemWrapper} {
+    padding-right: 36px;
+  }
 `
 
 export const StyledItemGroupTitleIconWrapper = styled.div<{
   open: boolean
   expanded: boolean
   acrylic: boolean
+  float?: boolean
 }>`
   width: 24px;
   height: 24px;
@@ -25,13 +28,30 @@ export const StyledItemGroupTitleIconWrapper = styled.div<{
   align-items: center;
   font-size: 12px;
   transition: ${th.transition('navigation')};
-  transform: rotate(${({ open }): number => (open ? 180 : 0)}deg);
+  ${({ open, float }): string => (!float ? `transform: rotate(${open ? 180 : 0}deg);` : '')}
   z-index: ${({ acrylic }): number => (acrylic ? -1 : 1)};
   opacity: ${({ expanded }): number => (expanded ? 1 : 0)};
 `
 
-export const StyledItemGroupItemWrapper = styled.div<{ level: number }>`
+export const StyledItemGroupItemWrapper = styled(Box).attrs(
+  (props): any => ({
+    backgroundColor: props.acrylic && th.color('standard.light2').call(undefined, props)
+  })
+)<{ level: number; float?: boolean }>`
+  overflow: visible;
+  box-shadow: ${th.shadow('3')};
   ${StyledItemWrapper} {
-    padding-left: ${({ level }): number => (level ? 40 + level * 12 : 0)}px !important;
+    ${variant({
+      prop: 'float',
+      default: 'false',
+      variants: {
+        true: css`
+          padding-right: 40px;
+        `,
+        false: css`
+          padding-left: ${({ level }: any): number => (level ? 40 + level * 12 : 0)}px;
+        `
+      }
+    })}
   }
 `