Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@workday/canvas-kit-css-action-bar

Package Overview
Dependencies
Maintainers
6
Versions
1052
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@workday/canvas-kit-css-action-bar

Action bar CSS for canvas-kit-css

  • 9.1.31
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.6K
increased by607.88%
Maintainers
6
Weekly downloads
 
Created
Source

Canvas Kit Action Bar

Full width action bar that can be fixed to the bottom of the screen.

Mainenance Mode

Installation

yarn add @workday/canvas-kit-css

or

yarn add @workday/canvas-kit-css-action-bar

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-action-bar/index.scss';

Usage

The Action Bar consists of two components, wdc-action-bar and wdc-action-bar-container. All button sets should be wrapped around wdc-action-bar-container.

The primary action button should be left aligned followed by secondary buttons. The primary button is on the right only in task orchestration.

<div class="wdc-action-bar" role="region" aria-label="Action Bar">
  <div class="wdc-action-bar-container">
    <button class="wdc-btn wdc-btn-primary">Button</button>
    <button class="wdc-btn">Button</button>
    <button class="wdc-btn">Button</button>
  </div>
</div>

Variants

.wdc-action-bar.wdc-action-bar-fixed

Fixes the toolbar to the bottom of the window (uses position: fixed)

<div class="wdc-action-bar wdc-action-bar-fixed" role="region" aria-label="Action Bar">
  <div class="wdc-action-bar-container">
    <button class="wdc-btn wdc-btn-primary">Button</button>
  </div>
</div>
Responsive Behavior

At 575px, responsive styles will take effect:

  • Applies a flex box to the buttons
  • Makes single-button groups full width
  • All buttons will become the same width (flex: 1).
  • Button order will become reversed, making left-aligned primary buttons right-aligned.

When on a mobile form factor, the button placement should flip to have the primary button on the far right.

<div class="wdc-action-bar-container">
  <button class="wdc-btn wdc-btn-primary">Next</button>
  <button class="wdc-btn">Back</button>
</div>
Natural width buttons

In some cases, you may want some buttons to retain their natural width at smaller screen sizes. For instance, the related actions button.

<div class="wdc-action-bar" role="region" aria-label="Action Bar">
	<div class="wdc-action-bar-container">
		<button class="wdc-btn wdc-btn-primary">Done</button>
		<button class="wdc-btn wdc-action-bar-container-item-natural">
			<svg ...>
		</button>
	</div>
</div>

Keywords

FAQs

Package last updated on 04 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc