UNPKG

chrome-devtools-frontend

Version:
302 lines (190 loc) 7.59 kB
# Components [TOC] ## Buttons ![Button component](images/button-text-variations.png) ### Variations #### Primary buttons ![Primary button component](images/primary-buttons.png) Primary buttons are the most prominent type of button available. They are used for a single, necessary action a developer must complete, or for a highly recommended, promoted action. Use them sparingly and with purpose. #### Tonal buttons ![Tonal button component](images/tonal-buttons.png) Use tonal buttons in dialogs for actions that stand secondary to a primary action and are not a cancel or close action. #### Outlined buttons ![Outlined button component](images/outlined-buttons.png) Outlined buttons are the default button style. Use them for regular actions in the UI or to cancel dialogs. #### Text buttons ![Text button component](images/text-buttons.png) Text buttons are the least prominent button choice. Use them in cases outlined buttons would create too much visual noise. #### Micro buttons Micro buttons are used if we have a small line height. #### Icon buttons ![Icon button variations](images/button-icon-variations.png) Use icon buttons in toolbars of contextual actions that shouldn’t take up much space. ### Usage #### Developer guidelines ##### Dos and Don'ts ###### Do * Use [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts) for Primary, Outlined, Text, Micro and Icon buttons * Use [`ToolbarButton`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts;drc=2017cd8a8925f180257662f78eaf9eb93e8e394d;bpv=1;bpt=1;l=555?q=toolbar.ts%20devtools&ss=chromium&gsn=ToolbarButton&gs=KYTHE%3A%2F%2Fkythe%3A%2F%2Fchromium.googlesource.com%2Fcodesearch%2Fchromium%2Fsrc%2F%2Fmain%3Flang%3Dtypescript%3Fpath%3Dfront_end%2Fui%2Flegacy%2FToolbar%23ToolbarButton%2523type) for buttons inside [`Toolbars`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts). Underneath they make use of `devtools-button`. ###### Don't * Use `<button>`, as they are not styled correctly * Change the default color of icons (only in exceptions) ##### Developer examples ###### Primary button Usage with lit-html: ```js html`<devtools-button class="some-class" .variant=${Buttons.Button.Variant.PRIMARY} .title=${i18nString(UIStrings.someString)} .jslogContext=${'some-context')} @click=${onClick})></devtools-button>` ``` Usage with the imperative API: ```js const button = new Buttons.Button.Button(); button.data = { variant: Buttons.Button.Variant.PRIMARY, title: i18nString(UIStrings.someString), jslogContext: 'some-context', }; button.classList.add('some-class'); button.addEventListener('click', event => onClick(event)); ``` #### Design guidelines ##### Dos and Don'ts ###### Primary Buttons ![Primary Buttons](images/primary-dodonts.png) ###### Tonal buttons ![Tonal Buttons](images/tonal-dodonts.png) #### Outlined buttons ![Outlined Buttons](images/outlined-dodonts.png) #### Text buttons ![Text Buttons](images/text-dodonts.png) #### Icon buttons ![Icon Buttons](images/icon-dodonts.png) ### Resources #### For developers ##### Implementation * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts) #### For designers ##### Figma * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev) * [Icon buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev) ## Combo Boxes and Single Select menus ![Combo Box component](images/combo-box-variations.png) ### Usage #### Developer guidelines ##### Dos and Don'ts ###### Do * Use [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) with [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) and [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) if necessary, together with core styles. * Override inherited `width` with CSS if necessary. ###### Don't * Override the default colors. * Introduce custom select components. ##### Developer examples Usage with lit-html: ```js html`<select aria-label="Choose your champion" @onchange=${onChange}> <option hidden value="Choose your champion"></option> <option jslog=${VisualLogging.item('hamster').track({click: true})} value="Hamster">Hamster</option> <option jslog=${VisualLogging.item('mouse').track({click: true})} value="Mouse">Mouse</option> <option jslog=${VisualLogging.item('cat').track({click: true})} value="Cat">Cat</option> </select>` ``` Usage with the imperative API: ```js const select = UI.UIUtils.createSelect('Choose your champion', [ 'Hamster', 'Mouse', 'Cat', ]); select.addEventListener('change', event => onChange(event)) ``` ## Radio Buttons ![Radio Button component](images/radio-buttons-variations.png) ### Usage #### Developer guidelines ##### Dos and Don'ts ###### Do * Use [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) nested within a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) for radio buttons, together with core styles. ###### Don't * Override the default colors. ##### Developer examples Usage with lit-html: ```js const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext); html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>` ``` Usage with the imperative API: ```js const {label, radio} = UI.UIUtils.createRadioButton(name, title, jslogContext); radio.addEventListener('change', event => onChange(event)) ``` ## Sliders ![Slider component](images/sliders-variations.png) ### Usage #### Developer guidelines ##### Dos and Don'ts ###### Do * Use [`<input type="range">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) for sliders, together with core styles. ###### Don't * Override the default colors. ##### Developer examples Usage with lit-html: ```js html`<input type="range" min=${min} max=${max} tabindex=${tabIndex} @change=${onChange}>` ``` Usage with the imperative API: ```js const slider = UI.UIUtils.createSlider(min, max, tabIndex); slider.addEventListener('change', event => onChange(event)) ``` ## Icons ![Icon component (variety of icons)](images/icons-header.png) ### Usage #### Designer guidelines Find an exhaustive collection of icons currently used in DevTools [here](https://drive.google.com/corp/drive/folders/1EpmxLRjvdHn5Ia8iT3aicgIEPEvhXY_D?resourcekey=0-QseNsNRsF4w8F5EKz7ncnA) #### Developer guidelines ##### Dos and Don'ts ###### Do * Set class and change color and / or size in .css files ###### Don't * Use icons as buttons * Use Icon constructor and data setter (deprecated) * Use inline styles e.g. `js icon.style.color = ‘some-color’` ##### Developer examples Usage with lit-html: ```js html`<devtools-icon name=${'some-icon-name'}></devtools-icon>` ``` Usage with the imperative API: ```js const someIcon = IconButton.Icon.create('some-icon-name', 'some-class'); ```