├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.yml ├── .esmrc ├── .gitattributes ├── .github ├── actions │ ├── build-tokens │ │ └── action.yml │ ├── copy-tokens-from-workspace │ │ └── action.yml │ ├── copy-tokens-to-workspace │ │ └── action.yml │ ├── send-slack-notifications │ │ └── action.yml │ └── set-heroku-app-name │ │ └── action.yml ├── stale.yml └── workflows │ ├── a11y.yml │ ├── remove-labels.yml │ ├── storybook.yml │ └── vrt.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .scss-linters └── disallow_last_parent_reference.rb ├── .snyk ├── .storybook ├── addons.js ├── components │ └── DocsPage.js ├── config.js ├── manager-head.html ├── preview-head.html ├── scss │ └── ui │ │ └── index.scss ├── sldsTheme.js ├── stories.js ├── theme │ └── logo.svg └── webpack.config.js ├── .stylelintrc.yml ├── .stylestatsrc ├── CODEOWNERS ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE-icons-images.txt ├── LICENSE.txt ├── MAINTAINERS.md ├── PULL_REQUEST_TEMPLATE.md ├── Procfile ├── README-dist.md ├── README-search.md ├── README.md ├── RELEASENOTES.LEGACY.md ├── RELEASENOTES.general.md ├── RELEASENOTES.md ├── Salesforce_CLA.pdf ├── __fixtures__ └── ui │ ├── components │ ├── buttons │ │ ├── _doc.scss │ │ ├── base │ │ │ ├── _index.scss │ │ │ └── example.jsx │ │ ├── docs.mdx │ │ ├── stateful │ │ │ ├── _index.scss │ │ │ └── example.jsx │ │ └── with-icon │ │ │ ├── _index.scss │ │ │ └── example.jsx │ └── data-tables │ │ ├── _doc.scss │ │ ├── advanced │ │ └── example.jsx │ │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ │ ├── fixed-header │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ │ └── inline-edit │ │ ├── _index.scss │ │ └── example.jsx │ └── utilities │ ├── alignment │ ├── _doc.scss │ ├── _index.scss │ └── example.jsx │ └── floats │ ├── _doc.scss │ ├── _index.scss │ └── example.jsx ├── __tests__ ├── __snapshots__ │ └── tokens.spec.js.snap ├── a11y │ ├── __testfiles__ │ │ └── .gitkeep │ ├── ava.generate-tests.js │ └── ava.test-template.js ├── site │ ├── search-terms.csv │ └── site-validation.ava.js └── tokens.spec.js ├── _internal └── crypt.sh ├── app.json ├── applitools.config.js ├── applitools.legacy.config.js ├── applitools.mobile.config.js ├── applitools.prompts.js ├── assets ├── downloads │ ├── salesforce-voice-and-tone.pdf │ └── swatches │ │ └── salesforce-lightning-design-system.clr ├── icon-colors │ └── icon-colors.json ├── images │ ├── avatar1.jpg │ ├── avatar2.jpg │ ├── avatar3.jpg │ ├── carousel │ │ ├── carousel-01.jpg │ │ ├── carousel-02.jpg │ │ └── carousel-03.jpg │ ├── einstein-headers │ │ ├── einstein-figure.svg │ │ └── einstein-header-background.svg │ ├── group_avatar_160.png │ ├── group_avatar_200.png │ ├── group_avatar_96.png │ ├── illustrations │ │ ├── empty-state-assistant.svg │ │ ├── empty-state-events.svg │ │ └── empty-state-tasks.svg │ ├── logo-noname.svg │ ├── logo.svg │ ├── placeholder-img@16x9.jpg │ ├── placeholder-img@9x16.jpg │ ├── popovers │ │ ├── popover-action.png │ │ └── popover-header.png │ ├── product1.jpg │ ├── product2.jpg │ ├── product3.jpg │ ├── profile_avatar_160.png │ ├── profile_avatar_200.png │ ├── profile_avatar_96.png │ ├── spinners │ │ ├── slds_spinner.gif │ │ ├── slds_spinner_brand.gif │ │ └── slds_spinner_inverse.gif │ ├── themes │ │ ├── classic │ │ │ ├── banner-group-private-default-medium.png │ │ │ ├── banner-group-private-default-small.png │ │ │ ├── banner-group-private-default.png │ │ │ ├── banner-group-public-default-medium.png │ │ │ ├── banner-group-public-default-small.png │ │ │ ├── banner-group-public-default.png │ │ │ ├── banner-group-unlisted-default-medium.png │ │ │ ├── banner-group-unlisted-default-small.png │ │ │ ├── banner-group-unlisted-default.png │ │ │ ├── banner-user-default-medium.png │ │ │ ├── banner-user-default-small.png │ │ │ └── banner-user-default.png │ │ └── oneSalesforce │ │ │ ├── banner-brand-default.png │ │ │ ├── banner-group-private-default-medium.png │ │ │ ├── banner-group-private-default-small.png │ │ │ ├── banner-group-private-default.png │ │ │ ├── banner-group-public-default-medium.png │ │ │ ├── banner-group-public-default-small.png │ │ │ ├── banner-group-public-default.png │ │ │ ├── banner-group-unlisted-default-medium.png │ │ │ ├── banner-group-unlisted-default-small.png │ │ │ ├── banner-group-unlisted-default.png │ │ │ ├── banner-user-default-medium.png │ │ │ ├── banner-user-default-small.png │ │ │ └── banner-user-default.png │ └── welcome-mat │ │ ├── bg-info@2x.png │ │ └── trailhead_badge@2x.png └── licenses │ ├── License-for-Sass.txt │ └── License-for-images.txt ├── ava.config.js ├── browserslist ├── composer.json ├── config └── nginx.conf.erb ├── design-tokens ├── RELEASENOTES.md ├── aliases │ ├── border-radius.yml │ ├── border-width.yml │ ├── color-palettes.yml │ ├── colors.yml │ ├── duration.yml │ ├── font-family.yml │ ├── font-size.yml │ ├── font-weight.yml │ ├── offset.yml │ ├── sizing.yml │ └── spacing.yml ├── bg-actions.yml ├── bg-custom.yml ├── bg-icons.yml ├── bg-standard.yml ├── extensions │ ├── ui-analytics │ │ └── base.yml │ ├── ui-force │ │ ├── background-color.yml │ │ ├── base.yml │ │ ├── border-color.yml │ │ ├── border-width.yml │ │ ├── box-shadow.yml │ │ ├── deprecated │ │ │ ├── background-color.yml │ │ │ ├── base.yml │ │ │ ├── border-color.yml │ │ │ ├── box-shadow.yml │ │ │ ├── font-family.yml │ │ │ ├── font-size.yml │ │ │ ├── sizing.yml │ │ │ ├── spacing.yml │ │ │ ├── text-color.yml │ │ │ └── text-transform.yml │ │ ├── duration.yml │ │ ├── illustrations.yml │ │ ├── image-paths.yml │ │ ├── line-height.yml │ │ ├── primitive │ │ │ ├── background-color.yml │ │ │ ├── base.yml │ │ │ ├── border-color.yml │ │ │ ├── palette-colors.yml │ │ │ └── text-color.yml │ │ ├── radius.yml │ │ ├── sizing.yml │ │ └── text-color.yml │ ├── ui-marketing │ │ └── base.yml │ └── ui-one │ │ ├── base.yml │ │ └── deprecated │ │ ├── base.yml │ │ ├── duration.yml │ │ └── sizing.yml ├── force-font-commons.yml ├── force-mq-commons.yml ├── form-factor-large.yml ├── form-factor-medium.yml ├── form-factor-small.yml ├── form-factor │ ├── large │ │ ├── base.yml │ │ ├── deprecated │ │ │ ├── base.yml │ │ │ └── font-size.yml │ │ └── sizing.yml │ ├── medium │ │ ├── base.yml │ │ ├── line-height.yml │ │ └── sizing.yml │ └── small │ │ ├── base.yml │ │ ├── border-radius.yml │ │ ├── box-shadow.yml │ │ ├── font-size.yml │ │ ├── font-weight.yml │ │ └── line-height.yml ├── icon-paths.yml ├── primitive.yml ├── primitive │ ├── background-color.yml │ ├── base.yml │ ├── border-color.yml │ ├── border-radius.yml │ ├── border-width.yml │ ├── box-shadow.yml │ ├── duration.yml │ ├── font-family.yml │ ├── font-size.yml │ ├── font-weight.yml │ ├── line-height.yml │ ├── opacity.yml │ ├── palette-colors.yml │ ├── palettes │ │ ├── blue.yml │ │ ├── cloud-blue.yml │ │ ├── green.yml │ │ ├── hot-orange.yml │ │ ├── indigo.yml │ │ ├── neutral.yml │ │ ├── orange.yml │ │ ├── pink.yml │ │ ├── purple.yml │ │ ├── red.yml │ │ ├── teal.yml │ │ ├── violet.yml │ │ └── yellow.yml │ ├── sizing.yml │ ├── spacing.yml │ ├── text-color.yml │ ├── touch.yml │ └── z-index.yml ├── theme-one-salesforce.yml ├── themes │ └── oneSalesforce │ │ ├── base.yml │ │ ├── deprecated │ │ ├── background-color.yml │ │ ├── base.yml │ │ ├── border-color.yml │ │ ├── box-shadow.yml │ │ ├── spacing.yml │ │ └── text-color.yml │ │ └── ui-force │ │ ├── background-color.yml │ │ ├── base.yml │ │ ├── border-color.yml │ │ ├── border-radius.yml │ │ ├── box-shadow.yml │ │ ├── font-size.yml │ │ ├── font-weight.yml │ │ ├── image-paths.yml │ │ ├── spacing.yml │ │ ├── text-align.yml │ │ └── text-color.yml ├── ui-analytics.yml ├── ui-force.yml ├── ui-marketing.yml ├── ui-one.yml └── var-spacing.yml ├── docs ├── previewer.png ├── previewer.v1.jpg └── variant.png ├── formats └── custom-props.js ├── guidelines ├── ANNOTATIONS.md ├── ANNOTATIONS_FULL.md ├── BLUEPRINT_DOCUMENTATION.md ├── BLUEPRINT_NEW.md ├── BUG_REPORTS.md ├── COMMIT_GUIDELINES.md ├── SASS_CONVENTIONS.md ├── TESTING.md └── TROUBLESHOOTING.md ├── gulpfile.js ├── heroku-start.sh ├── jest.helpers.js ├── jest.setup.global.js ├── jest.setup.js ├── jest.teardown.global.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── release.sh ├── scripts ├── __tests__ │ └── var-extract.spec.js ├── ci │ └── pr-checks.mjs ├── compile │ ├── __tests__ │ │ ├── __fixtures__ │ │ │ ├── complicated-sass-fixture.js │ │ │ ├── css-fixture.js │ │ │ └── simple-sass-fixture.scss │ │ ├── __snapshots__ │ │ │ └── helpers.spec.js.snap │ │ ├── helpers.spec.js │ │ └── token-maps.spec.js │ ├── bundle.js │ ├── docs │ │ ├── docs-list.js │ │ └── webpack.config.js │ ├── entry.docs.js │ ├── entry.slds.js │ ├── helpers.js │ ├── lwc-style-loader.js │ ├── mdx-loader.js │ ├── modular-css.js │ ├── token-maps.js │ └── webpack.config.js ├── generate-ui.js ├── gulp │ ├── accessibility │ │ ├── axe.js │ │ ├── index.js │ │ └── vnu.js │ ├── dist.js │ ├── generate │ │ ├── examples.docs.js │ │ ├── examples.js │ │ ├── sanitized.js │ │ ├── styling-hooks.js │ │ └── tokens.js │ ├── lint │ │ ├── index.js │ │ ├── validate-markup.js │ │ └── validate-yaml.js │ ├── plugins │ │ ├── data-uri.js │ │ ├── lint-icons.js │ │ └── lint-tokens.js │ └── styles.js ├── helpers │ ├── gulp.js │ ├── paths.js │ ├── publish.js │ └── travis.js ├── lib.js ├── release-notes │ ├── general.js │ ├── helpers.js │ ├── hook.js │ ├── index.js │ ├── legacy.js │ ├── model.js │ └── tokens.js ├── ui │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ ├── lib.spec.js.snap │ │ │ └── ui.spec.js.snap │ │ ├── lib.spec.js │ │ └── ui.spec.js │ ├── comments.js │ ├── index.js │ └── showcase.js ├── var-extract.js ├── var-metadata.js └── vrt.js ├── searchconfig.json ├── shared ├── components │ ├── Blockquote.jsx │ ├── CodeBlock.jsx │ ├── CodeView.jsx │ ├── ColorToken.jsx │ ├── Copy.jsx │ ├── DisplayColumn.jsx │ ├── DisplayGrid.jsx │ ├── Doc.jsx │ ├── DocHeaderAnchor.jsx │ ├── Example.jsx │ ├── InlineFragment.jsx │ ├── MobileFrame.jsx │ ├── SLDSFrame.jsx │ ├── SpacingCodeView.jsx │ ├── StoryFrame.jsx │ ├── StoryWrapper.jsx │ ├── StyledCodeView.jsx │ ├── StyledDemo.jsx │ ├── StylingHooksTable.jsx │ └── __tests__ │ │ ├── Doc.spec.jsx │ │ ├── __snapshots__ │ │ └── Doc.spec.jsx.snap │ │ ├── blockquote.spec.js │ │ ├── codeblock.spec.jsx │ │ └── colortoken.spec.jsx ├── device-definitions.json ├── site-versions.json ├── styles │ └── doc.scss ├── utils │ ├── __tests__ │ │ └── react.spec.js │ ├── annotations.js │ ├── beautify.js │ ├── objects.js │ ├── react.js │ ├── text-formatting.js │ └── tree.js └── vendor │ └── prism │ ├── _prism-overrides.scss │ ├── _prism.scss │ └── index.js ├── styling-hooks ├── shadow.json ├── slds-hooks.json └── transparent-colors.json ├── tools └── customizer.cli.js └── ui ├── _config.scss ├── _design-tokens.scss ├── _init.scss ├── _styling-hooks.scss ├── components ├── _index.sanitized.scss ├── _index.scss ├── _kinetics.scss ├── _touch.scss ├── accordion │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── activity-timeline │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.jsx.snap │ │ └── index.spec.jsx │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── deprecated │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── alert │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── app-launcher │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── avatar-group │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ ├── enzyme.spec.js │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── mixins │ │ └── _index.scss │ └── tokens │ │ └── background-color.yml ├── avatar │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── initials │ │ └── example.jsx ├── badges │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ ├── enzyme.spec.js │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ └── background-color.yml ├── brand-band │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── docs │ │ └── BrandBand.jsx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ ├── sizing.yml │ │ └── spacing.yml ├── breadcrumbs │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.react.jsx │ ├── index.stories.js │ └── kinetics │ │ └── _index.scss ├── builder-header │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── toolbar │ │ └── example.jsx ├── button-groups │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ ├── list │ │ ├── _index.scss │ │ └── example.jsx │ └── row │ │ ├── _index.scss │ │ └── example.jsx ├── button-icons │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.jsx.snap │ │ └── snapshot.spec.jsx │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── bordered-filled-container │ │ ├── _index.scss │ │ └── example.jsx │ ├── bordered-inverse │ │ ├── _index.scss │ │ └── example.jsx │ ├── bordered-transparent-container │ │ ├── _index.scss │ │ └── example.jsx │ ├── brand │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── inverse │ │ ├── _index.scss │ │ └── example.jsx │ ├── menu │ │ ├── example.jsx │ │ └── index.jsx │ ├── mixins │ │ └── _index.scss │ ├── sizing │ │ ├── _index.scss │ │ └── example.jsx │ ├── stateful │ │ ├── _index.scss │ │ └── example.jsx │ ├── tokens │ │ ├── border-color.yml │ │ └── sizing.yml │ └── transparent-container │ │ ├── _index.scss │ │ └── example.jsx ├── buttons │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.jsx.snap │ │ └── snapshot.spec.jsx │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── dual-stateful │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.stories.js │ ├── kinetics │ │ └── _index.scss │ ├── mixins │ │ └── _index.scss │ ├── stateful │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── tokens │ │ ├── border-color.yml │ │ ├── border-radius.yml │ │ ├── color.yml │ │ ├── line-height.yml │ │ └── text-color.yml │ └── with-icon │ │ └── example.jsx ├── cards │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _blame.scss │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── einstein │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ ├── box-shadow.yml │ │ ├── font-weight.yml │ │ ├── spacing.yml │ │ └── text-align.yml │ └── wrapper │ │ └── example.jsx ├── carousel │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.jsx.snap │ │ └── snapshot.spec.jsx │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ └── sizing.yml ├── chat │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── past │ │ ├── _index.scss │ │ └── example.jsx │ └── tokens │ │ └── background-color.yml ├── checkbox-button-group │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── checkbox-button │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.js │ └── index.stories.js ├── checkbox-toggle │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ ├── line-height.yml │ │ └── sizing.yml ├── checkbox │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── form-element │ │ ├── _index.scss │ │ ├── _touch.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── index.jsx │ └── index.stories.js ├── color-picker │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── custom-only │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── predefined-only │ │ ├── _index.scss │ │ └── example.jsx │ ├── swatches-only │ │ ├── _index.scss │ │ └── example.jsx │ └── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ ├── box-shadow.yml │ │ ├── font-size.yml │ │ └── sizing.yml ├── combobox │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── autocomplete │ │ ├── _index.scss │ │ └── example.jsx │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── deprecated-inline-listbox │ │ ├── _index.scss │ │ └── example.jsx │ ├── deprecated-multi-entity │ │ ├── _index.scss │ │ └── example.jsx │ ├── deprecated-readonly │ │ ├── _index.scss │ │ └── example.jsx │ ├── deprecated │ │ └── index.jsx │ ├── dialog │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── grouped │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── listbox-of-pills │ │ └── index.jsx │ ├── listbox │ │ └── index.jsx │ ├── object-switcher │ │ ├── data.js │ │ └── index.jsx │ └── snapshots.data.js ├── counter │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── data-tables │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ ├── advanced.spec.js.snap │ │ │ ├── index.spec.jsx.snap │ │ │ └── inline-edit.spec.js.snap │ │ ├── advanced.spec.js │ │ ├── index.spec.jsx │ │ └── inline-edit.spec.js │ ├── _doc.scss │ ├── advanced │ │ ├── example.jsx │ │ └── index.jsx │ ├── base │ │ ├── _blame.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── fixed-header │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── hidden-header │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── inline-edit │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── mixins │ │ └── _index.scss │ ├── responsive │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ └── tokens │ │ ├── background-color.yml │ │ ├── border-radius.yml │ │ ├── spacing.yml │ │ └── text-color.yml ├── datepickers │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ ├── mixins │ │ └── _index.scss │ ├── range │ │ ├── _index.scss │ │ └── example.jsx │ └── tokens │ │ └── text-color.yml ├── datetime-picker │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── docked-composer │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── email │ │ └── _index.scss │ ├── index.stories.js │ └── tokens │ │ ├── color.yml │ │ └── sizing.yml ├── docked-form-footer │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── docked-utility-bar │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ ├── tokens │ │ └── background-color.yml │ └── utility-panel │ │ └── _index.scss ├── drop-zone │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ └── sizing.yml ├── dueling-picklist │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── dynamic-icons │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── docs.mdx │ ├── ellie │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── eq │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── global-action-help │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── index.stories.js │ ├── score │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── strength │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── tokens │ │ ├── background-color.yml │ │ ├── fill.yml │ │ └── size.yml │ ├── trend │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── typing │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ └── waffle │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx ├── dynamic-menu │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── einstein-header │ ├── RELEASENOTES.md │ ├── base │ │ ├── _index.scss │ │ └── index.jsx │ └── tokens │ │ ├── background-color.yml │ │ └── text-shadow.yml ├── expandable-section │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── expression │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── custom-logic │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── filters │ │ ├── _index.scss │ │ └── example.jsx │ ├── formula │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ └── snapshots.data.js ├── feeds │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── comment │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── docs.mdx │ ├── index.stories.js │ ├── post-with-attachments │ │ ├── _index.scss │ │ └── example.jsx │ ├── post-with-comments │ │ └── example.jsx │ ├── post-with-question │ │ └── example.jsx │ ├── post │ │ ├── _index.scss │ │ └── example.jsx │ └── small-column │ │ └── example.jsx ├── file-selector │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── image │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ └── integrated │ │ └── example.jsx ├── files │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ └── z-index.yml ├── form-element │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ ├── enzyme.spec.js │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── address │ │ ├── _index.scss │ │ └── example.jsx │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── compound │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── docs.mdx │ ├── horizontal │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── record-detail │ │ ├── _index.scss │ │ ├── example.jsx │ │ ├── index.jsx │ │ └── snapshots.data.js │ ├── stacked │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ └── tokens │ │ └── font-size.yml ├── form-layout │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ └── compound │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx ├── global-header │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ ├── docs.mdx │ ├── favorites │ │ └── index.jsx │ ├── global-actions │ │ ├── _index.scss │ │ └── index.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── notifications │ │ ├── _index.scss │ │ ├── data.js │ │ └── index.jsx │ ├── search │ │ └── data.js │ ├── task │ │ └── index.jsx │ └── tokens │ │ ├── background-color.yml │ │ └── sizing.yml ├── global-navigation │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── mixins │ │ └── _index.scss │ ├── navigation-bar │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── navigation-tab-bar │ │ └── example.jsx │ └── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ ├── sizing.yml │ │ └── text-color.yml ├── icons │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── action │ │ ├── _index.scss │ │ └── example.jsx │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── custom │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── doctype │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.stories.js │ └── standard │ │ ├── _index.scss │ │ └── example.jsx ├── illustration │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── custom │ │ └── index.jsx │ ├── docs.mdx │ ├── error │ │ └── index.jsx │ ├── index.stories.js │ ├── informational │ │ └── index.jsx │ ├── misc │ │ └── index.jsx │ ├── nodata │ │ └── index.jsx │ └── tokens │ │ └── stroke-color.yml ├── input │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ ├── font-size.yml │ │ ├── font-weight.yml │ │ └── text-color.yml ├── list-builder │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── inline-edit │ │ ├── example.jsx │ │ └── index.markup.md ├── lookups-mobile │ ├── RELEASENOTES.md │ ├── combobox │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── docs.mdx │ ├── faux-input │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── index.stories.js │ └── listbox │ │ ├── _index.scss │ │ ├── example.jsx │ │ ├── index.jsx │ │ └── listbox-data.json ├── lookups │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── advanced-modal │ │ └── example.jsx │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── multi-entity │ │ └── example.jsx ├── map │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── data.js │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── menus │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── action-overflow │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── docs.mdx │ ├── dropdown-height │ │ ├── example.jsx │ │ └── index.markup.md │ ├── dropdown-positioning │ │ ├── example.jsx │ │ └── index.markup.md │ ├── dropdown │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ ├── example.jsx │ │ └── index.stories.js │ ├── index.stories.js │ ├── mixins │ │ └── _index.scss │ └── submenu │ │ ├── _index.scss │ │ └── example.jsx ├── modals │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── notifications │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── page-headers │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _blame.scss │ │ ├── _index.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ ├── object-home │ │ ├── _deprecate.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ ├── record-home-vertical │ │ ├── _index.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ ├── record-home │ │ ├── _index.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ ├── related-list │ │ ├── _index.scss │ │ ├── deprecated.jsx │ │ └── example.jsx │ └── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ ├── border-radius.yml │ │ ├── box-shadow.yml │ │ ├── font-size.yml │ │ ├── font-weight.yml │ │ ├── sizing.yml │ │ └── spacing.yml ├── panels │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── detail │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── filtering │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ └── box-shadow.yml ├── path-simple │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── base │ │ └── _deprecate.scss │ └── index.js ├── path │ ├── RELEASENOTES.md │ ├── __tests__ │ │ └── enzyme.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.js │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ ├── line-height.yml │ │ ├── sizing.yml │ │ └── text-color.yml ├── picklist │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ └── example.jsx │ ├── deprecated │ │ └── index.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── snapshots.data.js ├── pills │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── listbox-of-pill-options │ │ ├── _index.scss │ │ └── example.jsx ├── popovers │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base-legacy │ │ └── example.jsx │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── brand │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── einstein │ │ ├── _index.scss │ │ └── example.jsx │ ├── error │ │ ├── _index.scss │ │ └── example.jsx │ ├── feature │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ ├── index.stories.js │ ├── nubbins │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── panels │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── prompt │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── themes │ │ ├── example.jsx │ │ └── index.markup.md │ ├── tokens │ │ ├── background-color.yml │ │ ├── sizing.yml │ │ └── text-color.yml │ ├── walkthrough │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ └── warning │ │ ├── _index.scss │ │ └── example.jsx ├── process │ ├── RELEASENOTES.md │ └── wizard │ │ ├── _deprecate.scss │ │ ├── example.jsx │ │ └── index.markup.md ├── progress-bar │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── vertical │ │ ├── _index.scss │ │ └── example.jsx ├── progress-indicator │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ ├── modal │ │ └── example.jsx │ ├── themes │ │ └── example.jsx │ ├── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ └── sizing.yml │ └── vertical │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx ├── progress-ring │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ └── sizing.yml ├── prompt │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── publishers │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── comment │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── radio-button-group │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ └── line-height.yml ├── radio-group │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── regions │ ├── RELEASENOTES.md │ └── base │ │ └── _index.scss ├── rich-text-editor │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── scoped-notifications │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ └── background-color.yml ├── scoped-tabs │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── select │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── setup-assistant │ ├── RELEASENOTES.md │ ├── SetupAssistantStepDetail.jsx │ ├── SetupAssistantStepSummary.jsx │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── slider │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── _touch.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ ├── box-shadow.yml │ │ └── sizing.yml ├── spinners │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.react.jsx │ ├── index.stories.js │ └── tokens │ │ └── sizing.yml ├── split-view │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ └── tokens │ │ ├── background-color.yml │ │ ├── border-color.yml │ │ └── sizing.yml ├── summary-detail │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── tabs │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ ├── enzyme.spec.js.snap │ │ │ └── index.spec.js.snap │ │ ├── enzyme.spec.js │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.react.jsx │ ├── index.stories.js │ ├── mixins │ │ └── _index.scss │ ├── mobile-stack │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── _touch.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── scrolling │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── sub-tabs │ │ ├── _index.scss │ │ └── example.jsx │ └── tokens │ │ └── font-weight.yml ├── textarea │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── tiles │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── article │ │ ├── example.jsx │ │ └── index.markup.md │ ├── avatar │ │ ├── example.jsx │ │ └── index.markup.md │ ├── base │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── board │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── icon │ │ ├── example.jsx │ │ └── index.markup.md │ ├── index.stories.js │ ├── list │ │ └── example.jsx │ └── task │ │ ├── example.jsx │ │ └── index.markup.md ├── timepicker │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── toast │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ ├── index.stories.js │ └── modal-toast │ │ ├── _deprecate.scss │ │ ├── example.jsx │ │ └── index.markup.md ├── tooltips │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ └── index.stories.js ├── tree-grid │ ├── RELEASENOTES.md │ ├── __deprecated__ │ │ └── grid_2_6_0.jsx │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── trees │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.jsx │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── trial-bar │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── docs.mdx │ ├── header │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.jsx │ └── index.stories.js ├── vertical-navigation │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── docs.mdx │ ├── expandable-section │ │ ├── _index.scss │ │ └── example.jsx │ ├── index.stories.js │ ├── list │ │ ├── _deprecate.scss │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.stories.js │ ├── quickfind │ │ ├── _index.scss │ │ └── example.jsx │ ├── radio-group │ │ ├── _index.scss │ │ └── example.jsx │ └── tokens │ │ └── background-color.yml ├── vertical-tabs │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── snapshot.spec.js.snap │ │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── snapshots.data.js │ ├── docs.mdx │ ├── index.jsx │ └── index.stories.js ├── visual-picker │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── coverable-content │ │ ├── _index.scss │ │ └── example.jsx │ ├── docs.mdx │ ├── index.stories.js │ ├── link │ │ ├── _index.scss │ │ └── example.jsx │ ├── non-coverable-content │ │ ├── _index.scss │ │ └── example.jsx │ └── vertical │ │ ├── _index.scss │ │ └── example.jsx └── welcome-mat │ ├── RELEASENOTES.md │ ├── WelcomeMatContent.jsx │ ├── WelcomeMatContentDeprecated.jsx │ ├── WelcomeMatContentTrailhead.jsx │ ├── WelcomeMatTile.jsx │ ├── WelcomeMatTileDeprecated.jsx │ ├── __tests__ │ ├── __snapshots__ │ │ └── snapshot.spec.js.snap │ ├── enzyme.spec.js │ └── snapshot.spec.js │ ├── _doc.scss │ ├── base │ ├── _deprecate.scss │ ├── _index.scss │ └── example.jsx │ ├── deprecated.jsx │ ├── docs.mdx │ ├── helpers.js │ ├── index.jsx │ ├── index.stories.js │ ├── info-only │ ├── _index.scss │ └── example.jsx │ ├── splash │ ├── _index.scss │ └── example.jsx │ ├── tokens │ ├── color.yml │ ├── font-size.yml │ ├── sizing.yml │ └── spacing.yml │ └── trailhead-connected │ ├── _index.scss │ └── example.jsx ├── core └── _vf-reset.scss ├── dependencies ├── _appearance.scss ├── _core.scss ├── _forms.scss ├── _functions.scss ├── _index.scss ├── _interactions.scss ├── _kinetics.scss ├── _layout.scss ├── _lists.scss ├── _motion.scss ├── _popover.scss ├── _root.scss ├── _rtl.scss ├── _scrolling.scss ├── _sizing.scss ├── _tabs.scss ├── _text.scss ├── _theme.scss ├── _touch.scss ├── _typography.scss └── _visibility.scss ├── index-internal.scss ├── index-sanitized.scss ├── index-vf.scss ├── index.scss ├── legacy.scss ├── shared ├── __tests__ │ └── prop-types.spec.js ├── doc-text │ └── index.jsx ├── empty-link │ └── index.js ├── heading │ └── index.js ├── helpers │ ├── index.js │ └── prop-types │ │ ├── cannot-be-set-with.js │ │ └── is-dependent-on.js ├── svg-icon │ └── index.jsx └── truncate │ └── index.react.jsx ├── touch-demo.scss ├── touch-internal.scss ├── touch.scss ├── touch ├── _index.scss ├── forms │ ├── edit-dialog │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ └── index.table.yml ├── menus │ ├── action-overflow │ │ ├── _index.scss │ │ ├── example.jsx │ │ └── index.markup.md │ ├── index.docs.jsx │ └── index.table.yml ├── notifications │ ├── index.docs.jsx │ └── prompt │ │ ├── example.jsx │ │ └── index.markup.md └── page-headers │ ├── index.docs.jsx │ ├── index.table.yml │ ├── object-home │ └── example.jsx │ └── record-home │ └── example.jsx ├── utilities ├── _index.scss ├── _touch.scss ├── alignment │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── borders │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── box │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── color │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ └── example.jsx ├── description-list │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── floats │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── grid │ ├── RELEASENOTES.md │ ├── _deprecate.scss │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ ├── docs │ │ ├── Grid.jsx │ │ ├── GridCodeView.jsx │ │ └── demoStylesGrid.js │ └── example.jsx ├── horizontal-list │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _deprecate.scss │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── hyphenation │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── index-with-dependencies.scss ├── interactions │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── layout │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── index.jsx ├── line-clamp │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── margin │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── media-objects │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _deprecate.scss │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ ├── example.jsx │ └── index.react.jsx ├── name-value-list │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── padding │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── position │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── print │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── scrollable │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── sizing │ ├── RELEASENOTES.md │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── text │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── _touch.scss │ ├── docs.mdx │ └── example.jsx ├── themes │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── truncation │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx ├── vertical-list │ ├── RELEASENOTES.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.spec.js.snap │ │ └── index.spec.js │ ├── _deprecate.scss │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx └── visibility │ ├── RELEASENOTES.md │ ├── __tests__ │ ├── __snapshots__ │ │ └── index.spec.js.snap │ └── index.spec.js │ ├── _deprecate.scss │ ├── _doc.scss │ ├── _index.scss │ ├── docs.mdx │ └── example.jsx └── vendor ├── _deprecate.scss ├── _html5boilerplate-print.scss ├── _normalize-reset.scss ├── _normalize-sanitized.scss └── _normalize.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [Makefile] 15 | indent_style = tab 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | git_modules 3 | design-tokens 4 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | parser: 'babel-eslint' 2 | extends: 3 | - standard 4 | - standard-jsx 5 | - prettier 6 | - prettier/standard 7 | - prettier/react 8 | rules: 9 | react/jsx-key: ['error'] 10 | prefer-const: ['off'] 11 | react/jsx-fragments: ['off'] 12 | react/jsx-handler-names: ['off'] 13 | no-prototype-builtins: ['off'] 14 | -------------------------------------------------------------------------------- /.esmrc: -------------------------------------------------------------------------------- 1 | { "cjs": true, "esm": "js" } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.github/actions/build-tokens/action.yml: -------------------------------------------------------------------------------- 1 | name: build-tokens 2 | runs: 3 | using: composite 4 | steps: 5 | - name: Build Tokens 6 | run: npm run gulp -- generate:tokens:all 7 | shell: bash -------------------------------------------------------------------------------- /.github/actions/copy-tokens-from-workspace/action.yml: -------------------------------------------------------------------------------- 1 | name: copy-tokens-from-workspace 2 | runs: 3 | using: composite 4 | steps: 5 | - name: Decompress design-tokens 6 | run: tar -xvf workspace/artifact/design-tokens.tar 7 | shell: bash -------------------------------------------------------------------------------- /.github/actions/copy-tokens-to-workspace/action.yml: -------------------------------------------------------------------------------- 1 | name: copy-tokens-to-workspace 2 | runs: 3 | using: composite 4 | steps: 5 | - name: Compress design-tokens 6 | run: tar -cvf workspace/design-tokens.tar design-tokens/ 7 | shell: bash -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | daysUntilStale: 120 2 | daysUntilClose: 7 3 | exemptLabels: 4 | - roadmap 5 | staleLabel: stale 6 | markComment: > 7 | This issue has been automatically marked as stale because it has not had recent activity. 8 | It will be closed in 7 days if no further activity occurs. If you still need help with your issue, 9 | please comment and we will reply to you shortly. Thank you for your contributions to the Salesforce Lightning Design System. 10 | closeComment: false 11 | -------------------------------------------------------------------------------- /.github/workflows/remove-labels.yml: -------------------------------------------------------------------------------- 1 | name: Remove Label 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | VRT: 7 | runs-on: salesforce-ux-emu-Ubuntu 8 | steps: 9 | - uses: actions/checkout@v3 10 | - uses: actions-ecosystem/action-remove-labels@v1 11 | with: 12 | labels: | 13 | vrt:chrome-ready 14 | vrt:mobile-ready 15 | vrt:full-ready 16 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | /node_modules 4 | /shared/vendor/scss-parser-aura/node_modules 5 | .dist/ 6 | .reports/ 7 | .www/ 8 | .html/ 9 | /assets 10 | /design-tokens 11 | scripts/snap.json 12 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-a11y/register'; 2 | import '@storybook/addon-backgrounds/register'; 3 | import '@storybook/addon-docs/register'; 4 | import '@storybook/addon-options/register'; 5 | import 'storybook-addon-rtl/register'; 6 | import '@storybook/addon-viewport/register'; 7 | -------------------------------------------------------------------------------- /.storybook/components/DocsPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default props => { 4 | const { title, Docs } = props; 5 | 6 | return ( 7 |
8 |

{title}

9 | 10 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.storybook/theme/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | #ECCN:EAR99,Open Source 2 | 3 | #Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 4 | #Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license -------------------------------------------------------------------------------- /MAINTAINERS.md: -------------------------------------------------------------------------------- 1 | # Maintainers 2 | 3 | ## Release checklist 4 | 5 | When we do a release we have several tasks we need to remember to do. This is not a complete list, and will grow over time. 6 | 7 | [ ] Update our sketch ui files 8 | [ ] Update our codepen 9 | [ ] Remind designers using the starter kit to npm install to get the latest design system 10 | [ ] Tweet the release 11 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: ./heroku-start.sh 2 | -------------------------------------------------------------------------------- /Salesforce_CLA.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/Salesforce_CLA.pdf -------------------------------------------------------------------------------- /__fixtures__/ui/components/buttons/docs.mdx: -------------------------------------------------------------------------------- 1 | _heyyyy_ 2 | -------------------------------------------------------------------------------- /__fixtures__/ui/components/data-tables/advanced/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from "react"; 5 | 6 | export default ; 7 | -------------------------------------------------------------------------------- /__fixtures__/ui/components/data-tables/base/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from "react"; 5 | import classNames from "classnames"; 6 | 7 | export default
; 8 | -------------------------------------------------------------------------------- /__fixtures__/ui/components/data-tables/fixed-header/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from "react"; 5 | export default
; 6 | -------------------------------------------------------------------------------- /__fixtures__/ui/components/data-tables/fixed-header/index.markup.md: -------------------------------------------------------------------------------- 1 | JavaScript must be used to scroll the table headers as the table body scrolls. 2 | -------------------------------------------------------------------------------- /__fixtures__/ui/components/data-tables/inline-edit/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from "react"; 5 | export default
; 6 | -------------------------------------------------------------------------------- /__fixtures__/ui/utilities/alignment/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Alignment utilities will assist with general alignment problems 6 | * 7 | * @utility 8 | * @name alignment 9 | * @selector [class*='slds-align_'] 10 | * @support dev-ready 11 | */ 12 | -------------------------------------------------------------------------------- /__fixtures__/ui/utilities/alignment/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Class will absolutely center children content 6 | * 7 | * @name absolute-center 8 | * @selector .slds-align_absolute-center 9 | * @modifier 10 | */ 11 | .slds-align_absolute-center, 12 | .slds-align--absolute-center { 13 | @include absolute-center; 14 | } 15 | -------------------------------------------------------------------------------- /__tests__/a11y/__testfiles__/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/__tests__/a11y/__testfiles__/.gitkeep -------------------------------------------------------------------------------- /assets/downloads/salesforce-voice-and-tone.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/downloads/salesforce-voice-and-tone.pdf -------------------------------------------------------------------------------- /assets/downloads/swatches/salesforce-lightning-design-system.clr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/downloads/swatches/salesforce-lightning-design-system.clr -------------------------------------------------------------------------------- /assets/images/avatar1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/avatar1.jpg -------------------------------------------------------------------------------- /assets/images/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/avatar2.jpg -------------------------------------------------------------------------------- /assets/images/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/avatar3.jpg -------------------------------------------------------------------------------- /assets/images/carousel/carousel-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/carousel/carousel-01.jpg -------------------------------------------------------------------------------- /assets/images/carousel/carousel-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/carousel/carousel-02.jpg -------------------------------------------------------------------------------- /assets/images/carousel/carousel-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/carousel/carousel-03.jpg -------------------------------------------------------------------------------- /assets/images/group_avatar_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/group_avatar_160.png -------------------------------------------------------------------------------- /assets/images/group_avatar_200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/group_avatar_200.png -------------------------------------------------------------------------------- /assets/images/group_avatar_96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/group_avatar_96.png -------------------------------------------------------------------------------- /assets/images/logo-noname.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/placeholder-img@16x9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/placeholder-img@16x9.jpg -------------------------------------------------------------------------------- /assets/images/placeholder-img@9x16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/placeholder-img@9x16.jpg -------------------------------------------------------------------------------- /assets/images/popovers/popover-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/popovers/popover-action.png -------------------------------------------------------------------------------- /assets/images/popovers/popover-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/popovers/popover-header.png -------------------------------------------------------------------------------- /assets/images/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/product1.jpg -------------------------------------------------------------------------------- /assets/images/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/product2.jpg -------------------------------------------------------------------------------- /assets/images/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/product3.jpg -------------------------------------------------------------------------------- /assets/images/profile_avatar_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/profile_avatar_160.png -------------------------------------------------------------------------------- /assets/images/profile_avatar_200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/profile_avatar_200.png -------------------------------------------------------------------------------- /assets/images/profile_avatar_96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/profile_avatar_96.png -------------------------------------------------------------------------------- /assets/images/spinners/slds_spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/spinners/slds_spinner.gif -------------------------------------------------------------------------------- /assets/images/spinners/slds_spinner_brand.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/spinners/slds_spinner_brand.gif -------------------------------------------------------------------------------- /assets/images/spinners/slds_spinner_inverse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/spinners/slds_spinner_inverse.gif -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-private-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-private-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-private-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-private-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-private-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-private-default.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-public-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-public-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-public-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-public-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-public-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-public-default.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-unlisted-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-unlisted-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-unlisted-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-unlisted-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-group-unlisted-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-group-unlisted-default.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-user-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-user-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-user-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-user-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/classic/banner-user-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/classic/banner-user-default.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-brand-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-brand-default.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-private-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-private-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-private-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-private-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-private-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-private-default.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-public-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-public-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-public-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-public-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-public-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-public-default.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-unlisted-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-unlisted-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-unlisted-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-unlisted-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-group-unlisted-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-group-unlisted-default.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-user-default-medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-user-default-medium.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-user-default-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-user-default-small.png -------------------------------------------------------------------------------- /assets/images/themes/oneSalesforce/banner-user-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/themes/oneSalesforce/banner-user-default.png -------------------------------------------------------------------------------- /assets/images/welcome-mat/bg-info@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/welcome-mat/bg-info@2x.png -------------------------------------------------------------------------------- /assets/images/welcome-mat/trailhead_badge@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/assets/images/welcome-mat/trailhead_badge@2x.png -------------------------------------------------------------------------------- /ava.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // concurrency: 6, 3 | // "failFast": true, 4 | // failWithoutAssertions: false, 5 | verbose: false, 6 | timeout: '10m', 7 | // tap: true, 8 | }; 9 | -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | # See: https://www.lightningdesignsystem.com/faq/#what-browsers-are-supported 3 | # Documentation: https://github.com/ai/browserslist#queries 4 | 5 | Last 2 versions 6 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /design-tokens/aliases/border-radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | BORDER_RADIUS_SMALL: "0.125rem" 6 | BORDER_RADIUS_MEDIUM: "0.25rem" 7 | BORDER_RADIUS_LARGE: "0.5rem" 8 | BORDER_RADIUS_CIRCLE: "50%" 9 | BORDER_RADIUS_PILL: "15rem" -------------------------------------------------------------------------------- /design-tokens/aliases/border-width.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | BORDER_WIDTH_THIN: "1px" 6 | BORDER_WIDTH_THICK: "2px" 7 | -------------------------------------------------------------------------------- /design-tokens/aliases/duration.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | DURATION_INSTANTLY: "0s" 6 | DURATION_IMMEDIATELY: "0.05s" 7 | DURATION_QUICKLY: "0.1s" 8 | DURATION_PROMPTLY: "0.2s" 9 | DURATION_SLOWLY: "0.4s" 10 | DURATION_PAUSED: "3.2s" 11 | -------------------------------------------------------------------------------- /design-tokens/aliases/font-family.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | SANS_SERIF: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" 6 | MONOSPACE: "Consolas, Menlo, Monaco, Courier, monospace" 7 | -------------------------------------------------------------------------------- /design-tokens/aliases/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | FONT_SIZE_1: "0.625rem" 6 | FONT_SIZE_2: "0.75rem" 7 | FONT_SIZE_3: "0.8125rem" 8 | FONT_SIZE_4: "0.875rem" 9 | FONT_SIZE_5: "1rem" 10 | FONT_SIZE_6: "1.125rem" 11 | FONT_SIZE_7: "1.25rem" 12 | FONT_SIZE_8: "1.5rem" 13 | FONT_SIZE_9: "1.75rem" 14 | FONT_SIZE_10: "2rem" 15 | FONT_SIZE_11: "2.625rem" 16 | -------------------------------------------------------------------------------- /design-tokens/aliases/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | FONT_WEIGHT_LIGHT: "300" 6 | FONT_WEIGHT_REGULAR: "400" 7 | FONT_WEIGHT_BOLD: "700" -------------------------------------------------------------------------------- /design-tokens/aliases/offset.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | OFFSET_NONE: "0" # Needs to be quoted or will be interpreted as 'false' 6 | OFFSET_X_SMALL: 2 7 | OFFSET_SMALL: 3 8 | OFFSET_MEDIUM: 4 9 | OFFSET_LARGE: 8 10 | OFFSET_X_LARGE: 16 11 | OFFSET_XX_LARGE: 32 12 | -------------------------------------------------------------------------------- /design-tokens/aliases/spacing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | aliases: 5 | SPACING_NONE: '0' 6 | SPACING_XXX_SMALL: '0.125rem' 7 | SPACING_XX_SMALL: '0.25rem' 8 | SPACING_X_SMALL: '0.5rem' 9 | SPACING_SMALL: '0.75rem' 10 | SPACING_MEDIUM: '1rem' 11 | SPACING_LARGE: '1.5rem' 12 | SPACING_X_LARGE: '2rem' 13 | SPACING_XX_LARGE: '3rem' 14 | -------------------------------------------------------------------------------- /design-tokens/bg-icons.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: background-color 6 | type: color 7 | cssProperties: 8 | - background 9 | - background-color 10 | props: 11 | FOLDER: 12 | value: '#63A3EE' 13 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./deprecated/base.yml 6 | - ./primitive/base.yml 7 | - ./background-color.yml 8 | - ./border-color.yml 9 | - ./border-width.yml 10 | - ./box-shadow.yml 11 | - ./duration.yml 12 | - ./illustrations.yml 13 | - ./image-paths.yml 14 | - ./line-height.yml 15 | - ./radius.yml 16 | - ./sizing.yml 17 | - ./text-color.yml 18 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/deprecated/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./background-color.yml 6 | - ./border-color.yml 7 | - ./box-shadow.yml 8 | - ./font-size.yml 9 | - ./font-family.yml 10 | - ./sizing.yml 11 | - ./spacing.yml 12 | - ./text-color.yml 13 | - ./text-transform.yml 14 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/deprecated/spacing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: spacing 6 | type: size 7 | cssProperties: 8 | - 'margin*' 9 | - 'padding*' 10 | deprecated: true 11 | imports: 12 | - ../../../aliases/spacing.yml 13 | props: 14 | COMPONENT_SPACING_MARGIN: 15 | value: '0' 16 | COMPONENT_SPACING_PADDING: 17 | value: '{!SPACING_MEDIUM}' 18 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/deprecated/text-transform.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: text-transform 6 | category: text-transform 7 | cssProperties: 8 | - text-transform 9 | deprecated: true 10 | props: 11 | TEXT_TRANSFORM: 12 | value: 'none' 13 | comment: Default value for text-transform 14 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/duration.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: time 6 | category: time 7 | cssProperties: 8 | - 'animation*' 9 | - 'transition*' 10 | imports: 11 | - ../../aliases/duration.yml 12 | props: 13 | DURATION_TOAST_SHORT: 14 | value: 4.8s 15 | comment: 4.8 seconds 16 | DURATION_TOAST_MEDIUM: 17 | value: 9.6s 18 | comment: 9.6 seconds 19 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/illustrations.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: image 3 | category: illustrations 4 | 5 | props: 6 | ILLUSTRATION_EMPTY_STATE_ASSISTANT: 7 | value: '/assets/images/illustrations/empty-state-assistant.svg' 8 | type: string 9 | ILLUSTRATION_EMPTY_STATE_EVENTS: 10 | value: '/assets/images/illustrations/empty-state-events.svg' 11 | type: string 12 | ILLUSTRATION_EMPTY_STATE_TASKS: 13 | value: '/assets/images/illustrations/empty-state-tasks.svg' 14 | type: string 15 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/line-height.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: line-height 6 | type: number 7 | cssProperties: 8 | - font 9 | - '*height' 10 | props: 11 | LINE_HEIGHT_TAB: 12 | value: 2.5rem 13 | comment: Line heights for tabs 14 | access: global 15 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/primitive/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./background-color.yml 6 | - ./border-color.yml 7 | - ./palette-colors.yml 8 | - ./text-color.yml -------------------------------------------------------------------------------- /design-tokens/extensions/ui-force/radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: size 6 | category: radius 7 | cssProperties: 8 | - 'border*radius' 9 | imports: 10 | - ../../aliases/border-radius.yml 11 | props: 12 | BORDER_RADIUS_PILL: 13 | value: '{!BORDER_RADIUS_PILL}' 14 | access: global 15 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-marketing/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ../../primitive/font-weight.yml 6 | - ../../primitive/font-size.yml 7 | - ../../primitive/line-height.yml 8 | - ../../primitive/font-family.yml 9 | -------------------------------------------------------------------------------- /design-tokens/extensions/ui-one/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./deprecated/base.yml -------------------------------------------------------------------------------- /design-tokens/extensions/ui-one/deprecated/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./duration.yml -------------------------------------------------------------------------------- /design-tokens/extensions/ui-one/deprecated/duration.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: time 6 | category: time 7 | cssProperties: 8 | - 'animation*' 9 | - 'transition*' 10 | deprecated: true 11 | props: 12 | DURATION_SLIDE: 13 | value: 0.25s 14 | -------------------------------------------------------------------------------- /design-tokens/form-factor-large.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./form-factor/large/base.yml -------------------------------------------------------------------------------- /design-tokens/form-factor-medium.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./form-factor/medium/base.yml 6 | -------------------------------------------------------------------------------- /design-tokens/form-factor-small.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./form-factor/small/base.yml 6 | -------------------------------------------------------------------------------- /design-tokens/form-factor/large/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./deprecated/base.yml 6 | - ./sizing.yml -------------------------------------------------------------------------------- /design-tokens/form-factor/large/deprecated/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./font-size.yml -------------------------------------------------------------------------------- /design-tokens/form-factor/medium/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./line-height.yml 6 | - ./sizing.yml 7 | -------------------------------------------------------------------------------- /design-tokens/form-factor/medium/sizing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: sizing 6 | type: size 7 | props: 8 | WIDTH_STAGE_LEFT: 9 | value: 250px 10 | cssProperties: 11 | - width -------------------------------------------------------------------------------- /design-tokens/form-factor/small/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./border-radius.yml 6 | - ./box-shadow.yml 7 | - ./font-size.yml 8 | - ./font-weight.yml 9 | - ./line-height.yml 10 | -------------------------------------------------------------------------------- /design-tokens/form-factor/small/border-radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: size 6 | category: radius 7 | cssProperties: 8 | - 'border*radius' 9 | props: 10 | PAGE_HEADER_BORDER_RADIUS: 11 | value: '0' 12 | -------------------------------------------------------------------------------- /design-tokens/form-factor/small/box-shadow.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: box-shadow 6 | category: shadow 7 | cssProperties: 8 | - box-shadow 9 | props: 10 | CARD_SHADOW: 11 | value: 'none' 12 | PAGE_HEADER_SHADOW: 13 | value: 'none' 14 | -------------------------------------------------------------------------------- /design-tokens/form-factor/small/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: size 6 | cssProperties: 7 | - font 8 | - font-size 9 | category: font-size 10 | props: 11 | FORM_LABEL_FONT_SIZE: 12 | value: '0.875rem' 13 | -------------------------------------------------------------------------------- /design-tokens/form-factor/small/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: font 6 | type: font-weight 7 | cssProperties: 8 | - font 9 | - font-weight 10 | props: 11 | INPUT_STATIC_FONT_WEIGHT: 12 | value: '400' 13 | CARD_FONT_WEIGHT: 14 | value: '400' 15 | -------------------------------------------------------------------------------- /design-tokens/primitive.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./primitive/base.yml -------------------------------------------------------------------------------- /design-tokens/primitive/opacity.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: opacity 6 | category: opacity 7 | cssProperties: 8 | - opacity 9 | scope: global 10 | primitive: true 11 | props: 12 | OPACITY_5: 13 | value: '0.5' 14 | comment: '50% transparency of an element' 15 | OPACITY_8: 16 | value: '0.8' 17 | comment: '80% transparency of an element' 18 | -------------------------------------------------------------------------------- /design-tokens/theme-one-salesforce.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./primitive/base.yml 6 | - ./themes/oneSalesforce/base.yml -------------------------------------------------------------------------------- /design-tokens/themes/oneSalesforce/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./deprecated/base.yml 6 | - ./ui-force/base.yml -------------------------------------------------------------------------------- /design-tokens/themes/oneSalesforce/deprecated/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./background-color.yml 6 | - ./border-color.yml 7 | - ./box-shadow.yml 8 | - ./spacing.yml 9 | - ./text-color.yml -------------------------------------------------------------------------------- /design-tokens/themes/oneSalesforce/ui-force/base.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./background-color.yml 6 | - ./border-color.yml 7 | - ./border-radius.yml 8 | - ./box-shadow.yml 9 | - ./font-size.yml 10 | - ./font-weight.yml 11 | - ./image-paths.yml 12 | - ./spacing.yml 13 | - ./text-align.yml 14 | - ./text-color.yml -------------------------------------------------------------------------------- /design-tokens/themes/oneSalesforce/ui-force/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: font 6 | type: font-size 7 | cssProperties: 8 | - font-size 9 | imports: 10 | - ../../../aliases/font-size.yml 11 | props: 12 | ## LABELS 13 | FORM_LABEL_FONT_SIZE: 14 | value: '{!FONT_SIZE_2}' 15 | ## INPUTS 16 | INPUT_STATIC_FONT_SIZE: 17 | value: '{!FONT_SIZE_4}' 18 | -------------------------------------------------------------------------------- /design-tokens/themes/oneSalesforce/ui-force/text-align.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | category: text 6 | type: text-align 7 | cssProperties: 8 | - text-align 9 | props: 10 | ## CARDS 11 | CARD_FOOTER_TEXT_ALIGN: 12 | value: 'center' 13 | -------------------------------------------------------------------------------- /design-tokens/ui-analytics.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./extensions/ui-analytics/base.yml -------------------------------------------------------------------------------- /design-tokens/ui-force.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./primitive/base.yml 6 | - ./extensions/ui-force/base.yml 7 | - ./components.yml 8 | auraImports: 9 | - 'force:mqCommons' 10 | - 'force:fontCommons' -------------------------------------------------------------------------------- /design-tokens/ui-marketing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./extensions/ui-marketing/base.yml -------------------------------------------------------------------------------- /design-tokens/ui-one.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | imports: 5 | - ./extensions/ui-one/base.yml 6 | auraExtends: 'force:base' 7 | auraImports: 8 | - 'one:actionBackgrounds' -------------------------------------------------------------------------------- /docs/previewer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/docs/previewer.png -------------------------------------------------------------------------------- /docs/previewer.v1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/docs/previewer.v1.jpg -------------------------------------------------------------------------------- /docs/variant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/docs/variant.png -------------------------------------------------------------------------------- /formats/custom-props.js: -------------------------------------------------------------------------------- 1 | const theo = require('theo'); 2 | 3 | const SLDS = 'slds'; 4 | const SCOPE = ':root'; 5 | 6 | theo.registerFormat( 7 | 'custom-props.scss', 8 | `${SCOPE} { 9 | {{#each props as |prop|}} 10 | {{#if prop.comment}}/* {{{prop.comment}}} */{{/if}} 11 | --${SLDS}-{{#eq prop.scope "global"}}g-{{/eq}}{{#eq prop.scope "shared"}}s-{{/eq}}{{kebabcase prop.name}}: {{#eq prop.type "string"}}"{{/eq}}{{{prop.value}}}{{#eq prop.type "string"}}"{{/eq}}; 12 | {{/each}} 13 | } 14 | `, 15 | ); 16 | -------------------------------------------------------------------------------- /heroku-start.sh: -------------------------------------------------------------------------------- 1 | # Initialize cache directory. 2 | mkdir -p cache/nginx 3 | echo 'script=heroku-start at=cache-initialized' 4 | # 5 | bin/start-nginx-solo 6 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /* eslint-env jest */ 5 | /* eslint-disable import/first */ 6 | 7 | // Needed for Enzyme 8 | global.requestAnimationFrame = cb => setTimeout(cb, 0); 9 | 10 | import { configure } from 'enzyme'; 11 | import Adapter from 'enzyme-adapter-react-16'; 12 | 13 | configure({ adapter: new Adapter() }); 14 | -------------------------------------------------------------------------------- /jest.teardown.global.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import fetch from 'isomorphic-fetch'; 5 | 6 | // Jest can't handle exports.default 7 | module.exports = async () => { 8 | await fetch('http://localhost:12345/api/jest/teardown'); 9 | }; 10 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')] 3 | }; 4 | -------------------------------------------------------------------------------- /scripts/compile/__tests__/__fixtures__/css-fixture.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | const cssFixture = ` 5 | .foo { 6 | padding-left: 10px; 7 | padding-right: 20px; 8 | } 9 | 10 | .bar { 11 | margin-top: 30px; 12 | margin-bottom: 40px; 13 | } 14 | .foo { 15 | padding-left: 50px; 16 | padding-bottom: 60px; 17 | } 18 | `; 19 | 20 | module.exports = cssFixture; 21 | -------------------------------------------------------------------------------- /scripts/compile/docs/docs-list.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | const uijson = require('../../../.dist/ui.json'); 5 | 6 | // loop through component list and add file entry points 7 | let componentExports = {}; 8 | Object.keys(uijson.components).forEach( 9 | c => (componentExports[c] = `./ui/components/${c}/docs.mdx`) 10 | ); 11 | 12 | module.exports = componentExports; 13 | -------------------------------------------------------------------------------- /scripts/compile/entry.docs.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | export { default as CodeBlock } from '../../shared/components/CodeBlock'; 5 | export { default as CodeView } from '../../shared/components/CodeView'; 6 | export { default as Example } from '../../shared/components/Example'; 7 | 8 | export const getDoc = require.context('../../ui', true, /.*?docs\.mdx$/); 9 | -------------------------------------------------------------------------------- /scripts/gulp/accessibility/index.js: -------------------------------------------------------------------------------- 1 | export { default as axe } from './axe'; 2 | export { default as vnu } from './vnu'; 3 | -------------------------------------------------------------------------------- /scripts/release-notes/legacy.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const fileContents = fs 5 | .readFileSync(path.resolve('RELEASENOTES.legacy.md'), { encoding: 'utf-8' }) 6 | .replace(/^\*\*(.*)\*\*$/gm, '### $1') 7 | .replace(/^\#\# \*\*Release \[(.*)\](.*)\*\*$/gm, '## Release $1$2'); 8 | 9 | module.exports = { 10 | notes: fileContents 11 | }; 12 | -------------------------------------------------------------------------------- /shared/utils/beautify.js: -------------------------------------------------------------------------------- 1 | import { html as htmlBeautify } from 'js-beautify'; 2 | 3 | export const beautify = html => 4 | htmlBeautify(html, { 5 | brace_style: 'end-expand', 6 | indent_size: 2, 7 | indent_char: ' ', 8 | unformatted: [], 9 | 'wrap_line_length ': 78, 10 | indent_inner_html: true 11 | }); 12 | -------------------------------------------------------------------------------- /shared/utils/objects.js: -------------------------------------------------------------------------------- 1 | export const filterObject = (obj, callback) => 2 | Object.fromEntries( 3 | Object.entries(obj).filter(([key, val]) => callback(key, val)) 4 | ); 5 | -------------------------------------------------------------------------------- /styling-hooks/slds-hooks.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": [ 3 | "@salesforce-ux/sds-styling-hooks/src/props/colors.json", 4 | "@salesforce-ux/sds-styling-hooks/src/props/palettes.json", 5 | "./transparent-colors.json", 6 | "./shadow.json" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /ui/_styling-hooks.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | // ---------------------------------------------------------------------------- 5 | // Imports 6 | // ---------------------------------------------------------------------------- 7 | 8 | @import '../design-tokens/dist/slds-hooks.custom-props'; 9 | -------------------------------------------------------------------------------- /ui/components/_kinetics.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 5 | 6 | // Breadcrumbs 7 | 'breadcrumbs/kinetics/index', 8 | 9 | // Button 10 | 'buttons/kinetics/index'; 11 | -------------------------------------------------------------------------------- /ui/components/accordion/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name accordion 7 | * @selector .slds-accordion 8 | * @support dev-ready 9 | * @category experience 10 | * @type expandable-panel 11 | * @layout responsive 12 | * @synonyms expando collapso, expandable sections, toggle visibility 13 | * @lwc 14 | * @styling-hooks 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/accordion/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-button.slds-accordion__summary-action { 2 | line-height: $line-height-button; 3 | } 4 | -------------------------------------------------------------------------------- /ui/components/accordion/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Accordion'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/activity-timeline/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Activity Timeline Release Notes 4 | 5 | 6 | ## 2.22.0 7 | ### Changed 8 | - Replaced aria-hidden with hidden attribute for components that show/hide content 9 | 10 | 11 | -------------------------------------------------------------------------------- /ui/components/activity-timeline/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary The activity timeline displays each of the user’s upcoming, current, and past activities. 6 | * 7 | * @base 8 | * @name activity-timeline 9 | * @selector .slds-timeline 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-display 13 | * @role article 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/activity-timeline/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Activity Timeline'; 8 | 9 | const storyOptions = { 10 | eyes: { 11 | waitBeforeScreenshot: 1500 12 | } 13 | }; 14 | 15 | generateStories( 16 | patternName, 17 | examples, 18 | ['default', 'examples', 'states'], 19 | Docs, 20 | storyOptions 21 | ); 22 | -------------------------------------------------------------------------------- /ui/components/alert/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Alert'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/app-launcher/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'App Launcher'; 8 | 9 | generateStories(patternName, examples, ['examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/avatar-group/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Avatar Group Release Notes 4 | 5 | 6 | 7 | ## 2.8.0 8 | 9 | ### Added 10 | 11 | - Added a new blueprint and docs for Avatar Group component that is used for communicating to users that more than one person is associated with an item. 12 | -------------------------------------------------------------------------------- /ui/components/avatar-group/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Avatar Group'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/avatar-group/mixins/_index.scss: -------------------------------------------------------------------------------- 1 | /// Calculate the scaled value of a User Initial Avatar's content 2 | /// 3 | /// @require $size 4 | /// @param $size {Integer} The desired size of font, in rems, to display in the avatar. 5 | @mixin avatar-grouped-user-initials($size) { // $size: 6 | $scale-factor: strip-unit(math.div($size, $font-size-heading-small)); 7 | transform: scale( $scale-factor ); 8 | } 9 | -------------------------------------------------------------------------------- /ui/components/avatar/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as InitialsExamples from './initials/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, InitialsExamples]; 7 | 8 | const patternName = 'Avatar'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/badges/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Badges are labels which hold small amounts of information. 6 | * 7 | * @base 8 | * @name badges 9 | * @selector .slds-badge 10 | * @support dev-ready 11 | * @category base 12 | * @type data-display 13 | * @layout responsive 14 | * @lwc 15 | * @styling-hooks 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/badges/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Badges'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/brand-band/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Brand Band Release Notes 4 | 5 | ## 2.19 6 | 7 | ### Fixed 8 | 9 | - Fixed base brand band, brand band group and brand band user hardcoded image paths 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/components/brand-band/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name brand-band 7 | * @selector .slds-brand-band 8 | * @support dev-ready 9 | * @category feature 10 | * @brandable 11 | * @layout responsive 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/brand-band/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Brand Band'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/brand-band/tokens/spacing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: spacing 7 | type: size 8 | cssProperties: 9 | - 'margin*' 10 | - 'padding*' 11 | props: 12 | TEMPLATE_GUTTERS: 13 | value: '0' 14 | TEMPLATE_PROFILE_GUTTERS: 15 | value: '0' 16 | -------------------------------------------------------------------------------- /ui/components/breadcrumbs/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Breadcrumbs'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/builder-header/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Builder specific global header 6 | * 7 | * @base 8 | * @name builder-header 9 | * @selector .slds-builder-header_container 10 | * @support dev-ready 11 | * @category feature 12 | * @type navigation 13 | * @role navigation 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/button-groups/list/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Creates button group container for list items 6 | * 7 | * @name list 8 | * @selector .slds-button-group-list 9 | * @restrict ul 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/button-icons/base/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @include deprecate('4.0.0', 'Use .slds-button--icon instead') { 5 | 6 | .slds-button_icon-bare, 7 | .slds-button--icon-bare { 8 | line-height: $line-height-reset; 9 | vertical-align: middle; 10 | color: var(--slds-g-color-neutral-base-50, #{$color-text-icon-default}); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /ui/components/button-icons/bordered-filled-container/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Creates a button icon inside of a filled container with a border 6 | * 7 | * @name bordered-filled-container 8 | * @selector .slds-button_icon-border-filled 9 | * @restrict button 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | 14 | // CSS found in button-icons/base/_index.scss 15 | -------------------------------------------------------------------------------- /ui/components/button-icons/brand/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Creates a brand button icon 6 | * 7 | * @name brand 8 | * @selector .slds-button_icon-brand 9 | * @restrict button 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | 14 | // CSS found in button-icons/base/_index.scss 15 | -------------------------------------------------------------------------------- /ui/components/button-icons/inverse/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Creates a button icon inside of a transparent container with a border on an inversed background 6 | * 7 | * @name inverse 8 | * @selector .slds-button_icon-inverse 9 | * @restrict button 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | 14 | // CSS found in button-icons/base/_index.scss 15 | -------------------------------------------------------------------------------- /ui/components/button-icons/menu/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | import { ButtonMenu } from './'; 6 | 7 | export default [ 8 | { 9 | id: 'default', 10 | label: 'Button Menu – default', 11 | element: 12 | } 13 | ]; 14 | -------------------------------------------------------------------------------- /ui/components/button-icons/tokens/border-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: border-color 8 | cssProperties: 9 | - 'border*' 10 | - box-shadow 11 | imports: 12 | - "../../../../design-tokens/aliases/color-palettes.yml" 13 | props: 14 | BUTTON_ICON_COLOR_BORDER_PRIMARY: 15 | value: '{!PALETTE_NEUTRAL_100}' 16 | -------------------------------------------------------------------------------- /ui/components/button-icons/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: sizing 7 | category: height 8 | cssProperties: 9 | - width 10 | - height 11 | props: 12 | BUTTON_ICON_BOUNDARY_TOUCH: 13 | value: 2.75rem 14 | -------------------------------------------------------------------------------- /ui/components/button-icons/transparent-container/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Creates a button icon inside of a transparent container 6 | * 7 | * @name transparent-container 8 | * @selector .slds-button_icon-container 9 | * @restrict button 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | 14 | // CSS found in button-icons/base/_index.scss 15 | -------------------------------------------------------------------------------- /ui/components/buttons/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-button { 2 | --slds-c-button-line-height: #{border-box-line-height($height-tappable)}; 3 | font-weight: $font-weight-bold; 4 | } 5 | -------------------------------------------------------------------------------- /ui/components/buttons/tokens/border-radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: size 7 | category: radius 8 | cssProperties: 9 | - 'border*radius' 10 | props: 11 | BUTTON_BORDER_RADIUS: 12 | value: .25rem 13 | -------------------------------------------------------------------------------- /ui/components/buttons/tokens/text-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: text-color 8 | cssProperties: 9 | - color 10 | - fill 11 | imports: 12 | - "../../../../design-tokens/aliases/color-palettes.yml" 13 | props: 14 | BUTTON_COLOR_TEXT_PRIMARY: 15 | value: '{!PALETTE_NEUTRAL_100}' 16 | -------------------------------------------------------------------------------- /ui/components/cards/base/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @selector .slds-card_empty 6 | * @deprecated 7 | */ 8 | @include deprecate('4.0.0', 'Use a text-align--center utility class instead for empty card') { 9 | 10 | .slds-card_empty .slds-card__body, 11 | .slds-card--empty .slds-card__body { 12 | text-align: center; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /ui/components/cards/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-card { 2 | border-color: transparent; 3 | border-radius: 0; 4 | } 5 | 6 | .slds-card__header-title { 7 | font-size: $var-font-size-6; 8 | font-weight: $card-font-weight; // Ensures title is bold when there is no nested link 9 | } 10 | -------------------------------------------------------------------------------- /ui/components/cards/einstein/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name einstein 6 | * @summary Einstein themed card header 7 | * @selector .slds-einstein-header 8 | * @restrict .slds-card__header 9 | * @category feature 10 | * @type layout 11 | * @role article 12 | * @variant 13 | * @support dev-ready 14 | */ 15 | 16 | // CSS found in 'einstein-header/base/index' 17 | -------------------------------------------------------------------------------- /ui/components/cards/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as EinsteinExamples from './einstein/example'; 3 | import * as WrapperExamples from './wrapper/example'; 4 | import { generateStories } from '../../shared/helpers'; 5 | import Docs from './docs.mdx'; 6 | 7 | const examples = [BaseExamples, EinsteinExamples, WrapperExamples]; 8 | 9 | const patternName = 'Cards'; 10 | 11 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 12 | -------------------------------------------------------------------------------- /ui/components/cards/tokens/background-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: background-color 5 | cssProperties: 6 | - 'background*' 7 | - 'border*' 8 | - box-shadow 9 | imports: 10 | - "../../../../design-tokens/aliases/color-palettes.yml" 11 | props: 12 | CARD_COLOR_BACKGROUND: 13 | value: '{!PALETTE_NEUTRAL_100}' 14 | comment: Default Card component background color. 15 | -------------------------------------------------------------------------------- /ui/components/cards/tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: box-shadow 7 | category: shadow 8 | cssProperties: 9 | - box-shadow 10 | props: 11 | CARD_SHADOW: 12 | value: 'none' 13 | -------------------------------------------------------------------------------- /ui/components/cards/tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font 7 | type: font-weight 8 | cssProperties: 9 | - font 10 | - font-weight 11 | props: 12 | CARD_FONT_WEIGHT: 13 | value: '400' 14 | comment: Use for active tab. 15 | -------------------------------------------------------------------------------- /ui/components/cards/tokens/text-align.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: text 7 | type: text-align 8 | cssProperties: 9 | - text-align 10 | props: 11 | CARD_FOOTER_TEXT_ALIGN: 12 | value: 'right' 13 | -------------------------------------------------------------------------------- /ui/components/carousel/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Carousel'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/chat/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as PastExamples from './past/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, PastExamples]; 7 | 8 | const patternName = 'Chat'; 9 | 10 | const storyOptions = { 11 | isFullBleed: true 12 | }; 13 | 14 | generateStories( 15 | patternName, 16 | examples, 17 | ['default', 'examples', 'states'], 18 | Docs, 19 | storyOptions 20 | ); 21 | -------------------------------------------------------------------------------- /ui/components/checkbox-button-group/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name checkbox-button-group 7 | * @selector .slds-checkbox_button-group 8 | * @support dev-ready 9 | * @category base 10 | * @type data-entry 11 | * @role checkbox 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/checkbox-button-group/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Checkbox Button Group'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/checkbox-button/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name checkbox-button 7 | * @selector .slds-checkbox-button 8 | * @support dev-ready 9 | * @category base 10 | * @type data-entry 11 | * @role checkbox 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/checkbox-button/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example.jsx'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Checkbox Button'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/checkbox-toggle/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name checkbox-toggle 7 | * @selector .slds-checkbox_toggle 8 | * @support dev-ready 9 | * @category base 10 | * @type data-entry 11 | * @role checkbox 12 | * @layout responsive 13 | * @styling-hooks 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/checkbox-toggle/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-checkbox_toggle, 2 | .slds-checkbox--toggle { 3 | padding: $spacing-xxx-small 0; 4 | 5 | .slds-form-element__label { 6 | align-items: flex-start; 7 | font-size: $font-size-5; 8 | padding-right: $spacing-x-small; 9 | } 10 | 11 | [type="checkbox"] { 12 | 13 | + .slds-checkbox_faux_container, 14 | + .slds-checkbox--faux_container { 15 | font-size: $font-size-2; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /ui/components/checkbox-toggle/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Checkbox Toggle'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/checkbox-toggle/tokens/line-height.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: line-height 4 | type: number 5 | cssProperties: 6 | - font 7 | - '*height' 8 | props: 9 | LINE_HEIGHT_TOGGLE: 10 | value: 1.3rem 11 | comment: Line heights for toggle buttons 12 | -------------------------------------------------------------------------------- /ui/components/checkbox/form-element/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-checkbox_standalone { 2 | min-height: $height-tappable; 3 | 4 | [type="checkbox"] { 5 | @include square($square-tappable); // Needs to be larger than faux checkbox for increased tap target size 6 | @include vertical-center; 7 | } 8 | 9 | .slds-checkbox_faux { 10 | @include vertical-center; // We vertically align with position instead of flex due to ".slds-form-element__control .slds-checkbox" display specificity 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /ui/components/checkbox/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as CheckboxExamples from './base/example'; 2 | import * as CheckboxFormElementExamples from './form-element/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [CheckboxExamples, CheckboxFormElementExamples]; 7 | 8 | const patternName = 'Checkbox'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/color-picker/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A configurable interface for color selection 6 | * 7 | * @base 8 | * @name color-picker 9 | * @selector .slds-color-picker 10 | * @support dev-ready 11 | * @category base 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/color-picker/predefined-only/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | import ColorPicker from '../'; 6 | 7 | export default ; 8 | 9 | export const states = [ 10 | { 11 | id: 'predefined-color-picker-open', 12 | label: 'Open', 13 | element: 14 | } 15 | ]; 16 | -------------------------------------------------------------------------------- /ui/components/color-picker/tokens/background-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: background-color 8 | cssProperties: 9 | - 'background*' 10 | imports: 11 | - "../../../../design-tokens/aliases/color-palettes.yml" 12 | props: 13 | COLOR_PICKER_SLIDER_THUMB_COLOR_BACKGROUND: 14 | value: '{!PALETTE_NEUTRAL_95}' 15 | -------------------------------------------------------------------------------- /ui/components/color-picker/tokens/border-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: border-color 8 | cssProperties: 9 | - 'border*' 10 | imports: 11 | - "../../../../design-tokens/aliases/color-palettes.yml" 12 | props: 13 | COLOR_PICKER_SLIDER_THUMB_BORDER_COLOR: 14 | value: "{!PALETTE_NEUTRAL_30}" 15 | -------------------------------------------------------------------------------- /ui/components/color-picker/tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: box-shadow 7 | category: shadow 8 | cssProperties: 9 | - box-shadow 10 | props: 11 | COLOR_PICKER_SWATCH_SHADOW: 12 | value: 'inset 0 0 1px rgba(0,0,0,0.4)' 13 | -------------------------------------------------------------------------------- /ui/components/color-picker/tokens/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font-size 7 | type: font-size 8 | cssProperties: 9 | - font 10 | - font-size 11 | props: 12 | COLOR_PICKER_INPUT_CUSTOM_HEX_FONT_SIZE: 13 | value: 0.75rem 14 | -------------------------------------------------------------------------------- /ui/components/combobox/autocomplete/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name autocomplete 6 | * @selector [aria-autocomplete="list"] 7 | * @restrict .slds-combobox__input 8 | * @support dev-ready 9 | * @variant 10 | */ 11 | -------------------------------------------------------------------------------- /ui/components/combobox/deprecated-inline-listbox/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name deprecated-inline-listbox 6 | * @selector .slds-has-inline-listbox 7 | * @restrict .slds-combobox_container 8 | * @variant 9 | * @support dev-ready 10 | * @deprecated 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/combobox/deprecated-multi-entity/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name deprecated-multi-entity 6 | * @selector .slds-has-object-switcher 7 | * @restrict .slds-combobox_container 8 | * @variant 9 | * @support dev-ready 10 | * @deprecated 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/combobox/deprecated-readonly/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name deprecated-readonly 6 | * @selector [readonly] 7 | * @restrict .slds-combobox_container input 8 | * @support dev-ready 9 | * @variant 10 | * @deprecated 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/combobox/dialog/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name dialog 6 | * @selector .slds-combobox[aria-haspopup=“dialog”] 7 | * @restrict .slds-combobox_container .slds-combobox 8 | * @support dev-ready 9 | * @variant 10 | */ 11 | -------------------------------------------------------------------------------- /ui/components/counter/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Counter Release Notes 4 | 5 | 6 | 7 | ## 2.10.0 8 | 9 | - Created new page for the Counter version of Input. 10 | -------------------------------------------------------------------------------- /ui/components/counter/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * 6 | * @summary A number input that is increased or decrease by companion buttons 7 | * 8 | * @base 9 | * @name counter 10 | * @selector .slds-input_counter 11 | * @support dev-ready 12 | * @category base 13 | * @type data-entry 14 | * @role counter 15 | * @layout responsive 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/counter/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Counter'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/data-tables/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-th__action { 2 | padding-right: $square-tappable-xx-small; 3 | } 4 | -------------------------------------------------------------------------------- /ui/components/data-tables/fixed-header/index.markup.md: -------------------------------------------------------------------------------- 1 | JavaScript must be used to scroll the table headers as the table body scrolls. 2 | -------------------------------------------------------------------------------- /ui/components/data-tables/hidden-header/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Used to remove the top border when a table's header is visually hidden 6 | * 7 | * @name hidden-header 8 | * @selector .slds-table_header-hidden 9 | * @restrict .slds-table 10 | * @support dev-ready 11 | * @variant 12 | * @lwc 13 | */ 14 | .slds-table_header-hidden { 15 | border-top: 0; 16 | } 17 | -------------------------------------------------------------------------------- /ui/components/data-tables/tokens/border-radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: size 7 | category: radius 8 | cssProperties: 9 | - 'border*radius' 10 | props: 11 | TABLE_BORDER_RADIUS: 12 | value: '0' 13 | -------------------------------------------------------------------------------- /ui/components/data-tables/tokens/spacing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: spacing 4 | type: size 5 | comment: '' 6 | cssProperties: 7 | - top 8 | - right 9 | - bottom 10 | - left 11 | - 'margin*' 12 | - 'padding*' 13 | - 'border*' 14 | - '*width' 15 | - '*height' 16 | - box-shadow 17 | imports: 18 | - "../../../../design-tokens/aliases/spacing.yml" 19 | props: 20 | TABLE_CELL_SPACING: 21 | value: '{!SPACING_X_SMALL}' 22 | -------------------------------------------------------------------------------- /ui/components/data-tables/tokens/text-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: text-color 8 | cssProperties: 9 | - color 10 | - fill 11 | imports: 12 | - "../../../../design-tokens/aliases/color-palettes.yml" 13 | props: 14 | TABLE_COLOR_TEXT_HEADER: 15 | value: '{!PALETTE_NEUTRAL_30}' 16 | -------------------------------------------------------------------------------- /ui/components/datepickers/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A datepicker is a text input to capture a date. You can select a single date, date range or date and time. 6 | * 7 | * @base 8 | * @name datepickers 9 | * @selector .slds-datepicker 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-entry 13 | * @role grid, combobox 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/datepickers/tokens/text-color.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: color 7 | category: text-color 8 | cssProperties: 9 | - color 10 | imports: 11 | - "../../../../design-tokens/aliases/color-palettes.yml" 12 | props: 13 | DATEPICKER_COLOR_TEXT_DAY_ADJACENT_MONTH: 14 | value: '{!PALETTE_NEUTRAL_50}' 15 | -------------------------------------------------------------------------------- /ui/components/datetime-picker/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A datetime picker is used to select a day and a time. 6 | * 7 | * @base 8 | * @name datetime-picker 9 | * @selector .slds-datetime-picker 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-entry 13 | * @role grid, combobox 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/datetime-picker/base/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Initializes a datetime picker 6 | * 7 | * @name base 8 | * @selector .slds-datetime-picker 9 | * @restrict div 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | 14 | .slds-datetimepicker_has-tooltip { 15 | 16 | .slds-form-element__icon { 17 | padding-top: 0; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /ui/components/datetime-picker/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Datetime Picker'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'height: 26rem;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/docked-composer/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Docked Composer Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/docked-composer/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Docked Composer'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'height: 32rem;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/docked-composer/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: size 4 | category: sizing 5 | cssProperties: 6 | - font 7 | - font-size 8 | - '*width' 9 | - '*height' 10 | - flex 11 | - top 12 | - right 13 | - bottom 14 | - left 15 | - 'margin*' 16 | - 'padding*' 17 | - transform 18 | props: 19 | HEIGHT_DOCKED_BAR: 20 | value: 2.5rem 21 | comment: Height of the docked bar. 22 | -------------------------------------------------------------------------------- /ui/components/docked-form-footer/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Docked Form Footer Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/docked-form-footer/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name docked-form-footer 7 | * @selector .slds-docked-form-footer 8 | * @support dev-ready 9 | * @s1 false 10 | */ 11 | -------------------------------------------------------------------------------- /ui/components/docked-form-footer/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Docked Form Footer'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'height: 14rem;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/docked-utility-bar/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Docked Utility Bar Release Notes 4 | 5 | 6 | 7 | ## 2.11.0 8 | 9 | ### Fixed 10 | 11 | - The popout indicator icon now positions itself correctly in the right-to-left context. 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/components/docked-utility-bar/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels. 6 | * 7 | * @base 8 | * @name docked-utility-bar 9 | * @selector .slds-utility-bar_container 10 | * @support dev-ready 11 | * @s1 false 12 | * @scroller 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/docked-utility-bar/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Docked Utility Bar'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'height: 34rem; overflow: hidden;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/drop-zone/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Drop Zone Release Notes 4 | 5 | 6 | 7 | ## 2.15.0 8 | 9 | ### Changed 10 | 11 | - Changed `flex-basis` to `auto` for the drop zone label to fix a layout issue in IE11 12 | 13 | ## 2.7.0 14 | 15 | ### Added 16 | 17 | - Added new Drop Zone component to help construct a drag and drop screen building experience 18 | -------------------------------------------------------------------------------- /ui/components/drop-zone/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Drop Zone'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/drop-zone/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: sizing 4 | type: size 5 | cssProperties: 6 | - '*height' 7 | - '*width' 8 | props: 9 | DROP_ZONE_SLOT_HEIGHT: 10 | value: '0.25rem' 11 | -------------------------------------------------------------------------------- /ui/components/dueling-picklist/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Dueling Picklist'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/dynamic-icons/eq/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | let EqIcon = () => ( 4 |
8 |
9 |
10 |
11 | Text alternative when needed 12 |
13 | ); 14 | 15 | export default EqIcon; 16 | -------------------------------------------------------------------------------- /ui/components/dynamic-icons/tokens/size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: sizing 7 | type: size 8 | cssProperties: 9 | - '*width' 10 | - '*height' 11 | props: 12 | GLOBAL_ACTION_ICON_SIZE: 13 | value: '1.5rem' 14 | comment: 'Global action icon size' 15 | TYPING_ICON_DOT_SIZE: 16 | value: '.5rem' 17 | comment: 'Typing icon size' 18 | -------------------------------------------------------------------------------- /ui/components/dynamic-menu/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name dynamic-menu 7 | * @selector .slds-dynamic-menu 8 | * @support dev-ready 9 | * @s1 false 10 | * @scroller 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/dynamic-menu/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Dynamic Menu'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/einstein-header/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Einstein Header Release Notes 4 | 5 | ## 2.19 6 | 7 | ### Fixed 8 | 9 | - Fixed base header and header figure hardcoded image paths 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/components/einstein-header/tokens/text-shadow.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: shadow 4 | category: text-shadow 5 | cssProperties: 6 | - text-shadow 7 | imports: 8 | - "../../../../design-tokens/aliases/color-palettes.yml" 9 | props: 10 | EINSTEIN_HEADER_TEXT_SHADOW: 11 | value: '{!PALETTE_CLOUD_BLUE_90}' 12 | comment: Text shadow color for Einstein header background to make text more readable 13 | -------------------------------------------------------------------------------- /ui/components/expandable-section/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Toggle visibility of section content 6 | * 7 | * @base 8 | * @name expandable-section 9 | * @selector .slds-section 10 | * @category experience 11 | * @support dev-ready 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/expandable-section/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Expandable Section'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/expression/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Expression Release Notes 4 | 5 | 6 | 7 | ## 2.13.1 8 | 9 | ### Fixed 10 | 11 | - Small improvements to the UI text. 12 | 13 | ## 2.7.0 14 | 15 | ### Added 16 | 17 | - Added new Expression component to help users declaratively construct logical expressions 18 | -------------------------------------------------------------------------------- /ui/components/feeds/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Feeds Release Notes 4 | 5 | 6 | 7 | ## 2.7.0 8 | 9 | ### Changed 10 | - Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting 11 | -------------------------------------------------------------------------------- /ui/components/feeds/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed. 6 | * 7 | * @base 8 | * @name feeds 9 | * @selector .slds-feed 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-display 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/feeds/base/index.markup.md: -------------------------------------------------------------------------------- 1 | A discussion feed consists of a list of posts. A `.slds-feed__item` contains a post and comments related to that post. 2 | -------------------------------------------------------------------------------- /ui/components/feeds/comment/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 'deprecate'; 5 | 6 | /** 7 | * @selector .slds-comment__content 8 | * @restrict .slds-comment div 9 | */ 10 | .slds-comment__content { 11 | padding: $var-spacing-vertical-xx-small 0; 12 | } 13 | -------------------------------------------------------------------------------- /ui/components/feeds/comment/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/feeds/comment/index.markup.md -------------------------------------------------------------------------------- /ui/components/feeds/post-with-attachments/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | .slds-post__payload { 5 | padding: 0 0 $spacing-medium; 6 | 7 | &:empty { 8 | padding: 0; 9 | border: 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /ui/components/file-selector/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as ImageExamples from './image/example'; 3 | import * as IntegratedExamples from './integrated/example'; 4 | import { generateStories } from '../../shared/helpers'; 5 | import Docs from './docs.mdx'; 6 | 7 | const examples = [BaseExamples, ImageExamples, IntegratedExamples]; 8 | 9 | const patternName = 'File Selector'; 10 | 11 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 12 | -------------------------------------------------------------------------------- /ui/components/files/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Files are a representation of content uploaded as an attachment. 6 | * 7 | * @base 8 | * @name files 9 | * @selector .slds-file 10 | * @support dev-ready 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/files/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Files'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/files/tokens/z-index.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: z-index 4 | category: z-index 5 | cssProperties: 6 | - 'z-index' 7 | props: 8 | FILES_Z_INDEX_HOVER: 9 | value: 5 10 | type: number 11 | -------------------------------------------------------------------------------- /ui/components/form-element/stacked/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-form-element_stacked, 2 | .slds-form_stacked .slds-form-element, 3 | .slds-form_horizontal .slds-form-element_stacked { 4 | 5 | .slds-form-element__icon { 6 | padding-top: 0; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /ui/components/form-element/tokens/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: size 7 | cssProperties: 8 | - font 9 | - font-size 10 | category: font-size 11 | props: 12 | FORM_LABEL_FONT_SIZE: 13 | value: '0.75rem' 14 | -------------------------------------------------------------------------------- /ui/components/form-layout/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | -------------------------------------------------------------------------------- /ui/components/global-header/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as Base from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [Base]; 6 | 7 | const patternName = 'Global Header'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'height: 340px;', 11 | isViewport: true 12 | }; 13 | 14 | generateStories( 15 | patternName, 16 | examples, 17 | ['default', 'examples', 'states'], 18 | Docs, 19 | storyOptions 20 | ); 21 | -------------------------------------------------------------------------------- /ui/components/global-header/tokens/background-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: background-color 5 | cssProperties: 6 | - 'background*' 7 | imports: 8 | - "../../../../design-tokens/aliases/color-palettes.yml" 9 | props: 10 | GLOBAL_HEADER_COLOR_BACKGROUND: 11 | value: '{!PALETTE_NEUTRAL_100}' 12 | comment: Global Header background color 13 | BRAND_LOGO_IMAGE: 14 | value: '/logo-noname.svg' 15 | type: string 16 | -------------------------------------------------------------------------------- /ui/components/global-header/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: size 4 | category: sizing 5 | cssProperties: 6 | - font 7 | - font-size 8 | - '*width' 9 | - '*height' 10 | - flex 11 | - top 12 | - right 13 | - bottom 14 | - left 15 | - 'margin*' 16 | - 'padding*' 17 | - transform 18 | props: 19 | SQUARE_ICON_GLOBAL_IDENTITY_ICON: 20 | value: 1.25rem 21 | comment: Global identity icon size. 22 | -------------------------------------------------------------------------------- /ui/components/global-navigation/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as NavigationBarExamples from './navigation-bar/example'; 2 | import * as NavigationTabBarExamples from './navigation-tab-bar/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [NavigationBarExamples, NavigationTabBarExamples]; 7 | 8 | const patternName = 'Global Navigation'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/icons/action/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Action icons 6 | * 7 | * @name action 8 | * @selector [class*='slds-icon-action-'] 9 | * @restrict .slds-icon_container, svg, abbr 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/icons/custom/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * Custom icons have a rounded square shape and use a class on the container 6 | * for the background color. 7 | * 8 | * @summary Custom icons 9 | * 10 | * @name custom 11 | * @selector [class*='slds-icon-custom-'] 12 | * @restrict .slds-icon_container, svg, abbr 13 | * @support dev-ready 14 | * @variant 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/icons/doctype/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Container for icons 6 | * 7 | * @name doctype 8 | * @selector [class*='slds-icon-doctype-'] 9 | * @restrict .slds-icon_container, svg 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/icons/standard/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * Standard icons have a rounded square shape and use a class on the container 6 | * for the background color. 7 | * 8 | * @summary Standard icons 9 | * 10 | * @name standard 11 | * @selector [class*='slds-icon-standard-'] 12 | * @restrict .slds-icon_container, svg, abbr 13 | * @support dev-ready 14 | * @variant 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/illustration/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Illustration Release Notes 4 | 5 | 6 | 7 | ## 2.13.1 8 | 9 | ### Fixed 10 | 11 | - Removed `Xlink` namespace. It was deprecated in the SVG 2 specification. 12 | 13 | ## 2.7.0 14 | 15 | ### Added 16 | 17 | - Added example for large illustrations 18 | -------------------------------------------------------------------------------- /ui/components/illustration/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Illustration'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/illustration/tokens/stroke-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: color 3 | category: stroke-color 4 | cssProperties: 5 | - stroke 6 | - fill 7 | imports: 8 | - "../../../../design-tokens/aliases/color-palettes.yml" 9 | props: 10 | ILLUSTRATION_COLOR_PRIMARY: 11 | value: '{!PALETTE_CLOUD_BLUE_80}' 12 | comment: Primary color for illustrations 13 | ILLUSTRATION_COLOR_SECONDARY: 14 | value: '{!PALETTE_CLOUD_BLUE_90}' 15 | comment: Secondary color for illustrations 16 | -------------------------------------------------------------------------------- /ui/components/input/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Text inputs are used for freeform data entry 6 | * 7 | * @base 8 | * @name input 9 | * @selector .slds-input 10 | * @support dev-ready 11 | * @category base 12 | * @type data-entry 13 | * @layout responsive 14 | * @lwc 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/input/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as InputExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [InputExamples]; 6 | 7 | const patternName = 'Input'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/input/tokens/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font-size 7 | type: font-size 8 | cssProperties: 9 | - font 10 | - font-size 11 | imports: 12 | - "../../../../design-tokens/aliases/font-size.yml" 13 | props: 14 | INPUT_STATIC_FONT_SIZE: 15 | value: '{!FONT_SIZE_3}' 16 | -------------------------------------------------------------------------------- /ui/components/input/tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font 7 | type: font-weight 8 | cssProperties: 9 | - font 10 | - font-weight 11 | props: 12 | INPUT_STATIC_FONT_WEIGHT: 13 | value: '400' 14 | INPUT_READONLY_FONT_WEIGHT: 15 | value: '400' 16 | -------------------------------------------------------------------------------- /ui/components/input/tokens/text-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: text-color 5 | cssProperties: 6 | - color 7 | - fill 8 | imports: 9 | - ../../../../design-tokens/aliases/color-palettes.yml 10 | props: 11 | INPUT_STATIC_COLOR: 12 | value: "{!PALETTE_NEUTRAL_10}" 13 | -------------------------------------------------------------------------------- /ui/components/list-builder/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name list-builder 7 | * @selector .slds-list-builder 8 | * @support dev-ready 9 | * @s1 false 10 | * @scroller 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/list-builder/base/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name base 6 | * @selector .slds-list-builder 7 | * @restrict div, section 8 | * @variant 9 | * @support dev-ready 10 | */ 11 | -------------------------------------------------------------------------------- /ui/components/list-builder/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as InlineEditExamples from './inline-edit/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, InlineEditExamples]; 7 | 8 | const patternName = 'List Builder'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/list-builder/inline-edit/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/list-builder/inline-edit/index.markup.md -------------------------------------------------------------------------------- /ui/components/lookups-mobile/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Mobile Lookups Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/lookups/base/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 'deprecate'; 5 | 6 | /** 7 | * @summary Container that manages layout when a listbox of pill options sit next to a combobox search input 8 | * 9 | * @name base 10 | * @selector .slds-combobox 11 | * @restrict div 12 | * @support dev-ready 13 | * @variant 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/map/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name map 7 | * @selector .slds-map_container 8 | * @support dev-ready 9 | * @category experience 10 | * @type data-display 11 | * @s1 true 12 | * @layout responsive 13 | * @lwc 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/map/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-map_container { 2 | padding: $spacing-medium $spacing-medium 0; 3 | } 4 | 5 | .slds-map { 6 | min-width: (rem(380px) - ($spacing-medium * 2)); 7 | } 8 | 9 | .slds-has-coordinates { 10 | max-height: none; 11 | } 12 | 13 | .slds-coordinates__title { 14 | font-size: $font-size-6; 15 | } 16 | -------------------------------------------------------------------------------- /ui/components/menus/action-overflow/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | .slds-dropdown_actions a, 5 | .slds-dropdown--actions a { 6 | color: $brand-text-link; 7 | } 8 | -------------------------------------------------------------------------------- /ui/components/menus/action-overflow/index.markup.md: -------------------------------------------------------------------------------- 1 | An action overflow is a list of actions that are usually secondary or tertiary to a task. These are usually utility actions like edit, delete, etc. 2 | -------------------------------------------------------------------------------- /ui/components/menus/dropdown-height/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/menus/dropdown-height/index.markup.md -------------------------------------------------------------------------------- /ui/components/menus/dropdown-positioning/index.markup.md: -------------------------------------------------------------------------------- 1 | Positioning helpers allow the developer to position a dropdown menu. The default location is **top** and **center**. When the dropdown is activated, it is at the center base of the target and expands down. 2 | 3 | A dropdown may also be positioned with the bottom above its target using `slds-dropdown_bottom`. Horizontal modifiers can be added to either top or bottom positioned dropdowns using `slds-dropdown_left` or `slds-dropdown_right`. 4 | -------------------------------------------------------------------------------- /ui/components/menus/dropdown/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-dropdown { 2 | padding: 0; 3 | font-size: $font-size-5; 4 | } 5 | 6 | .slds-dropdown__item { 7 | 8 | > a { 9 | line-height: border-box-line-height($height-tappable, 0); 10 | padding: 0 $spacing-small; 11 | } 12 | } 13 | 14 | .slds-dropdown__header { 15 | font-size: $font-size-5; 16 | } 17 | -------------------------------------------------------------------------------- /ui/components/menus/dropdown/index.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/react'; 2 | import * as DropdownExamples from './example'; 3 | import { getDisplayElementById } from '../../../shared/helpers'; 4 | 5 | const stories = storiesOf('Components/Menus/Dropdown', module).add( 6 | 'Base', 7 | () => DropdownExamples.default 8 | ); 9 | 10 | DropdownExamples.examples.forEach(example => { 11 | stories.add(example.label, () => 12 | getDisplayElementById(DropdownExamples.examples, example.id) 13 | ); 14 | }); 15 | -------------------------------------------------------------------------------- /ui/components/modals/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name modals 7 | * @selector .slds-modal 8 | * @support dev-ready 9 | * @category structure 10 | * @type layout 11 | * @role modal-dialog 12 | * @s1 false 13 | * @layout adaptive 14 | * @scroller 15 | * @styling-hooks 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/modals/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-modal { 2 | 3 | .slds-modal__title { 4 | font-weight: $font-weight-bold; 5 | } 6 | } 7 | 8 | .slds-modal__close { 9 | @include square($height-tappable); 10 | } 11 | 12 | .slds-modal__header .slds-modal__close { 13 | top: -$height-tappable; 14 | right: 0; 15 | } 16 | -------------------------------------------------------------------------------- /ui/components/modals/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Modals'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: BaseExamples.exampleDemoStyles 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/notifications/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Notifications Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/notifications/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Notifications serve as a feedback & confirmation mechanism that comes into the page at the top right. 6 | * 7 | * @base 8 | * @name notifications 9 | * @selector .slds-notification 10 | * @support dev-ready 11 | * @category experience 12 | * @type messaging 13 | * @role dialog 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/notifications/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Notifications'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/page-headers/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name page-headers 7 | * @selector .slds-page-header 8 | * @support dev-ready 9 | * @category structure 10 | * @type data-display 11 | * @role presentation 12 | * @layout adaptive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/page-headers/related-list/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Initializes Related List home page header 6 | * 7 | * @variant 8 | * @name related-list 9 | * @selector .slds-page-header_related-list 10 | * @restrict .slds-page-header 11 | * @support dev-ready 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/page-headers/tokens/border-radius.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: size 7 | category: radius 8 | cssProperties: 9 | - 'border*radius' 10 | props: 11 | PAGE_HEADER_BORDER_RADIUS: 12 | value: '0' 13 | -------------------------------------------------------------------------------- /ui/components/page-headers/tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | type: box-shadow 7 | category: shadow 8 | cssProperties: 9 | - box-shadow 10 | props: 11 | PAGE_HEADER_SHADOW: 12 | value: 'none' 13 | -------------------------------------------------------------------------------- /ui/components/page-headers/tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font-weight 7 | type: font-weight 8 | cssProperties: 9 | - font-weight 10 | props: 11 | PAGE_HEADER_TITLE_FONT_WEIGHT: 12 | value: '400' 13 | -------------------------------------------------------------------------------- /ui/components/page-headers/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | type: size 6 | category: sizing 7 | cssProperties: 8 | - '*width' 9 | - '*height' 10 | props: 11 | PAGE_HEADER_ICON_SIZE: 12 | value: 2.25rem 13 | comment: Page header Entity Icon size 14 | -------------------------------------------------------------------------------- /ui/components/panels/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A panel provides contextual and detailed information based on a click or hover interaction of data by a user. 6 | * 7 | * @base 8 | * @name panels 9 | * @selector .slds-panel 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-display, user-input 13 | * @s1 false 14 | * @scroller 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/panels/detail/_index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/panels/detail/_index.scss -------------------------------------------------------------------------------- /ui/components/panels/filtering/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @name filtering 6 | * @selector .slds-panel_filters 7 | * @restrict .slds-panel 8 | * @variant 9 | * @support dev-ready 10 | * @s1 false 11 | */ 12 | .slds-panel_filters, 13 | .slds-panel--filters { 14 | margin-left: $spacing-medium; 15 | box-shadow: $shadow-drop-down; 16 | border-radius: 0; 17 | } 18 | -------------------------------------------------------------------------------- /ui/components/path-simple/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Path Simple Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/path/tokens/line-height.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: line-height 4 | type: number 5 | cssProperties: 6 | - font 7 | - '*height' 8 | props: 9 | LINE_HEIGHT_SALESPATH: 10 | value: 1.5rem 11 | comment: Line heights for salespath 12 | -------------------------------------------------------------------------------- /ui/components/picklist/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Picklist'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'min-height: 12rem;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/pills/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name pills 7 | * @selector .slds-pill, .slds-pill_container 8 | * @support dev-ready 9 | * @lwc 10 | * @styling-hooks 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/pills/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as ListboxExamples from './listbox-of-pill-options/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, ListboxExamples]; 7 | 8 | const patternName = 'Pills'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/pills/listbox-of-pill-options/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A listbox of Pills is a way to display a list of selected options when performing user input 6 | * 7 | * @name listbox-of-pill-options 8 | * @selector .slds-listbox [role="listbox"] 9 | * @restrict .slds-pill 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/popovers/nubbins/index.markup.md: -------------------------------------------------------------------------------- 1 | Nubbins are indicators that inform the user of the direction of the content associated with the popover. 2 | -------------------------------------------------------------------------------- /ui/components/popovers/panels/index.markup.md: -------------------------------------------------------------------------------- 1 | Panels are used to provide a preview of the hyperlinked content. 2 | -------------------------------------------------------------------------------- /ui/components/popovers/prompt/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-popover_prompt__heading { 2 | font-size: $font-size-7; 3 | } 4 | -------------------------------------------------------------------------------- /ui/components/popovers/themes/index.markup.md: -------------------------------------------------------------------------------- 1 | A `.slds-popover` can accept theme modifiers. Adding a theme class such as `.slds-theme_error` to the `.slds-popover` will apply that theme. 2 | -------------------------------------------------------------------------------- /ui/components/popovers/tokens/text-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: text-color 5 | cssProperties: 6 | - color 7 | imports: 8 | - "../../../../design-tokens/aliases/color-palettes.yml" 9 | props: 10 | POPOVER_COLOR_TEXT: 11 | value: '{!PALETTE_NEUTRAL_80}' 12 | comment: Text color for step counter in walkthrough variant of popovers 13 | -------------------------------------------------------------------------------- /ui/components/process/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Process Release Notes 4 | 5 | 6 | 7 | ## 2.8.0 8 | 9 | ### Fixed 10 | 11 | ### Removed 12 | 13 | - Removed `slds-text-title_caps` from wizard labels. 14 | -------------------------------------------------------------------------------- /ui/components/progress-bar/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A progress bar component communicates to the user the progress of a particular process. 6 | * 7 | * @base 8 | * @name progress-bar 9 | * @selector .slds-progress-bar 10 | * @support dev-ready 11 | * @category base 12 | * @type process 13 | * @role progressbar 14 | * @layout responsive 15 | * @lwc 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/progress-indicator/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as ModalExamples from './modal/example'; 3 | import * as VerticalExamples from './vertical/example'; 4 | import { generateStories } from '../../shared/helpers'; 5 | import Docs from './docs.mdx'; 6 | 7 | const examples = [BaseExamples, ModalExamples, VerticalExamples]; 8 | 9 | const patternName = 'Progress Indicator'; 10 | 11 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 12 | -------------------------------------------------------------------------------- /ui/components/progress-indicator/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: size 4 | category: sizing 5 | cssProperties: 6 | - '*width' 7 | - '*height' 8 | - '*flex*' 9 | - top 10 | - right 11 | - bottom 12 | - left 13 | - 'margin*' 14 | - 'padding*' 15 | - transform 16 | props: 17 | PROGRESS_BAR_HEIGHT: 18 | value: 0.125rem 19 | comment: Height of the Progress Bar 20 | -------------------------------------------------------------------------------- /ui/components/progress-ring/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name progress-ring 7 | * @selector .slds-progress-ring 8 | * @support prototype 9 | * @category base 10 | * @layout responsive 11 | */ 12 | -------------------------------------------------------------------------------- /ui/components/progress-ring/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Progress Ring'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/progress-ring/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: sizing 7 | type: size 8 | cssProperties: 9 | - '*height' 10 | - '*width' 11 | - 'top' 12 | - 'right' 13 | - 'bottom' 14 | - 'left' 15 | props: 16 | PROGRESS_RING_WIDTH: 17 | value: 0.1875rem 18 | comment: Thickness of the Progress Ring's ring 19 | -------------------------------------------------------------------------------- /ui/components/prompt/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Prompt Release Notes 4 | 5 | 6 | 7 | ## 2.13.1 8 | 9 | ### Fixed 10 | 11 | - Small improvements to the UI text. 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/components/prompt/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | /* eslint-env jest */ 4 | 5 | import createHelpers from '../../../../jest.helpers'; 6 | import Prompt from '../base/example'; 7 | 8 | const { matchesMarkup } = createHelpers(__dirname); 9 | 10 | describe('Prompt', () => { 11 | it('renders a default prompt', () => matchesMarkup(Prompt)); 12 | }); 13 | -------------------------------------------------------------------------------- /ui/components/prompt/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name prompt 7 | * @selector .slds-modal_prompt 8 | * @support dev-ready 9 | * @category experience 10 | * @type messaging 11 | * @role alert 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/prompt/base/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @include deprecate('4.0.0', 'Close button should be removed from the markup') { 5 | 6 | .slds-modal_prompt, 7 | .slds-modal--prompt { 8 | 9 | .slds-modal__close { 10 | display: none; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ui/components/prompt/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Prompt'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/publishers/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Publishers Release Notes 4 | 5 | 6 | 7 | ## 2.7.0 8 | 9 | ### Fixed 10 | 11 | - Made the publisher label visible to screen readers in the collapsed state of a publisher, by removing the use of `display: none` 12 | -------------------------------------------------------------------------------- /ui/components/publishers/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as CommentExamples from './comment/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, CommentExamples]; 7 | 8 | const patternName = 'Publishers'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/radio-button-group/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name radio-button-group 7 | * @selector .slds-radio_button-group 8 | * @support dev-ready 9 | * @category base 10 | * @type data-entry 11 | * @role radiogroup 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/radio-button-group/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Radio Button Group'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/radio-button-group/tokens/line-height.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: "line-height" 4 | type: number 5 | cssProperties: 6 | - font 7 | - "*height" 8 | props: 9 | RADIO_BUTTON_GROUP_LINE_HEIGHT_TOUCH: 10 | value: 2.69rem 11 | comment: Line height for touch screens 12 | -------------------------------------------------------------------------------- /ui/components/radio-group/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A select list that can have a single entry checked at any one time. 6 | * 7 | * @base 8 | * @name radio-group 9 | * @selector .slds-radio 10 | * @support dev-ready 11 | * @category base 12 | * @type data-entry 13 | * @role radiogroup 14 | * @lwc 15 | * @styling-hooks 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/radio-group/base/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-radio { 2 | 3 | .slds-radio__label { 4 | @include flex-vertical-center; 5 | min-height: $height-tappable; 6 | } 7 | 8 | .slds-radio_faux, 9 | .slds-radio--faux { 10 | @include square($square-tappable-x-small); 11 | } 12 | 13 | .slds-form-element__label { 14 | display: inline-flex; // In touch, .slds-form-element__label uses flex for vert centering 15 | font-size: $font-size-5; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /ui/components/radio-group/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Radio Group'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/regions/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Regions Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/components/rich-text-editor/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary The Rich Text Editor is a textarea with added capabilities for use in various publishers. 6 | * 7 | * @base 8 | * @name rich-text-editor 9 | * @selector .slds-rich-text-editor 10 | * @support dev-ready 11 | * @category feature 12 | * @type data-entry 13 | * @role textbox,toolbar 14 | * @lwc 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/rich-text-editor/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Rich Text Editor'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/scoped-notifications/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Scoped Notifications Release Notes 4 | 5 | 6 | 7 | ## 2.26.0 8 | 9 | ### Fixed 10 | 11 | - Fixed color of links (Anchor tags) to meet minimum contrast requirements against light background. 12 | 13 | ## 2.11.5 14 | 15 | - Added examples for Informational, Success, Warning and Error states 16 | 17 | 18 | -------------------------------------------------------------------------------- /ui/components/scoped-notifications/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name scoped-notifications 7 | * @selector .slds-scoped-notification 8 | * @support dev-ready 9 | * @category experience 10 | * @type messaging 11 | * @role status 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/scoped-notifications/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Scoped Notifications'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/scoped-notifications/tokens/background-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: background-color 5 | cssProperties: 6 | - 'background*' 7 | - 'border*' 8 | - box-shadow 9 | imports: 10 | - "../../../../design-tokens/aliases/color-palettes.yml" 11 | props: 12 | NOTIFICATION_COLOR_BACKGROUND_INVERSE: 13 | value: '{!PALETTE_NEUTRAL_50}' 14 | comment: Dark notification component background color. 15 | -------------------------------------------------------------------------------- /ui/components/scoped-tabs/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Scoped Tabs'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/select/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Select'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/setup-assistant/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * 6 | * @summary Setup Assistant 7 | * 8 | * @base 9 | * @name setup-assistant 10 | * @selector .slds-setup-assistant 11 | * @category experience 12 | * @type data-display 13 | * @support dev-ready 14 | * @layout responsive 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/setup-assistant/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Setup Assistant'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/slider/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary An input range slider lets the user specify a numeric value which must be between two specified values. 6 | * 7 | * @base 8 | * @name slider 9 | * @selector .slds-slider 10 | * @category base 11 | * @type user-input 12 | * @support dev-ready 13 | * @lwc 14 | * @styling-hooks 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/slider/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Slider'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/slider/tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: box-shadow 4 | category: shadow 5 | cssProperties: 6 | - box-shadow 7 | imports: 8 | - "../../../../design-tokens/aliases/color-palettes.yml" 9 | props: 10 | SLIDER_HANDLE_SHADOW: 11 | value: '{!BLACK_TRANSPARENT_16} 0 2px 3px' 12 | -------------------------------------------------------------------------------- /ui/components/slider/tokens/sizing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: sizing 4 | type: size 5 | comment: '' 6 | cssProperties: 7 | - '*width' 8 | - '*height' 9 | props: 10 | SLIDER_HANDLE_SIZE: 11 | value: '1rem' 12 | SLIDER_TRACK_HEIGHT: 13 | value: '4px' 14 | SLIDER_TRACK_WIDTH: 15 | value: '100%' 16 | -------------------------------------------------------------------------------- /ui/components/spinners/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | 4 | import Spinner from '../index.react'; 5 | 6 | import createHelpers from '../../../../jest.helpers'; 7 | 8 | const { matchesMarkup } = createHelpers(__dirname); 9 | 10 | it('renders spinner', () => 11 | matchesMarkup()); 12 | 13 | it('renders delayed spinner', () => 14 | matchesMarkup( 15 | 16 | )); 17 | -------------------------------------------------------------------------------- /ui/components/spinners/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Spinners'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/split-view/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Split View'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'overflow: hidden;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/split-view/tokens/border-color.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | type: color 4 | category: border-color 5 | cssProperties: 6 | - 'border*' 7 | - box-shadow 8 | imports: 9 | - "../../../../design-tokens/aliases/color-palettes.yml" 10 | props: 11 | SPLIT_VIEW_COLOR_BORDER: 12 | value: '{!PALETTE_NEUTRAL_80}' 13 | comment: Row dividers in Split View list 14 | -------------------------------------------------------------------------------- /ui/components/summary-detail/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Summary Detail Release Notes 4 | 5 | 6 | ## 2.22.1 7 | ### Fixed 8 | 9 | - Matching styles for [dir=rtl] added. 10 | ## 2.22.0 11 | ### Changed 12 | - Replaced aria-hidden with hidden attribute for components that show/hide content 13 | 14 | 15 | -------------------------------------------------------------------------------- /ui/components/summary-detail/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Use Summary Detail to show and hide details while always showing a summary 6 | * 7 | * @base 8 | * @name summary-detail 9 | * @selector .slds-summary-detail 10 | * @category experience 11 | * @type data-display 12 | * @support dev-ready 13 | * @layout responsive 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/summary-detail/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Summary Detail'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/tabs/mobile-stack/_touch.scss: -------------------------------------------------------------------------------- 1 | .slds-tabs-mobile__item { 2 | 3 | .slds-button:active, 4 | .slds-button:hover { // :hover is triggered by mobile on single tap or press and drag, doesn't go away unless user taps away 5 | color: currentColor; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /ui/components/tabs/scrolling/index.markup.md: -------------------------------------------------------------------------------- 1 | We are not currently exposing this but the CSS needs to be included. Please do not remove! -------------------------------------------------------------------------------- /ui/components/tabs/tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font 7 | type: font-weight 8 | cssProperties: 9 | - font 10 | - font-weight 11 | props: 12 | TABS_FONT_WEIGHT: 13 | value: '400' 14 | comment: Use for active tab. 15 | -------------------------------------------------------------------------------- /ui/components/textarea/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name textarea 7 | * @selector .slds-textarea 8 | * @support dev-ready 9 | * @category base 10 | * @type data-entry 11 | * @role textbox 12 | * @layout responsive 13 | * @lwc 14 | * @styling-hooks 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/textarea/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Textarea'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/tiles/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Tiles Release Notes 4 | 5 | 6 | 7 | ## 2.18.0 8 | 9 | ### Added 10 | 11 | - Added annotations for tile board CSS classes. 12 | -------------------------------------------------------------------------------- /ui/components/tiles/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | 6 | * @summary A tile is a grouping of related information associated with a record. 7 | * 8 | * @base 9 | * @name tiles 10 | * @selector .slds-tile, .slds-tile_board 11 | * @support dev-ready 12 | * @category structure 13 | * @type data-display 14 | * @layout responsive 15 | * @lwc 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/tiles/article/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/tiles/article/index.markup.md -------------------------------------------------------------------------------- /ui/components/tiles/avatar/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/tiles/avatar/index.markup.md -------------------------------------------------------------------------------- /ui/components/tiles/base/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/tiles/base/index.markup.md -------------------------------------------------------------------------------- /ui/components/tiles/icon/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/tiles/icon/index.markup.md -------------------------------------------------------------------------------- /ui/components/tiles/task/index.markup.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/salesforce-ux/design-system/14e0dc7471044fc415c047c774e32927158803ba/ui/components/tiles/task/index.markup.md -------------------------------------------------------------------------------- /ui/components/timepicker/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Timepicker Release Notes 4 | 5 | 6 | 7 | ## 2.16.0 8 | 9 | ### Changed 10 | 11 | - Removed the usage of the deprecated combobox. The Timepicker now uses the current combobox. 12 | 13 | 14 | -------------------------------------------------------------------------------- /ui/components/timepicker/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A timepicker is an autocomplete text input to capture a time. 6 | * 7 | * @base 8 | * @name timepicker 9 | * @selector .slds-timepicker 10 | * @support dev-ready 11 | * @category experience 12 | * @type data-entry 13 | * @role combobox 14 | * @scroller 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/timepicker/base/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 'deprecate'; 5 | 6 | /** 7 | * @summary Initializes a timepicker 8 | * 9 | * @name base 10 | * @selector .slds-timepicker 11 | * @restrict div 12 | * @support dev-ready 13 | * @variant 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/timepicker/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Timepicker'; 8 | 9 | const storyOptions = { 10 | defaultDemoStyles: 'min-height: 18rem;' 11 | }; 12 | 13 | generateStories( 14 | patternName, 15 | examples, 16 | ['default', 'examples', 'states'], 17 | Docs, 18 | storyOptions 19 | ); 20 | -------------------------------------------------------------------------------- /ui/components/toast/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Toast serves as a feedback & confirmation mechanism after the user takes an action. 6 | * 7 | * @base 8 | * @name toast 9 | * @selector .slds-notify_container 10 | * @support dev-ready 11 | * @category base 12 | * @type messaging 13 | * @role alert 14 | * @layout responsive 15 | * @styling-hooks 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/toast/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import * as ModalToastExamples from './modal-toast/example'; 3 | import { generateStories } from '../../shared/helpers'; 4 | import Docs from './docs.mdx'; 5 | 6 | const examples = [BaseExamples, ModalToastExamples]; 7 | 8 | const patternName = 'Toast'; 9 | 10 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 11 | -------------------------------------------------------------------------------- /ui/components/toast/modal-toast/index.markup.md: -------------------------------------------------------------------------------- 1 | ***This folder is here for deprecation sake*** 2 | 3 | When notifications are used in modals, they should be placed in the 4 | `.slds-modal__header` so that they can easily be seen in modals with 5 | scrolling content. This modal contains a notifications > toast with the error theme. 6 | -------------------------------------------------------------------------------- /ui/components/tooltips/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Tooltips'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/tree-grid/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. 6 | * 7 | * @base 8 | * @name tree-grid 9 | * @selector .slds-table_tree 10 | * @category experience 11 | * @type data-display, data-entry 12 | * @role treegrid 13 | * @support dev-ready 14 | * @s1 false 15 | * @lwc 16 | */ 17 | -------------------------------------------------------------------------------- /ui/components/tree-grid/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Tree Grid'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/trees/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. 6 | * 7 | * @base 8 | * @name trees 9 | * @selector .slds-tree_container 10 | * @category experience 11 | * @type navigation 12 | * @support dev-ready 13 | * @s1 false 14 | * @scroller 15 | * @lwc 16 | * @styling-hooks 17 | */ 18 | -------------------------------------------------------------------------------- /ui/components/trees/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Trees'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/trial-bar/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Trial Bar Release Notes 4 | 5 | 6 | 7 | ## 2.7.0 8 | 9 | ### Fixed 10 | 11 | - Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden 12 | -------------------------------------------------------------------------------- /ui/components/trial-bar/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Trial bar components are used to provide an interactive and educational prospect experience for setup. 6 | * 7 | * @base 8 | * @name trial-bar 9 | * @selector .slds-trial-header 10 | * @category feature 11 | * @type process 12 | * @support dev-ready 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/trial-bar/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as HeaderExamples from './header/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [HeaderExamples]; 6 | 7 | const patternName = 'Trial Bar'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/vertical-navigation/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @base 6 | * @name vertical-navigation 7 | * @selector .slds-nav-vertical 8 | * @support dev-ready 9 | * @category structure 10 | * @type navigation 11 | * @role navigation 12 | * @layout responsive 13 | * @scroller 14 | */ 15 | -------------------------------------------------------------------------------- /ui/components/vertical-navigation/list/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as ListExamples from './example'; 2 | import { generateStories } from "../../../shared/helpers"; 3 | import Docs from "../docs.mdx"; 4 | 5 | const examples = [ListExamples]; 6 | 7 | const patternName = "Vertical Navigation"; 8 | 9 | generateStories(patternName, examples, ["default", "examples", "states"], Docs); 10 | 11 | -------------------------------------------------------------------------------- /ui/components/vertical-navigation/quickfind/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | -------------------------------------------------------------------------------- /ui/components/vertical-tabs/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Vertical Tabs Release Notes 4 | 5 | 6 | 7 | ## 2.8.0 8 | 9 | ### Added 10 | - Added examples of icons in vertical tabs 11 | - Added examples of badges in vertical tabs 12 | - Added new classes to support icons and badges, `slds-vertical-tabs__left-icon` and `slds-vertical-tabs__right-icon` 13 | -------------------------------------------------------------------------------- /ui/components/vertical-tabs/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary A component that shows groups of content, separated into tabs, and controlled by the tabs 6 | * 7 | * @base 8 | * @name vertical-tabs 9 | * @selector .slds-vertical-tabs 10 | * @support dev-ready 11 | * @category base 12 | * @type navigation 13 | * @role tablist 14 | * @lwc 15 | */ 16 | -------------------------------------------------------------------------------- /ui/components/vertical-tabs/index.stories.js: -------------------------------------------------------------------------------- 1 | import * as BaseExamples from './base/example'; 2 | import { generateStories } from '../../shared/helpers'; 3 | import Docs from './docs.mdx'; 4 | 5 | const examples = [BaseExamples]; 6 | 7 | const patternName = 'Vertical Tabs'; 8 | 9 | generateStories(patternName, examples, ['default', 'examples', 'states'], Docs); 10 | -------------------------------------------------------------------------------- /ui/components/visual-picker/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | 6 | * @base 7 | * @name visual-picker 8 | * @selector .slds-visual-picker, .slds-box_link 9 | * @type action 10 | * @category experience 11 | * @support dev-ready 12 | * @layout responsive 13 | */ 14 | -------------------------------------------------------------------------------- /ui/components/visual-picker/link/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Checkmark that is visibily toggled when input is checked 6 | * 7 | * @name link 8 | * @selector .slds-box_link 9 | * @restrict .slds-box 10 | * @support dev-ready 11 | * @variant 12 | */ 13 | -------------------------------------------------------------------------------- /ui/components/welcome-mat/tokens/font-size.yml: -------------------------------------------------------------------------------- 1 | # Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | global: 5 | scope: component 6 | category: font-size 7 | type: font-size 8 | cssProperties: 9 | - font 10 | - font-size 11 | props: 12 | WELCOME_MAT_FONT_SIZE_INFO_TITLE: 13 | value: '2.625rem' 14 | comment: Font size for the info title 15 | -------------------------------------------------------------------------------- /ui/components/welcome-mat/tokens/spacing.yml: -------------------------------------------------------------------------------- 1 | global: 2 | scope: component 3 | category: spacing 4 | type: size 5 | cssProperties: 6 | - top 7 | - right 8 | - bottom 9 | - left 10 | - 'margin*' 11 | - 'padding*' 12 | - 'border*' 13 | - '*width' 14 | - '*height' 15 | - box-shadow 16 | 17 | props: 18 | WELCOME_MAT_SPACING_INFO: 19 | value: '7.75rem' 20 | comment: Bottom spacing (safe area) for background image 21 | -------------------------------------------------------------------------------- /ui/dependencies/_appearance.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @mixin appearance($value) { 5 | /* stylelint-disable property-no-vendor-prefix */ 6 | -moz-appearance: $value; 7 | -webkit-appearance: $value; 8 | appearance: $value; 9 | } 10 | -------------------------------------------------------------------------------- /ui/dependencies/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 5 | 'functions', 6 | 'appearance', 7 | 'rtl', 8 | 'layout', 9 | 'text', 10 | 'typography', 11 | 'sizing', 12 | 'scrolling', 13 | 'interactions', 14 | 'kinetics', 15 | 'lists', 16 | 'motion', 17 | 'popover', 18 | 'theme', 19 | 'visibility', 20 | 'forms', 21 | 'tabs', 22 | 'root', 23 | 'core'; 24 | -------------------------------------------------------------------------------- /ui/dependencies/_interactions.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @mixin focus-button { 5 | outline: 0; 6 | box-shadow: $shadow-button-focus; 7 | } 8 | 9 | @mixin focus-inverse { 10 | outline: none; 11 | box-shadow: $shadow-button-focus-inverse; 12 | border: $border-width-thin solid var(--slds-g-color-neutral-base-100, #{$color-border-button-focus-inverse}); 13 | } 14 | -------------------------------------------------------------------------------- /ui/dependencies/_rtl.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @mixin rtl() { 5 | 6 | [dir="rtl"] & { 7 | @content; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ui/dependencies/_touch.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | @mixin text-heading--label-normal { 3 | font-size: $font-size-4; 4 | line-height: $line-height-heading; 5 | color: var(--slds-g-color-neutral-base-30, #{$color-text-weak}); 6 | } 7 | -------------------------------------------------------------------------------- /ui/legacy.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | // Lightning Design System 5 | @import 'init'; 6 | 7 | // Resets 8 | @import 'vendor/normalize'; 9 | @include core($scoped: false, $globals: true); 10 | 11 | // Framework 12 | @import 'touch/index'; 13 | @import 'components/index'; 14 | @import 'utilities/index'; 15 | 16 | // Print 17 | @import 'vendor/html5boilerplate-print'; 18 | -------------------------------------------------------------------------------- /ui/shared/empty-link/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | // Prevents React warning about javascript:void(0) usage 5 | // https://github.com/facebook/react/pull/15047 6 | const EmptyLink = ({ children, title }) => ( 7 | e.preventDefault()} title={title}> 8 | {children} 9 | 10 | ); 11 | 12 | EmptyLink.propTypes = { 13 | children: PropTypes.string, 14 | title: PropTypes.string 15 | }; 16 | 17 | export default EmptyLink; 18 | -------------------------------------------------------------------------------- /ui/shared/heading/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const elements = { 5 | 1: 'h1', 6 | 2: 'h2', 7 | 3: 'h3', 8 | 4: 'h4', 9 | 5: 'h5', 10 | 6: 'h6' 11 | }; 12 | 13 | function Heading({ level, children, ...props }) { 14 | return React.createElement(elements[level] || elements[2], props, children); 15 | } 16 | 17 | Heading.propTypes = { 18 | level: PropTypes.oneOf(Object.keys(elements)), 19 | children: PropTypes.node 20 | }; 21 | 22 | export default Heading; 23 | -------------------------------------------------------------------------------- /ui/touch-demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | // Lightning Design System 5 | @import 'init'; 6 | @import 'dependencies/touch'; 7 | 8 | body { 9 | font-size: $font-size-5; 10 | } 11 | 12 | // Framework 13 | @import 'components/touch'; 14 | @import 'utilities/touch'; 15 | -------------------------------------------------------------------------------- /ui/touch-internal.scss: -------------------------------------------------------------------------------- 1 | /*! Lightning Design System 2.11.0-dev */ 2 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 3 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 4 | 5 | // Lightning Design System 6 | @import 'init'; 7 | @import 'dependencies/touch'; 8 | 9 | #{$reset-wrapping-class} { 10 | @media (pointer: coarse) and (hover: none) { 11 | // Framework 12 | @import 'components/touch'; 13 | @import 'utilities/touch'; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /ui/touch.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | // Lightning Design System 5 | @import 'init'; 6 | @import 'dependencies/touch'; 7 | 8 | // Framework 9 | @media (pointer: coarse) and (hover: none) { 10 | 11 | body { 12 | font-size: $font-size-5; 13 | } 14 | 15 | @import 'components/touch'; 16 | @import 'utilities/touch'; 17 | } 18 | -------------------------------------------------------------------------------- /ui/touch/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 5 | 6 | // Feeds 7 | 'forms/edit-dialog/index', 8 | 9 | // Menus 10 | 'menus/action-overflow/index'; 11 | -------------------------------------------------------------------------------- /ui/touch/forms/edit-dialog/index.markup.md: -------------------------------------------------------------------------------- 1 | The Edit Dialog is a form that appears as a modal for mobile devices. 2 | -------------------------------------------------------------------------------- /ui/touch/forms/index.table.yml: -------------------------------------------------------------------------------- 1 | description: This table gives you a quick overview of the {{abbreviatedName}} CSS classes that can be applied to this component. 2 | classes: 3 | - 4 | class: slds-modal_form 5 | description: Modal becomes full width and height of the viewport to accomodate the form within. 6 | applied: .slds-modal 7 | -------------------------------------------------------------------------------- /ui/touch/menus/action-overflow/index.markup.md: -------------------------------------------------------------------------------- 1 | An action overflow for touch is the list of actions that are usually secondary or tertiary to a task. These are usually utility actions like edit, delete, etc. This is specifically for touch devices. 2 | -------------------------------------------------------------------------------- /ui/touch/menus/index.docs.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | 6 | export const intro = ( 7 |

8 | A Menu offers a list of actions or functions that a user can access. 9 |

10 | ); 11 | -------------------------------------------------------------------------------- /ui/touch/notifications/prompt/index.markup.md: -------------------------------------------------------------------------------- 1 | A prompt for touch is a notification modal that appears in the small form factor. 2 | -------------------------------------------------------------------------------- /ui/touch/page-headers/index.docs.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | 6 | export const intro = ( 7 |

8 | The page header is a masthead that contains the Title of the page, and 9 | supporting details. 10 |

11 | ); 12 | -------------------------------------------------------------------------------- /ui/utilities/_touch.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @import 5 | // Text 6 | 'text/touch'; 7 | -------------------------------------------------------------------------------- /ui/utilities/alignment/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Alignment Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/alignment/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name alignment 7 | * @selector [class*='slds-align_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/alignment/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Class will absolutely center children content 6 | * 7 | * @name absolute-center 8 | * @selector .slds-align_absolute-center 9 | * @modifier 10 | */ 11 | .slds-align_absolute-center, 12 | .slds-align--absolute-center { 13 | @include absolute-center; 14 | } 15 | -------------------------------------------------------------------------------- /ui/utilities/alignment/docs.mdx: -------------------------------------------------------------------------------- 1 | import CodeView from '../../../shared/components/CodeView.jsx'; 2 | import { getDisplayElementById } from '../../shared/helpers'; 3 | import * as Base from './example'; 4 | 5 |
6 | Alignment utilities will assist with general alignment problems 7 |
8 | 9 | ## Examples 10 | 11 | ### Absolute Center 12 | 13 | 14 | {getDisplayElementById(Base.examples, 'absolute-center')} 15 | 16 | -------------------------------------------------------------------------------- /ui/utilities/borders/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Borders Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/borders/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name borders 7 | * @selector [class*='slds-border_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/box/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Box Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/box/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name box 7 | * @selector [class*='slds-box'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/color/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Color Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/description-list/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Description List Utilities Release Notes 4 | 5 | 6 | 7 | ## 2.7.0 8 | 9 | ### Changed 10 | - Changed behavior of media query when `slds-dl_horizontal` and `slds-dl_inline` are located inside of `slds-region_narrow` 11 | -------------------------------------------------------------------------------- /ui/utilities/description-list/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name description-list 7 | * @selector [class*='slds-dl'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/floats/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Floats Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/floats/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name floats 7 | * @selector [class*='slds-float_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/horizontal-list/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Horizontal List Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/horizontal-list/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @include deprecate('4.0.0', 'Use has-dividers--{position} helpers instead') { 5 | 6 | .slds-list_horizontal.slds-has-dividers > .slds-list__item, 7 | .slds-list--horizontal.slds-has-dividers > .slds-list__item { 8 | @include dot-separator; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ui/utilities/horizontal-list/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name horizontal-list 7 | * @selector [class*='slds-list_horizontal'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/hyphenation/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Hyphenation Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/hyphenation/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name hyphenation 7 | * @selector .slds-hyphenate 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/hyphenation/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | 6 | export let examples = [ 7 | { 8 | id: 'default', 9 | label: 'Hyphenate', 10 | element: ( 11 |

12 | A long heading might be supercalifragilisticexpiallidocious. 13 |

14 | ) 15 | } 16 | ]; 17 | -------------------------------------------------------------------------------- /ui/utilities/index-with-dependencies.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | @use "sass:math"; 4 | @import 5 | '../design-tokens', 6 | '../config', 7 | '../vendor/deprecate', 8 | '../dependencies/index', 9 | './index'; 10 | -------------------------------------------------------------------------------- /ui/utilities/interactions/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Interactions Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/interactions/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name interactions 7 | * @selector [class*='slds-text-link'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/layout/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Layout Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/layout/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name layout 7 | * @selector .slds-has-top-magnet, .slds-has-bottom-magnet 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/layout/index.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | import classNames from 'classnames'; 6 | 7 | export const Magnet = props => ( 8 |
9 |
My Component
10 |
11 | ); 12 | -------------------------------------------------------------------------------- /ui/utilities/line-clamp/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name line-clamp 7 | * @selector [class*='slds-line-clamp_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/margin/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Margin Utility Release Notes 4 | 5 | 6 | 7 | 8 | 9 | ## 2.24.6 10 | 11 | ### Updated 12 | 13 | - Updated documentation regarding veriable density 14 | 15 | ## 2.8.0 16 | 17 | ### Added 18 | 19 | - Added documentation detailing the values of the variable density classes in Comfy and Compact modes 20 | -------------------------------------------------------------------------------- /ui/utilities/media-objects/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Media Objects Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/media-objects/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name media-objects 7 | * @selector [class*='slds-media_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/name-value-list/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Name Value List Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/name-value-list/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name name-value-list 7 | * @selector [class*='slds-item_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/padding/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Padding Utility Release Notes 4 | 5 | 6 | 7 | 8 | 9 | ## 2.24.6 10 | 11 | ### Updated 12 | 13 | - Updated documentation regarding veriable density 14 | 15 | ## 2.8.0 16 | 17 | ### Added 18 | 19 | - Added documentation detailing the values of the variable density classes in Comfy and Compact modes 20 | -------------------------------------------------------------------------------- /ui/utilities/padding/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name padding 7 | * @selector [class*='slds-p-'], [class*='slds-var-p-'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/position/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Position Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/position/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name position 7 | * @selector [class*='slds-is-'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/print/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Print Utility Release Notes 4 | 5 | 6 | 7 | Added a no-print modifer to hide a component when printing a page. 8 | 9 | 10 | -------------------------------------------------------------------------------- /ui/utilities/print/__tests__/__snapshots__/index.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`print utilities hides rendered text only when printing 1`] = ` 4 |
7 | I am hidden when printing 8 |
9 | `; 10 | -------------------------------------------------------------------------------- /ui/utilities/print/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | /* eslint-env jest */ 2 | import React from 'react'; 3 | import createHelpers from '../../../../jest.helpers'; 4 | const { matchesMarkup } = createHelpers(__dirname); 5 | 6 | describe('print utilities', () => { 7 | it('hides rendered text only when printing', () => 8 | matchesMarkup( 9 |
I am hidden when printing
10 | )); 11 | }); 12 | -------------------------------------------------------------------------------- /ui/utilities/print/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name print 7 | * @selector .slds-no-print 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/print/_index.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @summary Hides an element only when printing. 6 | * 7 | * @selector .slds-no-print 8 | * @notes Use on each element that should be ommited from printing. 9 | * @modifier 10 | */ 11 | @media print { 12 | 13 | .slds-no-print { 14 | display: none; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ui/utilities/print/docs.mdx: -------------------------------------------------------------------------------- 1 | import CodeView from '../../../shared/components/CodeView.jsx'; 2 | import { getDisplayElementById } from '../../shared/helpers'; 3 | import * as Base from './example'; 4 | 5 |
6 | Print utilities give you the ability to hide a component when printing a page. 7 |
8 | 9 | ## Examples 10 | 11 | ### No Print 12 | 13 | {getDisplayElementById(Base.examples, 'no-print')} 14 | 15 | -------------------------------------------------------------------------------- /ui/utilities/print/example.jsx: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | import React from 'react'; 5 | 6 | export let examples = [ 7 | { 8 | id: 'no-print', 9 | label: 'No Print', 10 | element:
I am hidden when printing
, 11 | description: 12 | 'Use the `slds-no-print` class to hide an element when printing the page.' 13 | } 14 | ]; 15 | -------------------------------------------------------------------------------- /ui/utilities/scrollable/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Scrollable Utility Release Notes 4 | 5 | 6 | 7 | ## 2.21.0 8 | 9 | ### Added 10 | 11 | - Added tabindex to fix Scrollable region must have keyboard access wcag issue 12 | -------------------------------------------------------------------------------- /ui/utilities/scrollable/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name scrollable 7 | * @selector [class*='slds-scrollable'] 8 | * @support dev-ready 9 | * @scroller 10 | */ 11 | -------------------------------------------------------------------------------- /ui/utilities/sizing/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Sizing Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/sizing/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name sizing 7 | * @selector [class*='slds-size_'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/text/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name text 7 | * @selector [class*='slds-text-'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/themes/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Themes Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/themes/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name themes 7 | * @selector [class*='slds-theme'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/truncation/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Truncation Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/truncation/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name truncation 7 | * @selector [class*='truncate'], .slds-truncate 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/vertical-list/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Vertical List Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/vertical-list/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name vertical-list 7 | * @selector [class*='slds-list_vertical'] 8 | * @support dev-ready 9 | */ 10 | -------------------------------------------------------------------------------- /ui/utilities/visibility/RELEASENOTES.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Visibility Utility Release Notes 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ui/utilities/visibility/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | @include deprecate('4.0.0', 'Please use slds-is-collapsed instead') { 5 | 6 | .slds-collapsed { 7 | height: 0; 8 | overflow: hidden; 9 | } 10 | } 11 | 12 | @include deprecate('4.0.0', 'Please use slds-is-expanded instead') { 13 | 14 | .slds-expanded { 15 | height: auto; 16 | overflow: visible; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /ui/utilities/visibility/_doc.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license 3 | 4 | /** 5 | * @utility 6 | * @name visibility 7 | * @selector [class*='show'], [class*='hide'], [class*='assistive-text'] 8 | * @support dev-ready 9 | * @layout responsive 10 | */ 11 | --------------------------------------------------------------------------------