@@ -12,7 +12,6 @@ import { DropdownNubbinPositions } from '../../menu-dropdown/menu-dropdown';
12
12
import List from '../../utilities/menu-list' ;
13
13
import Button from '../../button' ;
14
14
import Trigger from '../../menu-dropdown/button-trigger' ;
15
- import Popover from '../../popover' ;
16
15
17
16
const options = [
18
17
{
@@ -213,143 +212,12 @@ const getDropdownCustomContent = (props) => (
213
212
</ Dropdown >
214
213
) ;
215
214
216
- const getVictor = ( props ) => (
217
- < div >
218
- < div >
219
- < Popover
220
- align = "bottom right"
221
- assistiveText = "This is a popover."
222
- body = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
223
- hasStaticAlignment
224
- heading = "My Popover"
225
- position = "absolute"
226
- id = "myPopoverId"
227
- >
228
- < Button
229
- iconVariant = "container"
230
- iconCategory = "utility"
231
- iconName = "down"
232
- variant = "icon"
233
- />
234
- </ Popover >
235
- </ div >
236
- < div style = { { marginBottom : 0 } } >
237
- Nubbin:
238
- < Dropdown
239
- iconName = "down"
240
- buttonVariant = "icon"
241
- iconVariant = "bare"
242
- align = "right"
243
- nubbinPosition = "top right"
244
- assistiveText = "More Options"
245
- menuPosition = "relative"
246
- onSelect = { ( value ) => {
247
- console . log ( 'selected: ' , value ) ;
248
- } }
249
- options = { [
250
- { label : 'Menu Sub Heading' , type : 'header' } ,
251
- { label : 'Menu Item One' , value : 'A0' } ,
252
- { label : 'Menu Item Two' , value : 'B0' } ,
253
- { label : 'Menu Sub Heading' , type : 'header' } ,
254
- { label : 'Menu Item One' , value : 'A0' } ,
255
- { label : 'Menu Item Two' , value : 'B0' } ,
256
- ] }
257
- >
258
- < Trigger >
259
- < Button iconVariant = "container" iconName = "down" />
260
- </ Trigger >
261
- </ Dropdown >
262
- </ div >
263
- < div style = { { marginBottom : 0 } } >
264
- relative:
265
- < Dropdown
266
- iconName = "down"
267
- buttonVariant = "icon"
268
- iconVariant = "bare"
269
- nubbinPosition = "top right"
270
- assistiveText = "More Options"
271
- menuPosition = "relative"
272
- onSelect = { ( value ) => {
273
- console . log ( 'selected: ' , value ) ;
274
- } }
275
- options = { [
276
- { label : 'Menu Sub Heading' , type : 'header' } ,
277
- { label : 'Menu Item One' , value : 'A0' } ,
278
- { label : 'Menu Item Two' , value : 'B0' } ,
279
- { label : 'Menu Sub Heading' , type : 'header' } ,
280
- { label : 'Menu Item One' , value : 'A0' } ,
281
- { label : 'Menu Item Two' , value : 'B0' } ,
282
- ] }
283
- >
284
- < Trigger >
285
- < Button iconVariant = "container" iconName = "down" />
286
- </ Trigger >
287
- </ Dropdown >
288
- </ div >
289
- < div style = { { marginBottom : 0 } } >
290
- absolute:
291
- < Dropdown
292
- iconName = "down"
293
- buttonVariant = "icon"
294
- iconVariant = "bare"
295
- nubbinPosition = "top right"
296
- assistiveText = "More Options"
297
- menuPosition = "absolute"
298
- onSelect = { ( value ) => {
299
- console . log ( 'selected: ' , value ) ;
300
- } }
301
- options = { [
302
- { label : 'Menu Sub Heading' , type : 'header' } ,
303
- { label : 'Menu Item One' , value : 'A0' } ,
304
- { label : 'Menu Item Two' , value : 'B0' } ,
305
- { label : 'Menu Sub Heading' , type : 'header' } ,
306
- { label : 'Menu Item One' , value : 'A0' } ,
307
- { label : 'Menu Item Two' , value : 'B0' } ,
308
- ] }
309
- >
310
- < Trigger >
311
- < Button iconVariant = "container" iconName = "down" />
312
- </ Trigger >
313
- </ Dropdown >
314
- </ div >
315
- < div style = { { marginBottom : 0 } } >
316
- Overflow:
317
- < Dropdown
318
- iconName = "down"
319
- buttonVariant = "icon"
320
- iconVariant = "bare"
321
- align = "right"
322
- assistiveText = "More Options"
323
- menuPosition = "overflowBoundaryElement"
324
- onSelect = { ( value ) => {
325
- console . log ( 'selected: ' , value ) ;
326
- } }
327
- options = { [
328
- { label : 'Menu Sub Heading' , type : 'header' } ,
329
- { label : 'Menu Item One' , value : 'A0' } ,
330
- { label : 'Menu Item Two' , value : 'B0' } ,
331
- { label : 'Menu Sub Heading' , type : 'header' } ,
332
- { label : 'Menu Item One' , value : 'A0' } ,
333
- { label : 'Menu Item Two' , value : 'B0' } ,
334
- ] }
335
- />
336
- </ div >
337
- </ div >
338
- ) ;
339
-
340
215
storiesOf ( MENU_DROPDOWN , module )
341
216
. addDecorator ( ( getStory ) => (
342
- < div className = "" >
217
+ < div className = "slds-p-around--medium slds-text-align--center " >
343
218
< IconSettings iconPath = "/assets/icons" > { getStory ( ) } </ IconSettings >
344
219
</ div >
345
220
) )
346
- . add ( 'Victor breaks things' , ( ) => (
347
- < div >
348
- { getVictor ( ) }
349
- < hr />
350
- < div style = { { marginLeft : 500 } } > { getVictor ( ) } </ div >
351
- </ div >
352
- ) )
353
221
. add ( 'Base' , ( ) =>
354
222
getDropdown ( {
355
223
align : 'right' ,
0 commit comments