- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
-+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
+innerText will be used as the copy value.",
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Specify whether or not the CodeSnippet should be disabled.',
+ },
+ feedback: {
+ control: 'text',
+ description: 'Specify the string displayed when the snippet is copied.',
+ },
+ feedbackTimeout: {
+ control: 'number',
+ description:
+ 'Specify the time it takes for the feedback message to timeout.',
+ },
+ hideCopyButton: {
+ control: 'boolean',
+ description:
+ 'Specify whether or not a copy button should be used/rendered.',
+ },
+ maxCollapsedNumberOfRows: {
+ control: 'number',
+ description:
+ 'Specify the maximum number of rows to be shown when in collapsed view.',
+ },
+ maxExpandeddNumberOfRows: {
+ control: 'number',
+ description:
+ 'Specify the maximum number of rows to be shown when in expanded view.',
+ },
+ minCollapsedNumberOfRows: {
+ control: 'number',
+ description:
+ 'Specify the minimum number of rows to be shown when in collapsed view.',
+ },
+ minExpandeddNumberOfRows: {
+ control: 'number',
+ description:
+ 'Specify the minimum number of rows to be shown when in expanded view.',
+ },
+ showLessText: {
+ control: 'text',
+ description:
+ 'Specify a string that is displayed when the Code Snippet has been interacted with to show more lines.',
+ },
+ showMoreText: {
+ control: 'text',
+ description:
+ 'Specify a string that is displayed when the Code Snippet text is more than 15 lines.',
+ },
+ wrapText: {
+ control: 'boolean',
+ description: 'Specify whether or not to wrap the text.',
+ },
+};
+
+export const Inline = {
+ render: () => {
+ return html`
+ simple
+ single
+ range
+ true to use the short version.',
+ },
+ size: { control: 'select', options: sizes },
+ warning: {
+ control: 'boolean',
+ description:
+ 'Specify whether the control is currently in warning state (Fluid only).',
+ },
+ warningText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state (Fluid only).',
+ },
+ onChange: {
+ action: `${prefix}-date-picker-changed`,
+ },
+ onInput: {
+ action: 'input',
+ },
+};
+
+export const Simple = {
+ render: () => {
+ return html`
+ aria-labelledby and will fully describe the child node that is provided. This means that if you have text in the child node it will not be announced to the screen reader.',
+ },
+ leaveDelayMs: {
+ control: 'number',
+ description:
+ 'Specify the duration in milliseconds to delay before hiding the tooltip.',
+ },
+ size: {
+ control: 'select',
+ description: 'Specify the size of the Button. Defaults to md.',
+ options: ICON_BUTTON_SIZE,
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+ compareItems used for sorting the list of items in the control.',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Is the current selection invalid?',
+ },
+ invalidText: {
+ control: 'text',
+ description: 'If invalid, what is the error?',
+ },
+ titleText: {
+ control: 'text',
+ description:
+ 'Provide text to be used in a <label> element that is tied to the multiselect via ARIA attributes.',
+ },
+ label: {
+ control: 'text',
+ description:
+ 'Generic label that will be used as the textual representation of what this field is for.',
+ },
+ size: {
+ control: 'select',
+ description:
+ 'Specify the size of the ListBox. Currently supports either sm, md or lg as an option.',
+ options: sizes,
+ },
+ selectionFeedback: {
+ control: 'select',
+ description:
+ "Specify feedback (mode) of the selection. top: selected item jumps to top fixed: selected item stays at it's position top-after-reopen: selected item jump to top after reopen dropdown.",
+ options: selectionFeedbackOptions,
+ },
+ readOnly: {
+ control: 'boolean',
+ description: 'Whether or not the Dropdown is readonly.',
+ },
+ type: {
+ control: 'select',
+ description: "Specify 'inline' to create an inline multi-select.",
+ options: types,
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Specify whether the control is currently in warning state.',
+ },
+ warnText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state.',
+ },
+};
+
+export const Default = {
+ decorators: [(story) => html` true to allow empty string.',
+ },
+ decrementButtonDescription: {
+ control: 'text',
+ description:
+ 'Decrement button assistive description (decrement-button-assistive-text)',
+ },
+ incrementButtonDescription: {
+ control: 'text',
+ description:
+ 'Increment button assistive description (increment-button-assistive-text)',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'Specify if the control should be disabled, or not.',
+ },
+ helperText: {
+ control: 'text',
+ description:
+ 'Provide text that is used alongside the control label for additional help.',
+ },
+ hideLabel: {
+ control: 'boolean',
+ description:
+ 'Specify whether you want the underlying label to be visually hidden.',
+ },
+ hideSteppers: {
+ control: 'boolean',
+ description: 'Specify whether you want the steppers to be hidden.',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Specify if the currently value is invalid.',
+ },
+ invalidText: {
+ control: 'text',
+ description: 'Message which is displayed if the value is invalid.',
+ },
+ label: {
+ control: 'text',
+ description:
+ 'Generic label that will be used as the textual representation of what this field is for.',
+ },
+ readOnly: {
+ control: 'boolean',
+ description: 'Specify if the component should be read-only.',
+ },
+ value: {
+ control: 'number',
+ description: 'Specify the value of the input.',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Specify whether the control is currently in warning state.',
+ },
+ warnText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state.',
+ },
+ min: {
+ control: 'number',
+ description: 'The minimum value.',
+ },
+ max: {
+ control: 'number',
+ description: 'The maximum value.',
+ },
+ step: {
+ control: 'number',
+ description:
+ 'Specify how much the values should increase/decrease upon clicking on up/down button.',
+ },
+ size: {
+ control: 'select',
+ description: 'Specify the size of the Number Input.',
+ options: sizes,
+ },
+ onInput: {
+ action: 'input',
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+ true if the menu alignment should be flipped.',
+ },
+ iconDescription: {
+ control: 'text',
+ description: 'The icon description.',
+ },
+ open: {
+ control: 'boolean',
+ description: 'true if the menu should be open.\n',
+ },
+ index: {
+ control: 'number',
+ description: 'The index for the item which should be focused in the menu.',
+ },
+ size: {
+ control: 'select',
+ description:
+ 'Specify the size of the OverflowMenu. Currently supports either sm, md (default) or autocomplete property on the underlying <input>, defaults to "off".',
+ },
+ closeButtonLabelText: {
+ control: 'text',
+ description:
+ 'Specify a label to be read by screen readers on the "close" button.',
+ },
+ disabled: {
+ control: 'boolean',
+ description:
+ 'Specify whether the <input> should be disabled.',
+ },
+ labelText: {
+ control: 'text',
+ description: 'Provide the label text for the Search icon.',
+ },
+ placeholder: {
+ control: 'text',
+ description:
+ 'Provide an optional placeholder text for the Search. Note: if the label and placeholder differ, VoiceOver on Mac will read both.',
+ },
+ playgroundWidth: {
+ control: { type: 'range', min: 300, max: 800, step: 50 },
+ description: 'Playground width',
+ },
+ role: {
+ control: 'text',
+ description:
+ 'Specify the role for the underlying <input>, defaults to searchbox.',
+ },
+ size: {
+ control: 'select',
+ description: 'Specify the size of the Search.',
+ options: sizes,
+ },
+ type: {
+ control: 'text',
+ description:
+ 'Optional prop to specify the type of the <input>.',
+ },
+ value: {
+ control: 'text',
+ description: 'Specify the value of the <input>.',
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+ <input>.',
+ },
+ size: {
+ control: 'select',
+ description: 'Specify the size of the Select Input.',
+ options: sizes,
+ },
+ readOnly: {
+ control: 'boolean',
+ description: 'Whether the select should be read-only.',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Specify whether the control is currently in warning state.',
+ },
+ warnText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state.',
+ },
+ value: {
+ control: 'text',
+ description: 'The value of the selected item.',
+ },
+ onInput: {
+ action: `${prefix}-select-selected`,
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+
- The shell is perhaps the most crucial piece of any UI built with
- Carbon. It contains the shared navigation framework for the entire
- design system and ties the products in IBM’s portfolio together in a
- cohesive and elegant way. The shell is the home of the topmost
- navigation, where users can quickly and dependably gain their bearings
- and move between pages.
-
-
- The shell was designed with maximum flexibility built in, to serve the
- needs of a broad range of products and users. Adopting the shell
- ensures compliance with IBM design standards, simplifies development
- efforts, and provides great user experiences. All IBM products built
- with Carbon are required to use the shell’s header.
-
-
- To better understand the purpose and function of the UI shell,
- consider the “shell” of MacOS, which contains the Apple menu,
- top-level navigation, and universal, OS-level controls at the top of
- the screen, as well as a universal dock along the bottom or side of
- the screen. The Carbon UI shell is roughly analogous in function to
- these parts of the Mac UI. For example, the app switcher portion of
- the shell can be compared to the dock in MacOS.
-
- As a header scales down to fit smaller screen sizes, headers with - persistent side nav menus should have the side nav collapse into - “hamburger” menu. See the example to better understand responsive - behavior of the header. -
-- The side-nav contains secondary navigation and fits below the header. - It can be configured to be either fixed-width or flexible, with only - one level of nested items allowed. Both links and category lists can - be used in the side-nav and may be mixed together. There are several - configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a - side-nav, then the tabs are secondary in hierarchy to the side-nav. -
-
+ The shell is perhaps the most crucial piece of any UI built with
+ Carbon. It contains the shared navigation framework for the entire
+ design system and ties the products in IBM’s portfolio together in a
+ cohesive and elegant way. The shell is the home of the topmost
+ navigation, where users can quickly and dependably gain their
+ bearings and move between pages.
+
+
+ The shell was designed with maximum flexibility built in, to serve
+ the needs of a broad range of products and users. Adopting the shell
+ ensures compliance with IBM design standards, simplifies development
+ efforts, and provides great user experiences. All IBM products built
+ with Carbon are required to use the shell’s header.
+
+
+ To better understand the purpose and function of the UI shell,
+ consider the “shell” of MacOS, which contains the Apple menu,
+ top-level navigation, and universal, OS-level controls at the top of
+ the screen, as well as a universal dock along the bottom or side of
+ the screen. The Carbon UI shell is roughly analogous in function to
+ these parts of the Mac UI. For example, the app switcher portion of
+ the shell can be compared to the dock in MacOS.
+
+ As a header scales down to fit smaller screen sizes, headers with + persistent side nav menus should have the side nav collapse into + “hamburger” menu. See the example to better understand responsive + behavior of the header. +
++ The side-nav contains secondary navigation and fits below the + header. It can be configured to be either fixed-width or flexible, + with only one level of nested items allowed. Both links and category + lists can be used in the side-nav and may be mixed together. There + are several configurations of the side-nav, but only one + configuration should be used per product section. If tabs are needed + on a page when using a side-nav, then the tabs are secondary in + hierarchy to the side-nav. +
+ariaLabel for the <input>.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'true to disable this slider.',
+ },
+ hideTextInput: {
+ control: 'boolean',
+ description: 'true to hide the number input box.',
+ },
+ labelText: {
+ control: 'text',
+ description: 'Provide the text for the slider label.',
+ },
+ inputType: {
+ control: 'text',
+ description: 'The type attribute of the <input>.',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Specify whether the Slider is currently invalid.',
+ },
+ invalidText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the Slider is in an invalid state.',
+ },
+ name: {
+ control: 'text',
+ description: 'The name attribute of the <input>.',
+ },
+ max: {
+ control: 'number',
+ description: 'The maximum value.',
+ },
+ min: {
+ control: 'number',
+ description: 'The minimum value.',
+ },
+ maxLabel: {
+ control: 'text',
+ description: 'The label associated with the maximum value.',
+ },
+ minLabel: {
+ control: 'text',
+ description: 'The label associated with the minimum value.',
+ },
+ readOnly: {
+ control: 'boolean',
+ description: 'Whether the slider should be read-only.',
+ },
+ required: {
+ control: 'boolean',
+ description: 'true to specify if the control is required.',
+ },
+ step: {
+ control: 'number',
+ description:
+ 'A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is not hidden, the new step requirement should be added to a visible label. Values outside the step increment will be considered invalid.',
+ },
+ stepMultiplier: {
+ control: 'number',
+ description:
+ 'A value determining how much the value should increase/decrease by Shift+arrow keys, which will be (max - min) / stepMultiplier.',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Specify whether the control is currently in warning state.',
+ },
+ warnText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state.',
+ },
+ value: {
+ control: 'number',
+ description:
+ 'The value of the slider. When there are two handles, value is the lower bound.',
+ },
+ onAfterChange: {
+ action: `${prefix}-slider-changed`,
+ table: {
+ disable: true,
+ },
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+