Merge pull request #3223 from overleaf/ta-dropdown-stories

Dropdowns: A File Tree Storybook
GitOrigin-RevId: 0a5e911032accac1f5632de26b7ec69524ea04f9

services/web/frontend/stories/dropdown.stories.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Dropdown, DropdownButton, MenuItem } from 'react-bootstrap'
+import Icon from '../js/shared/components/icon'
+
+const MenuItems = () => (
+  <>
+    <MenuItem eventKey="1">Action</MenuItem>
+    <MenuItem eventKey="2">Another action</MenuItem>
+    <MenuItem eventKey="3" active>
+      Active Item
+    </MenuItem>
+    <MenuItem divider />
+    <MenuItem eventKey="4">Separated link</MenuItem>
+  </>
+)
+
+const defaultArgs = {
+  bsStyle: 'default',
+  title: 'Dropdown',
+  pullRight: false,
+  noCaret: false,
+  className: '',
+  defaultOpen: true
+}
+
+export const Default = args => {
+  return (
+    <DropdownButton {...args}>
+      <MenuItems />
+    </DropdownButton>
+  )
+}
+Default.args = { ...defaultArgs }
+
+export const Primary = args => {
+  return (
+    <DropdownButton {...args}>
+      <MenuItems />
+    </DropdownButton>
+  )
+}
+Primary.args = { ...defaultArgs, bsStyle: 'primary' }
+
+export const RightAligned = args => {
+  return (
+    <div style={{ 'text-align': 'right' }}>
+      <DropdownButton {...args}>
+        <MenuItems />
+      </DropdownButton>
+    </div>
+  )
+}
+RightAligned.args = { ...defaultArgs, pullRight: true }
+
+export const SingleIconTransparent = args => {
+  return (
+    <div style={{ 'text-align': 'right' }}>
+      <DropdownButton {...args}>
+        <MenuItems />
+      </DropdownButton>
+    </div>
+  )
+}
+SingleIconTransparent.args = {
+  ...defaultArgs,
+  pullRight: true,
+  title: <Icon type="ellipsis-v" />,
+  noCaret: true,
+  className: 'dropdown-toggle-no-background'
+}
+
+export const Customized = args => {
+  return (
+    <Dropdown pullRight={args.pullRight} defaultOpen={args.defaultOpen}>
+      <Dropdown.Toggle
+        noCaret={args.noCaret}
+        className={args.className}
+        bsStyle={args.bsStyle}
+      >
+        {args.title}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <MenuItems />
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+Customized.args = {
+  ...defaultArgs,
+  component: Dropdown,
+  title: 'Toggle & Menu used separately'
+}
+
+export default {
+  title: 'Dropdown',
+  component: DropdownButton
+}

services/web/frontend/stylesheets/components/dropdowns.less

@@ -20,6 +20,19 @@
   position: relative;
 }
 
+.open button.dropdown-toggle.dropdown-toggle-no-background,
+button.dropdown-toggle.dropdown-toggle-no-background {
+  background-color: transparent;
+  box-shadow: none;
+  border: 0;
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
 // Prevent the focus on the dropdown toggle when closing dropdowns
 .dropdown-toggle:focus {
   outline: 0;