Skip to content

Commit

Permalink
feat(button): added built-in support for rendering CircularProgress
Browse files Browse the repository at this point in the history
If both the `@react-md/button` and `@react-md/progress` packages have
been installed and imported in the same file, the button will
automatically decrease the `CircularProgress`'s size to be more "dense"
and be the same size as an icon.
  • Loading branch information
mlaursen committed Aug 23, 2020
1 parent 102efe7 commit c6c616b
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 27 deletions.
3 changes: 3 additions & 0 deletions packages/button/src/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,9 @@
}
@include rmd-button-base;
@include rmd-states-surface;
@if $rmd-button-circular-progress-size != null and mixin-exists(rmd-progress-theme-update-var) {
@include rmd-progress-theme-update-var(circular-size, $rmd-button-circular-progress-size);
}

&--text {
@include rmd-button-text;
Expand Down
41 changes: 41 additions & 0 deletions packages/button/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/// @group button
////

@import '~@react-md/icon/dist/functions';
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/theme/dist/mixins';
@import '~@react-md/theme/dist/variables';
Expand Down Expand Up @@ -103,6 +104,46 @@ $rmd-button-floating-z-index: $rmd-utils-temporary-element-z-index !default;
/// @type Number
$rmd-button-floating-margin: 1.5rem !default;

/// The size to use for a `CircularProgress` that exists as a child of the
/// `Button`. The styles will only be created if this value is not `null`, the
/// `@react-md/progress` package has been installed, and the
/// `@react-md/progress`'s `mixin`s have been imported in the same file as the
/// `@react-md/button`'s `mixin`s.
///
/// @example scss - Includes `CircularProgress` size<!-- no-compile -->
/// @import '~@react-md/button/dist/mixins';
/// @import '~@react-md/progress/dist/mixins';
/// @import '~@react-md/utils/dist/mixins';
///
/// // can also manually set it to a different value if desired:
/// // $rmd-button-circular-progress-size: 1.5rem;
///
/// // or @include react-md-button;
/// @include react-md-utils;
///
/// @example scss - Does not include `CircularProgress` size<!-- no-compile -->
/// // bad example since `@react-md/progress` was not imported
/// @import '~@react-md/button/dist/mixins';
/// @import '~@react-md/utils/dist/mixins';
///
/// // or @include react-md-button;
/// @include react-md-utils;
///
/// @example scss - Opt-out of `CircularProgress` size<!-- no-compile -->
/// @import '~@react-md/button/dist/mixins';
/// @import '~@react-md/progress/dist/mixins';
/// @import '~@react-md/utils/dist/mixins';
///
/// // manually set it to `null` to prevent it from being added
/// $rmd-button-circular-progress-size: null;
///
/// // or @include react-md-button;
/// @include react-md-utils;
///
/// @since 2.3.0
/// @type String|Number
$rmd-button-circular-progress-size: rmd-icon-theme-var(size) !default;

/// A Map of floating position styles to create. Each key will be made into a
/// className by `&--floating-#{$key}` and each value will parsed as a style
/// map. If you want to remove positions, override this variable with only the
Expand Down
Loading

0 comments on commit c6c616b

Please sign in to comment.