@a-type/ui 6.1.21 → 6.1.23

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 +23 -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 +23 -17
  7. package/src/components/drawer/Drawer.stories.tsx +36 -0
package/dist/components/drawer/Drawer.module.css CHANGED
@@ -72,12 +72,25 @@
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
+
80
+ Movement is added to expand the bottom padding while swiping upward using
81
+ snap points. Movement contribution is capped at 0 (only negative is included)
82
+ to make sure a downward swipe to close a drawer is respected (downward swipe
83
+ means positive movement value; if we added this to padding in real time, we
84
+ would be increasing the height of the drawer exactly commensurate to the
85
+ attempted downward movement, making it "stuck" - if this behavior resurfaces,
86
+ this is the line to inspect...
87
+ */
78
88
  padding-bottom: max(
79
89
  0px,
80
- calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
90
+ calc(
91
+ var(--drawer-snap-point-offset, 0px) +
92
+ min(0px, var(--drawer-swipe-movement-y)) - var(--top-gap)
93
+ )
81
94
  );
82
95
 
83
96
  display: flex;
@@ -105,22 +118,17 @@
105
118
  border-bottom-width: 0;
106
119
 
107
120
  transform: translateY(
108
- calc(
109
- var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
110
- var(--bleed)
111
- )
121
+ calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
112
122
  );
113
123
  will-change: transform;
114
124
 
115
- /* Disable transitions while swiping so movement is immediate */
116
125
  &[data-swiping] {
117
- transition: none;
118
126
  user-select: none;
119
127
  }
120
128
 
121
129
  &[data-starting-style],
122
130
  &[data-ending-style] {
123
- transform: translateY(calc(100% - var(--bleed)));
131
+ transform: translateY(calc(100% + 2px));
124
132
  padding-bottom: 0;
125
133
  box-shadow: 0 0 0 transparent;
126
134
  }
@@ -199,7 +207,7 @@
199
207
 
200
208
  .actions {
201
209
  position: sticky;
202
- bottom: 0;
210
+ bottom: calc(-1 * var(--m-sp));
203
211
  z-index: 100;
204
212
  display: flex;
205
213
  flex-direction: row;
@@ -207,11 +215,9 @@
207
215
  align-items: center;
208
216
  justify-content: end;
209
217
  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%);
218
+ box-shadow: 0 0 24px 10px var(--m-gray-paper);
219
+ @apply --mx-bg(var(--m-gray-paper));
220
+ @apply --mx-bg-faded(80%);
215
221
  margin-block-start: var(--m-sp-md);
216
222
  gap: var(--m-sp-sm);
217
223
  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":";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;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,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,+BAA4B,EACzC,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,UAAU,GAAU;IAChC,IAAI,EAAE;QACL,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;QACpB,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"}
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.23",
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,25 @@
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
+
80
+ Movement is added to expand the bottom padding while swiping upward using
81
+ snap points. Movement contribution is capped at 0 (only negative is included)
82
+ to make sure a downward swipe to close a drawer is respected (downward swipe
83
+ means positive movement value; if we added this to padding in real time, we
84
+ would be increasing the height of the drawer exactly commensurate to the
85
+ attempted downward movement, making it "stuck" - if this behavior resurfaces,
86
+ this is the line to inspect...
87
+ */
78
88
  padding-bottom: max(
79
89
  0px,
80
- calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
90
+ calc(
91
+ var(--drawer-snap-point-offset, 0px) +
92
+ min(0px, var(--drawer-swipe-movement-y)) - var(--top-gap)
93
+ )
81
94
  );
82
95
 
83
96
  display: flex;
@@ -105,22 +118,17 @@
105
118
  border-bottom-width: 0;
106
119
 
107
120
  transform: translateY(
108
- calc(
109
- var(--drawer-swipe-movement-y) + var(--drawer-snap-point-offset) -
110
- var(--bleed)
111
- )
121
+ calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
112
122
  );
113
123
  will-change: transform;
114
124
 
115
- /* Disable transitions while swiping so movement is immediate */
116
125
  &[data-swiping] {
117
- transition: none;
118
126
  user-select: none;
119
127
  }
120
128
 
121
129
  &[data-starting-style],
122
130
  &[data-ending-style] {
123
- transform: translateY(calc(100% - var(--bleed)));
131
+ transform: translateY(calc(100% + 2px));
124
132
  padding-bottom: 0;
125
133
  box-shadow: 0 0 0 transparent;
126
134
  }
@@ -199,7 +207,7 @@
199
207
 
200
208
  .actions {
201
209
  position: sticky;
202
- bottom: 0;
210
+ bottom: calc(-1 * var(--m-sp));
203
211
  z-index: 100;
204
212
  display: flex;
205
213
  flex-direction: row;
@@ -207,11 +215,9 @@
207
215
  align-items: center;
208
216
  justify-content: end;
209
217
  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%);
218
+ box-shadow: 0 0 24px 10px var(--m-gray-paper);
219
+ @apply --mx-bg(var(--m-gray-paper));
220
+ @apply --mx-bg-faded(80%);
215
221
  margin-block-start: var(--m-sp-md);
216
222
  gap: var(--m-sp-sm);
217
223
  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
+ };