@a-type/ui 6.1.21 → 6.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/drawer/Drawer.module.css +15 -17
  2. package/dist/components/drawer/Drawer.stories.d.ts +2 -0
  3. package/dist/components/drawer/Drawer.stories.js +11 -0
  4. package/dist/components/drawer/Drawer.stories.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/drawer/Drawer.module.css +15 -17
  7. package/src/components/drawer/Drawer.stories.tsx +36 -0
package/dist/components/drawer/Drawer.module.css CHANGED
@@ -72,12 +72,17 @@
72
72
  z-index: 1;
73
73
  max-width: unset;
74
74
  width: 100%;
75
- max-height: calc(100% - var(--top-gap) + var(--bleed));
76
- height: calc(100% - var(--top-gap) + var(--bleed));
77
- margin-bottom: calc(-1 * var(--bleed));
75
+ max-height: calc(100% - var(--top-gap));
76
+ min-height: 0;
77
+ /*
78
+ This padding is what defines the actual height of the drawer.
79
+ */
78
80
  padding-bottom: max(
79
81
  0px,
80
- calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
82
+ calc(
83
+ var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) -
84
+ var(--top-gap)
85
+ )
81
86
  );
82
87
 
83
88
  display: flex;
@@ -105,22 +110,17 @@
105
110
  border-bottom-width: 0;
106
111
 
107
112
  transform: translateY(
108
- calc(
109
- var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
110
- var(--bleed)
111
- )
113
+ calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
112
114
  );
113
115
  will-change: transform;
114
116
 
115
- /* Disable transitions while swiping so movement is immediate */
116
117
  &[data-swiping] {
117
- transition: none;
118
118
  user-select: none;
119
119
  }
120
120
 
121
121
  &[data-starting-style],
122
122
  &[data-ending-style] {
123
- transform: translateY(calc(100% - var(--bleed)));
123
+ transform: translateY(calc(100% + 2px));
124
124
  padding-bottom: 0;
125
125
  box-shadow: 0 0 0 transparent;
126
126
  }
@@ -199,7 +199,7 @@
199
199
 
200
200
  .actions {
201
201
  position: sticky;
202
- bottom: 0;
202
+ bottom: calc(-1 * var(--m-sp));
203
203
  z-index: 100;
204
204
  display: flex;
205
205
  flex-direction: row;
@@ -207,11 +207,9 @@
207
207
  align-items: center;
208
208
  justify-content: end;
209
209
  align-self: end;
210
- @apply --mx-shadow;
211
- --mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
212
- var(--m-shadow-md-spread) var(--m-gray-paper);
213
- @apply --mx-bg(var(--m-surface-ambient-bg));
214
- @apply --mx-bg-faded(50%);
210
+ box-shadow: 0 0 24px 10px var(--m-gray-paper);
211
+ @apply --mx-bg(var(--m-gray-paper));
212
+ @apply --mx-bg-faded(80%);
215
213
  margin-block-start: var(--m-sp-md);
216
214
  gap: var(--m-sp-sm);
217
215
  border-radius: var(--m-surface-rd);
package/dist/components/drawer/Drawer.stories.d.ts CHANGED
@@ -5,3 +5,5 @@ export default meta;
5
5
  type Story = StoryObj<typeof Drawer>;
6
6
  export declare const Default: Story;
7
7
  export declare const NoDefaultClose: Story;
8
+ export declare const Small: Story;
9
+ export declare const SnapPoints: Story;
package/dist/components/drawer/Drawer.stories.js CHANGED
@@ -25,4 +25,15 @@ export const NoDefaultClose = {
25
25
  children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { disableDefaultClose: true, children: [_jsx(Drawer.Title, { children: "No default close" }), _jsx(DummyContent, {}), _jsx(Drawer.Actions, { children: _jsx(Drawer.Close, {}) })] })] })),
26
26
  },
27
27
  };
28
+ export const Small = {
29
+ args: {
30
+ children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Title, { children: "Small drawer" }), _jsxs(Drawer.Actions, { children: [_jsx(Drawer.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
31
+ },
32
+ };
33
+ export const SnapPoints = {
34
+ args: {
35
+ snapPoints: [0.5, 1],
36
+ children: (_jsxs(_Fragment, { children: [_jsx(Drawer.Trigger, { render: _jsx(Button, {}), children: "Open" }), _jsxs(Drawer.Content, { children: [_jsx(Drawer.Title, { children: "Snap points" }), _jsx(DummyContent, {}), _jsxs(Drawer.Actions, { children: [_jsx(Drawer.Close, {}), _jsx(Button, { emphasis: "primary", children: "Accept" })] })] })] })),
37
+ },
38
+ };
28
39
  //# sourceMappingURL=Drawer.stories.js.map
package/dist/components/drawer/Drawer.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAQ;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,SAAS,YAAY;IACpB,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,KAAC,EAAE,+BAAkB,EACrB,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,8NAIE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,EACzC,KAAC,CAAC,0aAOE,EACJ,KAAC,KAAK,IAAC,WAAW,EAAC,mBAAmB,GAAG,IACpC,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,8BAA2B,EACxC,KAAC,YAAY,KAAG,EAChB,MAAC,MAAM,CAAC,OAAO,eACd,KAAC,MAAM,CAAC,KAAK,KAAG,EAChB,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,uBAAgB,IAC1B,IACD,IACf,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,KAAG,qBAAuB,EACzD,MAAC,MAAM,CAAC,OAAO,IAAC,mBAAmB,mBAClC,KAAC,MAAM,CAAC,KAAK,mCAAgC,EAC7C,KAAC,YAAY,KAAG,EAChB,KAAC,MAAM,CAAC,OAAO,cACd,KAAC,MAAM,CAAC,KAAK,KAAG,GACA,IACD,IACf,CACH;KACD;CACD,CAAC"}
1
+ {"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.1.21",
3
+ "version": "6.1.22",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/drawer/Drawer.module.css CHANGED
@@ -72,12 +72,17 @@
72
72
  z-index: 1;
73
73
  max-width: unset;
74
74
  width: 100%;
75
- max-height: calc(100% - var(--top-gap) + var(--bleed));
76
- height: calc(100% - var(--top-gap) + var(--bleed));
77
- margin-bottom: calc(-1 * var(--bleed));
75
+ max-height: calc(100% - var(--top-gap));
76
+ min-height: 0;
77
+ /*
78
+ This padding is what defines the actual height of the drawer.
79
+ */
78
80
  padding-bottom: max(
79
81
  0px,
80
- calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
82
+ calc(
83
+ var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) -
84
+ var(--top-gap)
85
+ )
81
86
  );
82
87
 
83
88
  display: flex;
@@ -105,22 +110,17 @@
105
110
  border-bottom-width: 0;
106
111
 
107
112
  transform: translateY(
108
- calc(
109
- var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
110
- var(--bleed)
111
- )
113
+ calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
112
114
  );
113
115
  will-change: transform;
114
116
 
115
- /* Disable transitions while swiping so movement is immediate */
116
117
  &[data-swiping] {
117
- transition: none;
118
118
  user-select: none;
119
119
  }
120
120
 
121
121
  &[data-starting-style],
122
122
  &[data-ending-style] {
123
- transform: translateY(calc(100% - var(--bleed)));
123
+ transform: translateY(calc(100% + 2px));
124
124
  padding-bottom: 0;
125
125
  box-shadow: 0 0 0 transparent;
126
126
  }
@@ -199,7 +199,7 @@
199
199
 
200
200
  .actions {
201
201
  position: sticky;
202
- bottom: 0;
202
+ bottom: calc(-1 * var(--m-sp));
203
203
  z-index: 100;
204
204
  display: flex;
205
205
  flex-direction: row;
@@ -207,11 +207,9 @@
207
207
  align-items: center;
208
208
  justify-content: end;
209
209
  align-self: end;
210
- @apply --mx-shadow;
211
- --mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
212
- var(--m-shadow-md-spread) var(--m-gray-paper);
213
- @apply --mx-bg(var(--m-surface-ambient-bg));
214
- @apply --mx-bg-faded(50%);
210
+ box-shadow: 0 0 24px 10px var(--m-gray-paper);
211
+ @apply --mx-bg(var(--m-gray-paper));
212
+ @apply --mx-bg-faded(80%);
215
213
  margin-block-start: var(--m-sp-md);
216
214
  gap: var(--m-sp-sm);
217
215
  border-radius: var(--m-surface-rd);
package/src/components/drawer/Drawer.stories.tsx CHANGED
@@ -107,3 +107,39 @@ export const NoDefaultClose: Story = {
107
107
  ),
108
108
  },
109
109
  };
110
+
111
+ export const Small: Story = {
112
+ args: {
113
+ children: (
114
+ <>
115
+ <Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
116
+ <Drawer.Content>
117
+ <Drawer.Title>Small drawer</Drawer.Title>
118
+ <Drawer.Actions>
119
+ <Drawer.Close />
120
+ <Button emphasis="primary">Accept</Button>
121
+ </Drawer.Actions>
122
+ </Drawer.Content>
123
+ </>
124
+ ),
125
+ },
126
+ };
127
+
128
+ export const SnapPoints: Story = {
129
+ args: {
130
+ snapPoints: [0.5, 1],
131
+ children: (
132
+ <>
133
+ <Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
134
+ <Drawer.Content>
135
+ <Drawer.Title>Snap points</Drawer.Title>
136
+ <DummyContent />
137
+ <Drawer.Actions>
138
+ <Drawer.Close />
139
+ <Button emphasis="primary">Accept</Button>
140
+ </Drawer.Actions>
141
+ </Drawer.Content>
142
+ </>
143
+ ),
144
+ },
145
+ };