Skip to content

Commit

Permalink
Merge branch 'main' into 11729-update-number-input-2
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Aug 1, 2022
2 parents 4fb3103 + f797002 commit 0d70137
Show file tree
Hide file tree
Showing 11 changed files with 167 additions and 3 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Code generated by carbon-components-react. DO NOT EDIT.
//
// Copyright IBM Corp. 2018, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Code generated by carbon-components. DO NOT EDIT.
//
// Copyright IBM Corp. 2018, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';
9 changes: 9 additions & 0 deletions packages/react/scss/utilities/_hide-at-breakpoint.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Code generated by @carbon/react. DO NOT EDIT.
//
// Copyright IBM Corp. 2018, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@forward '@carbon/styles/scss/utilities/hide-at-breakpoint';
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@use '../../../../styles/scss/utilities/hide-at-breakpoint' as *;

.hide-at-sm {
@include hide-at-sm;
}

.hide-at-md {
@include hide-at-md;
}

.hide-at-lg {
@include hide-at-lg;
}

.hide-at-xlg {
@include hide-at-xlg;
}

.hide-at-max {
@include hide-at-max;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* Copyright IBM Corp. 2016, 2018
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import './HideAtBreakpoint-story.scss';
import React from 'react';

export default {
title: 'Helpers/HideAtBreakpoint',
component: HideAtBreakpoint,
};

export const HideAtBreakpoint = () => {
return (
<>
<div className="hide-at-sm">
<code>@include hide-at-sm</code> <br />
<br />
Only hidden on sm breakpoint
</div>
<div className="hide-at-md">
<code>@include hide-at-md</code> <br />
<br />
Only hidden on md breakpoint
</div>
<div className="hide-at-lg">
<code>@include hide-at-lg</code> <br />
<br />
Only hidden on lg breakpoint
</div>
<div className="hide-at-xlg">
<code>@include hide-at-xlg</code> <br />
<br />
Only hidden on xlg breakpoint
</div>
<div className="hide-at-max">
<code>@include hide-at-max</code> <br />
<br />
Only hidden on max breakpoint
</div>
</>
);
};
5 changes: 5 additions & 0 deletions packages/styles/__tests__/__snapshots__/styles-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -792,6 +792,11 @@ Array [
"importPath": "@carbon/styles/scss/utilities/focus-outline",
"relativePath": "scss/utilities/focus-outline",
},
Object {
"filepath": "scss/utilities/_hide-at-breakpoint.scss",
"importPath": "@carbon/styles/scss/utilities/hide-at-breakpoint",
"relativePath": "scss/utilities/hide-at-breakpoint",
},
Object {
"filepath": "scss/utilities/_high-contrast-mode.scss",
"importPath": "@carbon/styles/scss/utilities/high-contrast-mode",
Expand Down
23 changes: 20 additions & 3 deletions packages/styles/docs/sass.md
Original file line number Diff line number Diff line change
Expand Up @@ -382,9 +382,26 @@ You can also include these when configuring themes using the theme mixin:

**Files**

| Import | Description |
| :---------------------------------------------------- | :---------- |
| `@use '@carbon/styles/scss/utilities/focus-outline';` | |
| Import | Description |
| :--------------------------------------------------------- | :--------------------------------------------------------------------- |
| `@use '@carbon/styles/scss/utilities/box-shadow';` | Adds the Carbon defined box-shadow value |
| `@use '@carbon/styles/scss/utilities/button-reset';` | Resets Button styles |
| `@use '@carbon/styles/scss/utilities/component-reset';` | Resets default styles |
| `@use '@carbon/styles/scss/utilities/component-tokens';` | Get tokens and inverse values for a given theme |
| `@use '@carbon/styles/scss/utilities/convert';` | Converts a given px value to a rem unit |
| `@use '@carbon/styles/scss/utilities/custom-property';` | Get the var() representation for a given token |
| `@use '@carbon/styles/scss/utilities/focus-outline';` | Adds the Carbon defined focus styles |
| `@use '@carbon/styles/scss/utilities/hide-at-breakpoint';` | Hides elements at specific breakpoints only |
| `@use '@carbon/styles/scss/utilities/high-contrast-mode';` | Sets Windows High Contrast Mode styles |
| `@use '@carbon/styles/scss/utilities/keyframes';` | Animations for skeleton states, showing + hiding |
| `@use '@carbon/styles/scss/utilities/placeholder-colors';` | Sets the Carbon defined placeholder styles |
| `@use '@carbon/styles/scss/utilities/rotate';` | Adds rotational transformation |
| `@use '@carbon/styles/scss/utilities/skeleton';` | Adds Carbon defined skeleton styles |
| `@use '@carbon/styles/scss/utilities/text-overflow';` | Adds text overflow styling |
| `@use '@carbon/styles/scss/utilities/text-truncate';` | Truncates text at beginning or end of text |
| `@use '@carbon/styles/scss/utilities/tooltip';` | Shared Tooltip styles |
| `@use '@carbon/styles/scss/utilities/visually-hidden';` | Hides elements visually, but available to screen reader/assistive text |
| `@use '@carbon/styles/scss/utilities/z-index';` | The Carbon stack hierarchy |

## Compatibility

Expand Down
1 change: 1 addition & 0 deletions packages/styles/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ const files = [
'scss/utilities/_convert.scss',
'scss/utilities/_custom-property.scss',
'scss/utilities/_focus-outline.scss',
'scss/utilities/_hide-at-breakpoint.scss',
'scss/utilities/_high-contrast-mode.scss',
'scss/utilities/_index.scss',
'scss/utilities/_keyframes.scss',
Expand Down
2 changes: 2 additions & 0 deletions packages/styles/scss/components/list-box/_list-box.scss
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,8 @@ $list-box-menu-width: rem(300px);
}

.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
.#{$prefix}--list-box__field,
.#{$prefix}--list-box.#{$prefix}--list-box--warning.#{$prefix}--list-box--inline
.#{$prefix}--list-box__field {
padding-right: rem(56px);
}
Expand Down
44 changes: 44 additions & 0 deletions packages/styles/scss/utilities/_hide-at-breakpoint.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@use '../breakpoint' as *;
@use '../config';

// Mixins that can be used to hide elements only at specific breakpoints.
// Helpful for when you would like to hide elements outside of a Grid context
@mixin hide-at-sm {
padding: 2rem 1rem;
background: #8a3ffc;
@include breakpoint-between('sm', 'md') {
display: none;
}
}

@mixin hide-at-md {
padding: 2rem 1rem;
background: #4589ff;
@include breakpoint-between('md', 'lg') {
display: none;
}
}

@mixin hide-at-lg {
padding: 2rem 1rem;
background: #42be65;
@include breakpoint-between('lg', 'xlg') {
display: none;
}
}

@mixin hide-at-xlg {
padding: 2rem 1rem;
background: #f1c21b;
@include breakpoint-between('xlg', 'max') {
display: none;
}
}

@mixin hide-at-max {
padding: 2rem 1rem;
background: #da1e28;
@include breakpoint-up('max') {
display: none;
}
}
1 change: 1 addition & 0 deletions packages/styles/scss/utilities/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@forward 'component-reset' as component-*;
@forward 'convert' show em, rem;
@forward 'focus-outline';
@forward 'hide-at-breakpoint';
@forward 'high-contrast-mode';
@forward 'keyframes';
@forward 'placeholder-colors';
Expand Down

0 comments on commit 0d70137

Please sign in to comment.