@cloudbees/honeyui-dropdown - npm Package Compare versions -...

stories/components/searchbox.jsx

stories/dropdown-search.story.jsx

yarn-error.log

3

dist/index.css.d.ts

		@@ -28,2 +28,5 @@ // This file is automatically generated.
		'dropup': string;
		'honeyui-searchbox': string;
		'magnifier': string;
		'reset': string;
		'show': string;
		@@ -30,0 +33,0 @@ }

4

package.json

		{
		"name": "@cloudbees/honeyui-dropdown",
		"version": "2.1.0",
		"version": "2.2.0",
		"description": "",
		@@ -27,3 +27,3 @@ "main": "dist/index.css",
		},
		"gitHead": "5109186728e6e3f54431118c8d9953b30d0a9f06"
		"gitHead": "97201d65de8b898d8c5899ea2b4ec147a4fa4bc2"
		}

56

stories/dropdown-basic.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<div className="container">
		<div className="row">
		<div className="col">
		<p className="lead">
		Toggle contextual overlays for displaying lists of links and more with the dropdown
		component.
		</p>
		<hr className="pb-3"></hr>
		<div className="row">
		<div className="col p-2">
		<h2>Single button</h2>
		<p>
		Any single <code>.btn </code>can be turned into a dropdown toggle with some markup
		changes. Here’s how you can put them to work with either <code>button</code> elements:
		</p>
		<div className="pt-3">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		@@ -23,0 +43,0 @@ </div>

318

stories/dropdown-button-variant.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Dropdown Variants</h2>
		<p>Utilize dropdown buttons with any button variant (intent color).</p>
		<div className="pt-3">
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>

		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>

		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-success dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-success dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>

		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-info dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-info dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>

		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-warning dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		<div className="btn-group mr-2">
		<button
		type="button"
		className="btn btn-warning dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>

		<div className="btn-group">
		<button
		type="button"
		className="btn btn-danger dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		<div className="btn-group">
		<button
		type="button"
		className="btn btn-danger dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Action
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		</div>
		</div>
		@@ -165,0 +173,0 @@ </div>

269

stories/dropdown-directions.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group dropright m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropright
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<div className="container">
		<div className="row">
		<div className="col">
		<h2>Directions</h2>
		<p>Dropdown menus can be triggered in various directions (not only down!).</p>
		</div>
		</div>

		<div className="btn-group dropright m-2">
		<button type="button" className="btn btn-secondary">
		Split dropright
		</button>
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropright</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<div className="row pt-4">
		<div className="col">
		<h3>Drop right variations</h3>
		<p>
		Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to
		the parent element.
		</p>
		<div className="btn-group dropright m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropright
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		<div className="btn-group dropright m-2">
		<button type="button" className="btn btn-primary">
		Split dropright
		</button>
		<button
		type="button"
		className="btn btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropright</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		</div>
		</div>

		<div className="btn-group dropleft m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropleft
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		<div className="row pt-4">
		<div className="col">
		<h3>Drop left variations</h3>
		<p>
		Trigger dropdown menus at the left of the elements by adding <code>.dropleft</code> to the
		parent element.
		</p>
		<div className="btn-group dropleft m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropleft
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>

		<div className="btn-group m-2">
		<div className="btn-group dropleft" role="group">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropleft</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<div className="btn-group m-2">
		<div className="btn-group dropleft" role="group">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropleft</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		<button type="button" className="btn btn-primary">
		Split dropleft
		</button>
		</div>
		</div>
		<button type="button" className="btn btn-secondary">
		Split dropleft
		</button>
		</div>
		<div className="row pt-4">
		<div className="col">
		<h3>Drop up variations</h3>
		<p>
		Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent
		element.
		</p>

		<div className="btn-group dropup m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropup
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<div className="btn-group dropup m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Dropup
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		<div className="btn-group dropup">
		<button type="button" className="btn btn-primary">
		Split dropup
		</button>
		<button
		type="button"
		className="btn btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		</div>
		</div>

		<div className="btn-group dropup">
		<button type="button" className="btn btn-secondary">
		Split dropup
		</button>
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		</div>
		</div>
		</div>
		);

155

stories/dropdown-form.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group m-2">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<form className="px-4 py-3">
		<div className="form-group">
		<label htmlFor="exampleDropdownFormEmail1">Email address</label>
		<input
		type="email"
		className="form-control"
		id="exampleDropdownFormEmail1"
		placeholder="email@example.com"
		/>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Dropdown Form</h2>
		<p>
		Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or
		padding utilities to give it the negative space you require.{" "}
		</p>
		<div className="pt-3">
		<div className="btn-group m-2">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown form
		</button>
		<form
		className="dropdown-menu p-4"
		aria-labelledby="dropdownMenuButton"
		style={{ width: 300 }}
		>
		<div className="form-group">
		<label htmlFor="exampleDropdownFormEmail2">Email address</label>
		<input
		type="email"
		className="form-control"
		id="exampleDropdownFormEmail2"
		placeholder="email@example.com"
		/>
		</div>
		<div className="form-group">
		<label htmlFor="exampleDropdownFormPassword2">Password</label>
		<input
		type="password"
		className="form-control"
		id="exampleDropdownFormPassword2"
		placeholder="Password"
		/>
		</div>
		<div className="form-group">
		<div className="form-check">
		<input type="checkbox" className="form-check-input" id="dropdownCheck2" />
		<label className="form-check-label" htmlFor="dropdownCheck2">
		Remember me
		</label>
		</div>
		</div>
		<button type="submit" className="btn btn-primary">
		Sign in
		</button>
		</form>
		</div>
		<div className="form-group">
		<label htmlFor="exampleDropdownFormPassword1">Password</label>
		<input
		type="password"
		className="form-control"
		id="exampleDropdownFormPassword1"
		placeholder="Password"
		/>
		</div>
		<div className="form-group">
		<div className="form-check">
		<input type="checkbox" className="form-check-input" id="dropdownCheck" />
		<label className="form-check-label" htmlFor="dropdownCheck">
		Remember me
		</label>
		</div>
		</div>
		<button type="submit" className="btn btn-primary">
		Sign in
		</button>
		</form>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		New around here? Sign up
		</a>
		<a className="dropdown-item" href="#">
		Forgot password?
		</a>
		</div>
		</div>
		</div>
		</div>

		<div className="btn-group m-2">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<form
		className="dropdown-menu p-4"
		aria-labelledby="dropdownMenuButton"
		style={{ width: 300 }}
		>
		<div className="form-group">
		<label htmlFor="exampleDropdownFormEmail2">Email address</label>
		<input
		type="email"
		className="form-control"
		id="exampleDropdownFormEmail2"
		placeholder="email@example.com"
		/>
		</div>
		<div className="form-group">
		<label htmlFor="exampleDropdownFormPassword2">Password</label>
		<input
		type="password"
		className="form-control"
		id="exampleDropdownFormPassword2"
		placeholder="Password"
		/>
		</div>
		<div className="form-group">
		<div className="form-check">
		<input type="checkbox" className="form-check-input" id="dropdownCheck2" />
		<label className="form-check-label" htmlFor="dropdownCheck2">
		Remember me
		</label>
		</div>
		</div>
		<button type="submit" className="btn btn-primary">
		Sign in
		</button>
		</form>
		</div>
		</div>
		</div>
		);

164

stories/dropdown-menu-alignment.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Right-aligned menu
		</button>
		<div className="dropdown-menu dropdown-menu-right">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		<div className="container">
		<div className="row">
		<div className="col">
		<h2>Menu alignment</h2>
		<p>
		By default, a dropdown menu is automatically positioned 100% from the top and along the
		left side of its parent.
		</p>
		</div>
		</div>

		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		data-display="static"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Left-aligned but right aligned when large screen
		</button>
		<div className="dropdown-menu dropdown-menu-lg-right">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		<div className="row pt-4">
		<div className="col">
		<h3>Right aligned</h3>
		<p>
		Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the
		dropdown menu.
		</p>
		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Right-aligned menu
		</button>
		<div className="dropdown-menu dropdown-menu-right">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		</div>
		</div>
		</div>
		</div>

		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		data-display="static"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Right-aligned but left aligned when large screen
		</button>
		<div className="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		<div className="row pt-4">
		<div className="col">
		<h3>Responsive alignment</h3>
		<p>
		If you want to use responsive alignment, disable dynamic positioning by adding the
		<code> data-display="static" </code> attribute and use the responsive variation classes.
		</p>
		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		data-display="static"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Left-aligned but right aligned when large screen
		</button>
		<div className="dropdown-menu dropdown-menu-lg-right">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		</div>
		</div>
		</div>
		</div>
		<div className="row pt-4">
		<div className="col">
		<h3>Left aligned via breakpoint</h3>
		<p>
		To align left the dropdown menu with the given breakpoint or larger, add
		.dropdown-menu-right and .dropdown-menu -sm \| -md \| -lg \| -xl -left.
		</p>
		<div className="btn-group m-2">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		data-display="static"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Right-aligned but left aligned when large screen
		</button>
		<div className="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
		<button className="dropdown-item" type="button">
		Action
		</button>
		<button className="dropdown-item" type="button">
		Another action
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		</div>
		</div>
		</div>
		</div>
		</div>
		);

77

stories/dropdown-menu-items.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<h6 className="dropdown-header">Dropdown header</h6>
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item disabled" href="#">
		Another action disabled
		</a>
		<span className="dropdown-item-text">Dropdown item text</span>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<button className="dropdown-item active" type="button">
		Action active
		</button>
		<button className="dropdown-item disabled" type="button">
		Another action disabled
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Dropdown Menu Items</h2>
		<p>
		Dropdown menu items can be links or buttons (<code>a</code> tag or <code>button</code>{" "}
		tag). Optionally add dropdown headers to give menu items sufficient context.
		</p>
		<div className="pt-3">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown menu items
		</button>
		<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
		<h6 className="dropdown-header">Dropdown header</h6>
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item disabled" href="#">
		Another action disabled
		</a>
		<span className="dropdown-item-text">Dropdown item text</span>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<button className="dropdown-item active" type="button">
		Action active
		</button>
		<button className="dropdown-item disabled" type="button">
		Another action disabled
		</button>
		<button className="dropdown-item" type="button">
		Something else here
		</button>
		</div>
		</div>
		</div>
		</div>
		@@ -38,0 +49,0 @@ </div>

119

stories/dropdown-sizing.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group mr-2">
		<button
		className="btn btn-secondary btn-lg dropdown-toggle"
		type="button"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Large button
		</button>
		<div className="dropdown-menu">...</div>
		</div>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Dropdown Sizing</h2>
		<p>
		Button dropdowns work with buttons of all sizes, including default and split dropdown
		buttons.
		</p>
		<div className="pt-3">
		<div className="btn-group mr-2">
		<button
		className="btn btn-primary btn-lg dropdown-toggle"
		type="button"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Large button
		</button>
		<div className="dropdown-menu">...</div>
		</div>

		<div className="btn-group mr-2">
		<button className="btn btn-secondary btn-lg" type="button">
		Large split button
		</button>
		<button
		type="button"
		className="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">...</div>
		</div>
		<div className="btn-group mr-2">
		<button className="btn btn-primary btn-lg" type="button">
		Large split button
		</button>
		<button
		type="button"
		className="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">...</div>
		</div>

		<div className="btn-group mr-2">
		<button
		className="btn btn-secondary btn-sm dropdown-toggle"
		type="button"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Small button
		</button>
		<div className="dropdown-menu">...</div>
		<div className="btn-group mr-2">
		<button
		className="btn btn-primary btn-sm dropdown-toggle"
		type="button"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		Small button
		</button>
		<div className="dropdown-menu">...</div>
		</div>
		<div className="btn-group">
		<button className="btn btn-primary btn-sm" type="button">
		Small split button
		</button>
		<button
		type="button"
		className="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">...</div>
		</div>
		</div>
		</div>
		</div>
		<div className="btn-group">
		<button className="btn btn-secondary btn-sm" type="button">
		Small split button
		</button>
		<button
		type="button"
		className="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">...</div>
		</div>
		</div>
		);

68

stories/dropdown-split-button.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="btn-group">
		<button type="button" className="btn btn-danger">
		Action
		</button>
		<button
		type="button"
		className="btn btn-danger dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Split Buttons</h2>
		<p>
		Create split button dropdowns with basically the same markup as single button dropdowns,
		with the addition of <code>.dropdown-toggle-split</code> to accomodate for the proper
		spacing needed around the dropdown caret.
		</p>
		<div className="pt-3">
		<div className="btn-group">
		<button type="button" className="btn btn-primary">
		Action
		</button>
		<button
		type="button"
		className="btn btn-primary dropdown-toggle dropdown-toggle-split"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="false"
		>
		<span className="sr-only">Toggle Dropdown</span>
		</button>
		<div className="dropdown-menu">
		<a className="dropdown-item" href="#">
		Action
		</a>
		<a className="dropdown-item" href="#">
		Another action
		</a>
		<a className="dropdown-item" href="#">
		Something else here
		</a>
		<div className="dropdown-divider" />
		<a className="dropdown-item" href="#">
		Separated link
		</a>
		</div>
		</div>
		</div>
		</div>
		@@ -33,0 +45,0 @@ </div>

43

stories/dropdown-text.story.jsx

		import React from "react";

		export default (
		<div className="m-5">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown button
		</button>
		<div className="dropdown-menu p-4 text-muted" style={{ maxWidth: 200 }}>
		<p>Some example text that's free-flowing within the dropdown menu.</p>
		<p className="mb-0">And this is more example text.</p>
		<div className="container">
		<div className="row">
		<div className="col p-2">
		<h2>Dropdown Text</h2>
		<p>Place any freeform text within a dropdown menu with text and use spacing utilities.</p>
		<p>
		<b>Note:</b>
		You will need to set additional sizing styles to constrain the menu width (this sample is
		set to <code>maxWidth: 300</code>).
		</p>
		<div className="pt-3">
		<div className="dropdown">
		<button
		type="button"
		className="btn btn-primary dropdown-toggle"
		data-toggle="dropdown"
		aria-haspopup="true"
		aria-expanded="true"
		>
		Dropdown Text
		</button>
		<div className="dropdown-menu p-4 text-muted" style={{ maxWidth: 300 }}>
		<p>
		Every person has the ability to solve design problems, make improvements, and
		contribute to CloudBees design processes and outcomes.
		</p>
		</div>
		</div>
		</div>
		</div>
		@@ -19,0 +34,0 @@ </div>

2

stories/index.stories.jsx

		import { storiesOf } from "@storybook/react";
		import dropdownBasicStory from "./dropdown-basic.story";
		import dropdownSearchStory from "./dropdown-search.story";
		import dropdownButtonVariantStory from "./dropdown-button-variant.story";
		@@ -17,2 +18,3 @@ import dropdownSplitButtonStory from "./dropdown-split-button.story";
		.add("Dropdown Sizing", () => dropdownSizingStory)
		.add("Dropdown Search", dropdownSearchStory)
		.add("Dropdown Directions", () => dropdownDirectionsStory)
		@@ -19,0 +21,0 @@ .add("Dropdown Menu Items", () => dropdownMenuItemsStory)

dist/index.css

Sorry, the diff of this file is not supported yet

dist/index.css.map

Sorry, the diff of this file is not supported yet

src/_dropdown.scss

Sorry, the diff of this file is not supported yet

@cloudbees/honeyui-dropdown - npm Package Compare versions

Improved metrics